15 Top Questions about Fonts for Web Design

Already written in the United States, there are many different types of web fonts. Not everyone has time to go to this topic, so I tried to give them an answer. This material will be of interest to those who have not yet delved into the subtleties of font technology.

1 Why do we need web fonts?

The first thing that comes to mind is that the standard fonts are terribly boring, and it is difficult to do something original. As a rule, most of them are cast longing and despondency not only on users, but also on web designers. Non-standard fonts in this case are more expressive, and besides, there is an order of magnitude more of them, so there is plenty to choose from. And yet, the font is an integral part of the brand, so every affiliate web design company seeks to use it more actively.

And it would be possible to use the standard fonts, especially since many mobile OSs do not support them (for example, Arial, Tahoma, Verdana and Georgia). Due to the non-standard fonts, there are still some problems with displaying the rasterization mechanism, which is not easy to use. .

2 How to choose a good web font?

A font is not just a digitized set of letters, created with a brush on paper or an illustrator, it is also 98% of polishing, hinting and testing on various media and in different sizes. Such a font looks good, his style is polished, with him there will be no problems either on the printer or on the screen, the quality factor is blowing from him.

However, when choosing a font, it is not even this much greater importance, but the expediency and relevance of the font to the method of use and the tasks assigned to it. If you work with fonts, you need to understand how it works, what technologies are used. This will not help you to keep in mind a bunch of incomprehensible memorized rules, seized snatches. For example, every self-respecting printer knows why it is undesirable to use TrueType fonts in offset printing, which can be used as text and only for headings or pointers. If he does not know this, then he will have to reprint a huge circulation, and he will have to wait for constant surprises and problems. It's amazing why no one makes any demands on web designers.

3 How do browsers draw fonts?

Quite often I've heard that browsers draw fonts themselves, so they look different in every place. CoreText (and earlier QuickDraw), which is based on OS X and iOS, is a GDI or DirectWrite,

However, browsers do choose the rendering method themselves, which is provided by the OS. For example, GDI has 3 rendering options: B / W, normal anti-aliasing and subpixel ClearType. The peculiarity of the latter is that smoothing occurs only horizontally, in accordance with the location of subpixels. That's why we often use obverse horrible teeth on horizontal and diagonal strokes of a font.

4 TTF or OTF?

TrueType has the extension TTF, and with PostScript - OTF. Each of the technologies has its own particular hinting and application specifics.

This happens because PS and TT browsers choose different screening methods. For PS, the browser applied normal monochrome anti-aliasing, and TT was processed by ClearType. So it turns out that TrueType would be preferred for text fonts, and PostScript would be better for headings and large text especially in affiliate site.

5 What else affects the display?

Sometimes it is better to set the rasterization method manually. For example, in the Webkit engine, you can use the CSS property - webkit-font-smoothing and manually enable regular anti-aliasing instead of sub-pixel, and vice versa. There is also a non-trivial way to make the browser change the way it is rasterized, on Habré once suggested using a hack with text-shadow. 6 Do web fonts need hinting?

Hinting is special instructions that tightly tie abstract font curves to pixels on a monitor. The absolute majority of fonts (including commercial ones) are not hinted, because this is a rather laborious and complicated procedure. For TrueType and PostScript hinting is done differently. If you take a cheap font, the OTF format is safer, because the procedure has been unchanged since the black-and-white screening and is not quite adequate, and the procedure is simpler, and the author has the opportunity to do automatic hinting.

On the one hand, the hinting font is quite clear, sharp and uniform, and on the other hand, the shape of the letters is distorted depending on the size, and the intervals may differ from the real ones. Letters strictly obey the pixels.

In Windows, we see perhaps the most radical approach: such as popular fonts such as Tahoma, Verdana, Arial, and Georgia were otchintovany specifically for GDI ClearType, and when DirectWrite appeared, we had to perehint and update the main OS.

Unlike Microsoft, Apple takes the opposite approach, so it does not take into account at all.

Answering the question: The era of 300 DPI monitors is rapidly approaching, and a huge number of mobile devices have already resolved, and will not be needed at all. But since Windows is still hinting-dependent and oriented to low-resolution monitors, try to choose high-quality or standard-quality text fonts, otherwise the text will be unreadable and difficult to read.

7 @ font-face or Cufon?

Strange as it may sound, there are still people who ask this question. It would seem that after browsing to support the @ font-face attribute, all other font embedding technologies (Cufon, sIFR, Flash) seemed to have become irrelevant. Photoshop displays an unedited JPG file, but it does not have any image, it does not show any color. This site is licensed under the GNU Free Documentation License. Some font manufacturers (for example, Adobe) allow embedding (in programs and on the server) desktop font, if it remains protected and can not be downloaded. If you do not know what to do, you can use a separate web license. The disadvantage is that Flash is used, which is not supported by all devices. You can also use Cufon technology (Canvas is used), if the license allows. Of course, in this case the script will be cumbersome, and the text does not work, but in a hopeless situation it will do.

