Part I - Part II - Part III - Part IV - Part V - Part VI

Part I

A familiar designer approached me once with a request to sort out a situation that seemed strange to him. The client asked to "do the same as Apple," but using their own ways of arranging blocks, images, colors and text. In general, the design in the end turned out to be completely unlike apple.com, but this, in fact, was achieved by the client. And the designer seemed to succeed, but ... The client still did not like it, he still demanded to redo the layout. According to his feelings, “something was completely wrong.” And what exactly - he could not explain. So a question arose for my colleague about how to please the customer's vagaries and understand his aspirations. It turned out not so simple, but quite understandable. I have faced this problem before. Therefore, I decided to try to express my thoughts on this matter.
')
So, what is the situation in the field of modern web typography and in what ways should the emerging problems be solved?

And these problems lie in the use of standard fonts for the layout of text on the site. By the way, as a rule, almost no one even thinks about it.

But let's analyze this whole situation from the very beginning.

So, at the very dawn of the web, HTML did not mean a change in the type of headset, and the size could be set relative to a certain average value in only a few gradations (more-less).

As a standard font, as a rule, a serif font ( Times ) was used, and a large enough size so that the text on monitors at that time was easy to read with very low resolution and strong distortions due to the convexity of the screen surface. In different operating systems, this font has been implemented in different ways.
Personally, it seems to me that the Microsoft version, named Times New Roman , which was included in the Windows operating systems (and still included), turned out to be the worst, since the small text (in the HTML tag and even more ) turned out to be practically unreadable.

In the absence of anti-aliasing (screen-smoothing algorithm), serifs-serifs of the letters stuck together in some unimaginable mess, and it was almost impossible to disassemble anything. Yes, and in large sizes ( and above) the font looked very ugly. The italic and greasy styles of the headset were not distinguished by their special grace. A little better things were in Unix and MacOS systems. The best option seemed to be implementation in the now-abandoned BeOS system, but here, most likely, the presence of font smoothing affected. And today, where Times New Roman is used , it often happens that something completely unimaginable.

However, the browsers of that time allowed forcibly choosing any typeface installed in the system as the default font. In Windows, in addition to the Antiquarian Times, the grotesque Arial font could be used (to a certain extent, not the most successful remake of the legendary Helvetica ), the monospaced Courier and the semi-copy-mocking ComicSans . And if Courier turned out to be a very good option for displaying program code (this font is still the favorite in the programmer environment and is used by default in most modern programming environments), then Arial only slightly improved the situation compared to Times New Roman . The Unix system used the Helvetica font (more or less close to the original Linotype font). And users of Apple products in the course was headset Geneva .

With the development of the HTML language, by the mid-90s, it became possible to set not only the size, but also a specific headset using a parameter . This entailed, well, not so much a revolution, but certainly the widespread fascination with the use of force in a particular font. However, the designers, who began to write something like that, quickly discovered that all the supposedly beautiful ones are realized only on their own computers, while the overwhelming majority of site visitors see everything completely differently. In the absence of the specified font, the headset is used by default, and the site carefully drawn in the table layout crumbles into some kind of ridiculous pile of disparate blocks. HTML specifications have been adjusted to make it possible to specify multiple fonts and a unifying family in case there is no specific font in the system. For example, it was possible to write like this: and be sure that the desired text block will look more or less the same on different computers, since all the specified fonts are included in the standard configuration of the most popular operating systems, and if for some reason such a font does not appear , the browser should use any default font from the grotesque family (sans-serif). In total, seven such families were assumed: monospaced (monospaced fonts for displaying program code, for example: Courier ), serif ( serif fonts, for example: Times ), sans-serif (grotesque sans serif fonts, for example: Arial, Geneva ), cursive (handwritten fonts, for example: ZapfChancery ), fantasy (decorative fonts, for example: ComicSans ), symbol (fonts for certain characters, for example: ZapfDingbats ) and a special class other (all other fonts, for example: man-made, grunge, gothic, etc.) . All families could be customized for specific cases. For example, instead of Courier, assign MonoCondensed , and then everything that is supposed to be displayed in a monospace font will be performed using MonoCondensed .

