When starting a layout, it is necessary in particular to specify the fonts used on the page in CSS. Often, the designer types in various fonts not only the main text of the page, but also various headings, logos, monograms:

A good designer, like a good coder, knows that the browser can use only those fonts that are installed on the user's computer to display the page. That is, fonts can be divided into two categories:

1. Fonts that are easily displayed in the vast majority of users.
2. Fonts that a large enough user group does not have.

If the designer used the second category fonts to create, for example, a logo or large static headings, you can not hesitate to use the method of replacing text with a picture. The disadvantage of this technique is inflexibility. In case of changes in the text, you will have to redo the image and change the CSS (for example, if the size of the new image does not match the old one).

It can be said that the danger of applying the technique directly depends on the probability of changing the text. Therefore, to make, for example, the general text of a page with non-standard fonts is impossible! A competent designer will never do that. And if a designer gets green, a good layout designer is simply obliged to correct his mistake - in the layout, replace this font with the most similar standard one.

But how to distinguish the fonts of the first group from the second? It is clear that you cannot rely on the font set installed directly on your computer! Let's figure it out.

Standard Fonts

Standard fonts are a set of fonts that are installed with the operating system. Since operating systems are different, they have a different set of fonts. A list of standard fonts for different versions of Windows can be found, for example, in the article Standard Windows Fonts, and a list of standard fonts for Mac OS on the Fonts page delivered with Mac OS. As for Unix / Linux operating systems, they lack a single set of fonts. Many Linux users use the DejaVu font set, in particular, they are installed by default on Ubuntu. According to http://www.codestyle.org statistics, many Unix / Linux users also have the URW, Free and other font sets installed. According to the same statistics, more than 60% of Unix / Linux users have on their computers the Core fonts for the Web set, which until 2002 was officially available for free download on the Microsoft website.

In order for the page to be displayed as the designer intended, in any operating system, it is possible in the CSS property of the font-family to specify several fonts listed, separated by commas.

This property specifies a priority list of font family names and / or generic family names. According to the CSS2 specification, there are two types of font family names:

1. Optional font family name. For example, "Times new Roman", "Arial" and others. Names of font families containing spaces must be enclosed in quotes. If there are no quotes, any space characters before and after the font name are ignored, and any sequence of spaces inside the font name is converted to a single space.
2. Generic (common) family. The specification defines the following generic families:
   • serif - serif fonts;
   • sans-serif - sans serif fonts;
   • cursive - italic fonts;
   • fantasy - decorative fonts;
   • monospace - monospaced font (with letters of equal width).
   Generic family names are keywords and do not have to be quoted.

Thus, a standard font from OS Windows is taken for design, similar to Mac OS and Unix / Linux is selected for it, a common font family is set and ready.

But not everything is so simple. Let's dig in more detail.

Looking for Web Secure Fonts

On the Internet, historically, such a thing as “safe” Web-fonts. Safe font can be called a font that is standard for all operating systems. Since this state of affairs can only dream of, absolutely safe fonts do not exist!

Individual fonts can be called safe with some reservations.

The basis for determining the "safe" fonts were the fonts of the most common Windows operating system, which are also used in other operating systems. An example of this use is the already mentioned Core fonts for the Web font package, which, according to statistics, has been downloaded by many Unix / Linux users.

The package includes the following fonts: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. All of them support the Cyrillic alphabet, which is important for the RuNet.

The set of fonts included in the standard Mac OS X distribution (this OS is most common among Mac OS users) includes all fonts in the Core fonts for the Web set.

Thus, based on Windows fonts used in other OSs, the following list of so-called “safe” Web fonts was formed:

• Arial
• Arial black
• Comic sans ms
• Courier new
• Georgia
• Impact
• Times new roman
• Trebuchet ms
• Verdana

Webdings font contains a set of icons, so it cannot be used for content. Andale Mono is not widely used, as it is bad for everyday reading of text from the screen and not all Windows users have it.

All of these fonts are in every Windows, Mac OS X user and the vast majority of Unix / Linux users (i.e., those who have Core fonts for the Web installed).

But what about the rest? After all, I want the designer's intention to see as many users as possible!

Windows, Mac and Unix / Linux font matching

This article is a continuation of the typesetter article on fonts. Part I: Secure Fonts.

Cyrillic fonts