But the best way is to use @ font-face, it's both more technological and more convenient. He has only one drawback: not all manufacturers allow their fonts on the web.

8 In what formats should the font files be?

Fonts prepared for the introduction (@ font-face)

TTF or OTF is a familiar font file, but downloadable from the server while viewing the site;

WOFF is an unprotected archive of OTF or TTF source code, perhaps the most important format supported by most popular browsers, and files in WOFF are usually 2-2.5 times lighter than the original ones;

EOT - the TTT OpenType-implemented archive protection mechanisms are needed to support older Internet Explorer browsers (since IE8, in addition to TrueType curves, PostScript is also supported);

SVG - to support the Safari browser.

9 Can I convert web fonts?

No matter what you are told, you can not simply convert the file and preserve the original font quality, especially if it was originally in the OpenType format. In the process there is a chance to lose some data embedded in the font file (compiled instructions, additional signs, metrics). You will notice this, when the file is suddenly "loses weight" during conversion, especially non-curly to convert TrueType to PostScript and back.

In addition, the conversion process is almost always contrary to the terms of the license, prohibiting modification. Simply put - this is the same theft. When you drop the files into the converter, be sure that it will not miss them and will issue a warning, because the file contains the digital signatures of the manufacturer and the corresponding restrictions on modification.

10 How much should web fonts weigh?

Before displaying the page, the browser must download the font files. Maybe you had to see the effect of "font flash" (or FOUT), when for a short moment the standard fonts of the system instead of exotic fonts have time to flash. Normally, if the TTF (OTF) fits into 100 kb, and WOFF (EOT) at 50 kb. Always think about whether you need to use non-standard fonts at all, even if you use it in a short title.

The more perfectionism in design, the smaller the font files can weigh, and try to choose simple shapes. In this sense, the ideal form is an open geometric grotesque with little contrast. To speed up the loading of a font, it can also be useful to include it in a file using data: uri.

11 How many font styles can I use on the web?

From the point of view of the designer, a lot of styles - that's cool. And indeed, for the headline - Bold, and over there, for the inset - ExtraLight, unnecessary textiles will generally be stuffed and pressed into the Condensed Bold. Here it is - the real wealth and stylistic diversity. But when all this "wealth" begins to transfer to the site, it turns out that everything is terribly slow. And it does not even try to open a site from a mobile device. And also, do not forget that each style is worth the individual money, and it is likely that the customer will either ask you to find a font synonym, or reduce the number of styles, just not to buy the whole expensive headset. It is normal to use a maximum of 2-3 styles of the same or different typefaces.

12 Do I need to restrict the character set?

The answer to this question depends on what the site is and how it will be used. Restrictions can be useful, because it is possible to reduce the size of files. If you do not want to be a member of the Unicode table weighs 22 MB, you can add it to your site.

It is a completely different story, if your site is multilingual, in this case, in order to avoid incorrect display of characters, you should try to cover all the languages ​​used.

13 Can I use font clones?

It happens that it is either too expensive or even impossible to buy an original font, then it will be appropriate to choose a font synonym (clone). Of course, one should not expect tremendous quality from them, even if they are made by, say, a well-known Russian firm. It's all very bad when you hit on the opus of an anonymous author who decided to try himself in a new field, beware of such fonts.

14 How to test a font?

Designers, do not get used to seeing fonts only through Photoshop windows, graphic editors use their text smoothing techniques, and you can not be deceived by a beautiful picture. It's so much more useful to learn how to test and watch them in browsers. If there is a demo page, make sure that when rendering, all sorts of artifacts and spikes do not crawl out. There is also a tool like Typecast, where you can check many fonts, and then the page to the client. For those who choose a new font for a ready-made site - an indispensable service for you Web Fonts Previewer, you can test any font on a lively working site, as if you've already implemented it.

15 I have a font on my computer, can I use it on the site?

First, a little about stealing. I know a lot of designers who have thousands of fonts on their computers, whose origin is unknown to anyone. As a rule, just downloaded from the Internet. But for some reason, I think that the creation of good fonts is for months, and sometimes years of serious work! But there is a lot of difficulties at the development stage. It is not the only way to do it.

If you want to embed in the site, you can do it. If you really need to embed, then you will need a separate license, just like regular fonts (both Georgia and Tahoma are available).