When you start designing a layout, you should specify the fonts used on the page in CSS. Often different fonts designer types not only the main text of the page, but also a variety of headings, logos, monograms:
A good designer, as well as a good layout designer knows that the browser can use to display the page only those fonts that are installed on the user’s computer. That is, fonts can be divided into two categories:
- Fonts that will display with no problem for the vast majority of users.
- Fonts that a fairly large group of users do not.
If the designer used the fonts of the second category to create, for example, a logo or large static headings, you can not hesitate to use the technique of replacing the text with a picture. The disadvantage of using this technique – inflexibility. If you change the text will have to redo the picture and change the CSS (for example, if the size of the new picture does not match the old one).
We can say that the danger of applying the method directly depends on the likelihood of changing the text. Therefore, to do, for example, the total text of the page in non-standard fonts can not! Literate designer will never do so. And if you got a green designer, a good layout designer simply must correct his mistake – in the layout by replacing this font as similar to the standard one.
But how to distinguish fonts of the first group from the second? Clearly, the set of fonts installed directly on your computer can not be relied upon! Let’s look into it.
Standard fonts are a set of fonts installed with the operating system. Since there are different operating systems, they have different sets of fonts.
As far as Unix/Linux operating systems are concerned, they do not have a single set of fonts. Many Linux users use the DejaVu font set, in particular on Ubuntu it is installed by default. According to statistics http://www.codestyle.org many Unix/Linux users also have URW, Free and other font sets installed. According to the same statistics, more than 60% of Unix/Linux users have on their computer fonts set Core fonts for the Web, which until 2002 was officially available for free download on the Microsoft site.
To ensure that a page can be displayed as conceived by the designer, in any operating system, it is possible in the CSS font-family property to set several fonts, listed in 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:
- An optional font family name. For example, Times new Roman, Arial, and others. The names of font families that contain spaces must be enclosed in quotation marks. If there are no quotation marks, any whitespace characters before and after the font name are ignored, and any sequence of spaces within the font name is converted to a single space.
- Generic (common) family. The following generic families are defined in the specification:
- serif – fonts with serifs at the ends;
- sans-serif – sans serif fonts;
- cursive fonts are italic fonts;
- fantasy are decorative fonts;
- monospace – monospace font (with letters of equal width).
The names of the generic families are keywords and do not have to be enclosed in quotation marks.
Thus, for the design takes the standard font of the OS Windows, matched with a similar font for Mac OS and Unix/Linux, set the common font family and done.
But it’s not that simple. Let’s dig deeper.
In Search of Web-Safe Fonts
On the Internet, historically there is such a notion as “safe” Web-fonts. A safe font is a font that is standard for all operating systems. Since such a state of affairs is only a dream, absolutely safe fonts do not exist!
Certain fonts can be regarded as safe with few qualifications.
The basis for defining “safe” fonts are the fonts of the most common operating system Windows, which are also used in other operating systems. An example of such use is the already mentioned font package Core fonts for the Web, which, according to statistics, was downloaded by many Unix/Linux users.
This 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 Cyrillic script, which is important for Runet.
The set of fonts included in the standard delivery of Mac OS X (this operating system is the most widespread among Mac OS users) includes all the fonts of the Core fonts for the Web.
Thus, based on the fonts in Windows, used in other operating systems, formed the following list of so-called “safe” Web-fonts:
- Arial Black
- Comic Sans MS
- Courier New
- Times New Roman
- Trebuchet MS
- Webdings font contains a set of icons, so it cannot be used for content. Andale Mono is not widely used because it is not good for everyday screen reading and not all Windows users have it.
All of these fonts are available to every Windows user, Mac OS X and the vast majority of Unix/Linux users (that is, those who have installed the Core fonts for the Web).
But what about the rest of us? After all, we want as many users as possible to see the designer’s vision!
Complete Guide to Pre-Installed Fonts
This article lists fonts installed with major operating systems and software, shows how those fonts look on that platform, and attempts to suggest fonts with similar appearance and metrics.
About these tables
- Fonts listed in the same row are near equivalents of each other, with the exception of the last row in each table which is used for other/non matching fonts. The “matching” fonts may not match exactly but have similar character shapes and metrics.
- Ubuntu is used as a sample Gnu/Linux operating system. Other distributions may have different fonts installed. If you can provide a list of pre-installed fonts on other distros please send it to me and I will incorporate it into this article.
- mscorefonts is an add-on for Linux. It installs the core web fonts from Microsoft.
- All font samples were taken from a sample page at 16px, with the exception of Office 2008/Mac which I did not have available. Adobe CS5 font screenshots were taken on Windows.
- To make things more complicated, different Adobe CS5 programs install different sets of fonts. The Standard Install Set 1 and Standard Install Set 2 are listed in this article (minus the foreign language fonts).
View the tables
Fonts that support Cyrillic
A specific feature of Runet is the problem with page encodings and Cyrillic support in fonts. To not have problems with a variety of character encodings, clever people have invented Unicode, which allows to combine the characters of several languages in one font. Thus, for the Russian pages should only use Unicode fonts supporting Cyrillic.
Below is a table of correspondence fonts.
* in the column against the font means that the operating system has no native Cyrillic equivalents of the Windows font. But at the same time, there is a high probability that this font itself is installed in the operating system.
For example, if the main text of the layout is Arial, we find this font in the table and write the line corresponding to it in CSS:
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
This entry means that if the user has Arial font (and all Windows users and all Mac OS X users have it), the page will be displayed in that font. If the user does not have this font, the page of a Russian-speaking Mac OS 9 user will definitely be displayed with the standard system font Helvetica CY, but for a Unix/Linux user it will be displayed with Nimbus Sans L, which is installed for 90% of Unix/Linux users. If, however, the Unix/Linux user belongs to the 10% who do not have this font, the page will be displayed in the sans serif font that is set for viewing Web pages by default.
Samples of such rulers can be seen, for example, in Dreamweaver.
Sample font rulers in Dreamweaver
Beginning typesetters choose a ruler by the first font without thinking about what that long line means. Some even erase all but the first font, depriving the pleasure of seeing the designer’s intent for all users who, for whatever reason, do not have this font installed.
But now we know what that line means, don’t we? And we can already use it correctly.
But why is the line constructed by us so much different from the usual Dreamweaver:
font-family: Arial, Helvetica, sans-serif;
Besides the fact that the table takes into account Unix/Linux fonts, there is also some strange icon CY after the usual Helvetica. Let’s find out what it is!
Before the release of Mac OS X this ruler had the following meaning: for Windows users we display the page Arial, for Mac OS 9 users – the standard Helvetica font, and the rest see the page with the system font without serifs, set by default in the browser. But again, there is an important nuance: the standard Mac OS 9 font Helvetica has no Cyrillic characters! For the Russian-language page, that meant the following: for Windows users we display the page with Arial, for Mac OS 9 users with the standard Helvetica font, which displays unreadable information, while others see the page with the system font without serifs, configured by default in the browser.
For Mac OS 9 users to display this set correctly, it makes sense to specify the same standard Mac OS 9 font, Helvetica CY, which contains Cyrillic, instead of non-Cyrillicized Helvetica.
The reading of the rulers has changed since the release of Mac OS X. Now one common standard font is specified for Windows/Mac OS X. And if we want the intention of the designer to be seen by users of Mac OS 9, we have to assign them a font containing Cyrillic.
So although there are no safe fonts, there are safe rulers. They are also called CSS font stacks. In addition to the standard Windows/Mac OS X fonts, these rulers can also include equivalent fonts from the standard Mac OS 9 set (which has no ‘safe’ fonts by default) and common Unix/Linux fonts.
Any layout designer sooner or later encounters a moment when a designer uses a font in a layout that is not on the list of “safe” fonts; but that’s not a reason to bash it. But that’s not yet a reason to be alarmed! For example, designers often use Tahoma fonts on layouts that are not on that list. A properly constructed lineup of fonts opens up the possibility of using fonts other than Tahoma. A growing number of designers are taking advantage of this opportunity, and a competent layout designer should be aware of it.
Below is an additional table of fonts that are not on the list of “safe” fonts but can be used on layouts.
What about without Cyrillic?
For English-language texts, the above tables have a slightly different appearance.
For Arial, Courier New, and Times New Roman fonts, it is better to specify the Unix/Linux font first and then the Mac OS font when making rulers. This is due to some curvature of the Linux font set X11 core fonts set.
Fonts that are not on the “safe” list, but can be used on layouts, are better defined with CSS font stacks based on this table.
A dash in the Unix/Linux column means that users of these operating systems are likely to see the default font on the page.
** In this line it makes sense to put Garuda font before Palatino (see explanation above).
Absolutely safe fonts do not exist. The following fonts can be considered conditionally safe:
- Arial Black
- Comic Sans MS
- Courier New
- Times New Roman
- Trebuchet MS