A specific feature of the Runet is a problem with page encodings and Cyrillic font support. To avoid problems with a variety of character encodings, smart people came up with Unicode, which allows you to combine the characters of several languages ​​in one font. Thus, for Russian-language pages you need to use only Unicode fonts that support Cyrillic.

Below is a table of correspondence fonts.

* in the column opposite the font means that the operating system does not have the native Cyrillic equivalents of Windows. But at the same time there is a high probability that the font itself is installed directly in the operating system.

For example, if the main text of the layout is Arial, we find this font in the plate and write the corresponding line in CSS:

This entry means that if a user has an Arial font (and all Windows users and all Mac OS X users have it), then the page is displayed in this font. If the user doesn’t have this font, then the Mac OS 9 Russian-speaking user page will be accurately displayed with the standard Helvetica CY system font, and the Unix / Linux user will display with Nimbus Sans L font that is installed in 90% of Unix / Linux users. If the Unix / Linux user belongs to the 10% that do not have this font, then the page will be displayed with the serif font that is set to browse the Web pages by default.

Samples of such rulers can be seen, for example, in Dreamweaver.

Sample font lines in Dreamweaver

Beginner coders choose a ruler on the first font do not think about what this long line means. Some even erase everything except the first font, depriving the designer's intention of seeing all users who for some reason have not installed this font.

But we now know what this line means, isn’t it? And we can already use it correctly.

But why is the line we built so different from the usual Dreamweaver:

In addition to the fact that the table takes into account the Unix / Linux fonts, there is still some strange CY icon after the usual Helvetica. Let's figure out what it is!

Before the release of Mac OS X, this line had the following meaning: for Windows users, display the Arial page, for Mac OS 9 users - with the standard Helvetica font, and the rest see the page with the system sans-serif font set by default in the browser. But again, an important nuance! The standard Mac OS 9 Helvetica font does not have Cyrillic! For the Russian-language page, this meant the following: for Windows users, display the Arial page, for Mac OS 9 users - with the standard Helvetica font, which displays unreadable information, and the rest see the page with the system font without a serif configured in the default browser.

To correctly display this set in Mac OS 9 users instead of uncyrillized Helvetica, it makes sense to specify the same standard for Mac OS 9 Helvetica CY font containing Cyrillic.

The reading of the rulers after the release of Mac OS X has changed. Now for Windows / Mac OS X, one common standard font is indicated. And if we want users of Mac OS 9 to see the designer’s intent, they need to prescribe a font containing Cyrillic in the font range.

Thus, although there are no secure fonts, there are safe font rulers. They are also called font CSS stacks . In addition to the standard Windows / Mac OS X fonts, these rulers can also include equivalent fonts from the standard set of Mac OS 9 (which does not contain default “safe” fonts) and common Unix / Linux fonts.

Any typesetter sooner or later faces the moment when the designer uses a font in the layout that is not included in the list of “safe” ;. But this is not a reason to sound the alarm! For example, designers very often use Tahoma font on layouts, which is not included in this list. Properly constructed font line opens up the possibility of using not only Tahoma, but also other fonts. An increasing number of designers are taking advantage of this opportunity and a competent layout designer should be aware of this.

Below is an additional table of fonts that are not included in the list of "safe", but can be used on layouts.

And if without Cyrillic?

For English texts, the above tables have a slightly different look.

For Arial, Courier New and Times New Roman fonts, it’s better to specify the font for Unix / Linux, and then for Mac OS, when creating lines. This is due to some curvature of the Linux X11 core fonts set.

Fonts that are not included in the list of "safe", but can be used on layouts, it is better to determine the font CSS stacks based on this table.

A dash in the Unix / Linux column indicates that users of these operating systems will most likely see the font set for displaying pages on the page.

** In this lineup, it makes sense to put the Garuda font in front of Palatino (see explanation above).

Findings:

1. Absolutely secure fonts do not exist. Conditionally safe you can call the following fonts:
   • Arial
   • Arial black
   • Comic sans ms
   • Courier new
   • Georgia
   • Impact
   • Times new roman
   • Trebuchet ms
   • Verdana
2. Secure CSS stacks that take into account Cyrillic support for fonts can be found in the article Secure CSS Font Stacks for Runet.
3. If the Cyrillic support is not important on the page, use the CSS stacks from the Safe CSS Font Stacks for English texts article.