To top it off already in HTML 4.0, with the development of style sheets, it became possible to specify the font size not only in relative, but also in absolute values ​​using various units of measurement. And if, to a certain extent, the values ​​of pt (points), em (um) and % depending on the screen resolution and other suggested some kind of relative manipulation of the size of the texts, then the most rigid unit of pixels (pixel) left no alternatives: Registered designer, and have to read.



At the turn of the century pixel art and minimal font sizes bordering on unreadability came into vogue. Therefore, it was quite possible to meet the structure like . And no matter how an ordinary visitor with a medium type of view tried to increase the font in the browser, he still had to grasp the small feline in the tiny size of 9 pixels. On older monitors with a resolution of 800x600, it looked more or less tolerable, but on more modern displays with resolutions of 1024x768 and higher, it was extremely difficult to read such things. By the way, this is probably why many sites with minimized graphics and tiny fonts that were popular in those years are now mostly dead or live to the last days:


In 1996, new system fonts Verdana, Tahoma and Georgia were developed and incorporated into Windows.
Over time, these fonts are included in all modern operating systems. Not the last role in this was played by the sharply increased popularity of these fonts among web developers.
Almost all the "fashionable" sites of the late 90s and early 2000s were created exclusively with the help of Tahoma or Verdana . Using the “obsolete” Arial was perceived as amateurishness and old-fashionedness. Indeed, in small-sized pins (even down to pins of 10 or even 9 pixels), these headsets read much better, although Arial still looked better in large sizes. Over time, Verdana and Tahoma were repeatedly criticized by designers. It turned out that Verdana does not correctly display some of the characters, the font is too heavy, bold, and not very pleasant italics. And Tahoma did not have an italic pattern at all, often the letters stuck together, which made it difficult to read the text, and in large skittles the bold face did not look sufficiently bold. In addition, on print, both fonts looked far from perfect. However, these have not reduced the popularity of these two fonts in the camp of web designers so far.


The Georgia headset (developed by Mattew Carter in 1993) turned out to be much more successful and served as a great replacement for the awkward Times New Roman .
The font looked more organic, rounded and better perceived on the screen. The font has a very good implementation of italics and bold. Today, if it is intended to create a website in the canons of classical typography, in the spirit of the layout of strict business publications, the Georgia headset is used, which looks equally good both in small and large size, on monitors with any resolution, as well as using anti-aliasing , and without it. However, this font also has its drawbacks. For example, a rather archaic “jumping” manner of execution of figures (minuscule numbers — some are displayed in size with letters, others act strongly up or down from the baseline) to someone may seem unusual and stylish, but for the most part causes some difficulties of perception in ordinary site reader. Georgia , being serifnom font, is not very well perceived when writing "inversion" (ie, light on the dark). And due to its roundness, the font turns out to be much less compact than the notorious Times : on one screen page with Georgia there is much less information than with other fonts, which is not very beneficial for various portals and online stores. Georgia has gained the most popularity today in blogs and social networks , where compactness and maximum information content are not so important as convenience for leisurely reading, accuracy and unobtrusiveness is important - the design should not dominate the content in any way.



With the further development of the HTML language and CSS specifications, there appeared more and more opportunities for content organization without involving cumbersome structures and rigid font size definitions. At the same time, it was still possible to flexibly manage the typography on the page. What professional designers immediately began to use, less and less often resorting to the introduction of images to display text headings and headings. Over time, the stereotypes that only sans serif fonts are suitable for reading from the screen have been destroyed, while in print only antiqua typefaces like Times are used as typesetting in magazines and newspapers. In many respects, two important factors play a decisive role here.

But we will talk about these factors, trends and problems (as well as about many other things, including methods for solving some issues, subtleties and tricks of web typography) in the next part of this story.

To be continued...