If you're new to web design, you might be thinking something like, “Why should I limit myself to such a small selection of fonts? I have a huge collection of beautiful fonts!” The fact is that the visitor's browser can display only those fonts that are installed in his operating system ( approx. translator: currently it is already possible to apply virtually any fonts in page design using CSS 3 and its new property @font-face; however, not all browsers support this function yet), which means that each the visitor to your page must be the owner of the fonts you have chosen. Therefore, you should only use fonts that are available on each operating system. Luckily, CSS has a property @font-family, which makes this task easier.
List
| Meaning of @font-family | Windows | Mac | Family |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans serif |
| "Arial Black", Gadget, sans-serif | Arial Black | Arial Black Gadget | sans serif |
| Comic Sans MS cursive | Comic Sans MS | Comic Sans MS 5 | cursive |
| "Courier New", Courier, monospace | Courier New | Courier New, Courier 6 | monospace |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Impact, Charcoal, sans-serif | Impact | Impact 5, Charcoal 6 | sans serif |
| "Lucida Console", Monaco, monospace | Lucida Console | Monaco 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans serif |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Palatino Linotype, Book Antiqua 3 | Palatino 6 | serif |
| Tahoma, Geneva, sans-serif | Tahoma | Geneva | sans serif |
| "Times New Roman", Times, serif | Times New Roman | Times | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans serif |
| Verdana, Geneva, sans-serif | Verdana | Verdana, Geneva | sans serif |
| symbol | Symbol 2 | Symbol 2 | - |
| webdings | Webdings 2 | Webdings 2 | - |
| Wingdings, "Zapf Dingbats" | Wingdings 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Geneva, sans-serif | MS Sans Serif 4 | Geneva | sans serif |
| "MS Serif", "New York", serif | MS Serif 4 | New York 6 | serif |
1 The Georgia and Trebuchet MS fonts ship with Windows 2000/XP and are included in the IE font package (and indeed are included with many Microsoft applications), so they are installed on many Windows 98 computers.
2 Symbol fonts are displayed only in Internet Explorer, in other browsers they are usually replaced with a standard font (although, for example, the Symbol font is displayed in Opera, and Webdings - in Safari).
3 Book Antiqua is almost identical to Palatino Linotype; Palatino Linotype comes with Windows 2000/XP and Book Antiqua comes with Windows 98.
4 Please note that these fonts are not TrueType but bitmap so they may look bad at some sizes (they are designed to display at 8, 10, 12, 14, 18 and 24 pt at 96 DPI).
5 These fonts only work in standard fonts in Safari, but don't work in bold or italics. Comic Sans MS also works in bold but not in italics. Other Mac browsers seem to be fine emulating missing font properties on their own (thanks to Christian Fecteau for the tip).
6 These fonts are only installed on the Mac during the Classic install
Screenshots
- Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (thanks to Juris Vecvanags for the screenshot)
- Mac OS X 10.4.4, Firefox 1.5, ClearType enabled
- Mac OS X 10.4.11, Safari 3.0.4, ClearType enabled (thanks to Nolan Gladius for the screenshot)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType enabled (thanks to Eric Zavesky for the screenshot)
- Windows Vista, Internet Explorer 7, ClearType enabled
- Windows Vista, Firefox 2.0, ClearType enabled (thanks to Michiel Bijl for the screenshot)
Starting to typeset the layout, it is necessary, in particular, to specify in CSS the fonts used on the page. Often, the designer uses different fonts to type not only the main text of the page, but also various headings, logos, and monograms:
A good designer, like a good layout designer, 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 roughly divided into two categories:
- Fonts that will be displayed without problems for the vast majority of users.
- Fonts that a sufficiently large group of users do not have.
If the designer has used category 2 fonts to create, for example, a logo or large static headings, you can not hesitate to use the . The disadvantage of using 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 dimensions of the new image do not match the old one).
We can say that the danger of using the technique directly depends on the probability of changing the text. Therefore, for example, the general text of the page cannot be made with non-standard fonts! A good designer would 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 font.
But how to distinguish the fonts of the first group from the second? It is clear that you cannot rely on a set of fonts installed directly on your computer! Let's figure it out.
Standard fonts
Standard fonts are a set of fonts installed with the operating system. Since operating systems are different, they also 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 Mac OS fonts on the page Fonts supplied with Mac OS. As for Unix/Linux operating systems, they do not have a single set of fonts. Many Linux users use the DejaVu font set, in particular on Ubuntu they are installed by default. According to statistics from http://www.codestyle.org, 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 computer fonts from 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 to set several fonts in the CSS property, 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:
- The name of the font family of choice. For example "Times new Roman", "Arial" and others. Font family names containing spaces must be enclosed in quotation marks. 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.
- Generic (common) family. The specification defines the following generic families:
- serif - fonts with serifs at the ends;
- sans-serif - sans-serif fonts;
- cursive - italic fonts;
- fantasy — decorative fonts;
- monospace - monospace font (with letters of the same width).
Thus, a standard font from OS Windows is taken for design, a similar one for Mac OS and Unix / Linux is selected for it, a common font family is set and you're done.
But not everything is so simple. Let's dig in more detail.
In Search of Web-Safe Fonts
On the Internet, there has historically been such a thing as "safe" Web fonts. A safe font is a font that is standard across all operating systems. Since such a state of affairs can only be dreamed of, then Absolutely safe fonts do not exist!
Some fonts can be called safe with some reservations.
The basis for the definition of "safe" fonts was 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.
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 the Cyrillic alphabet, which is important for Runet.
The set of fonts included in the standard delivery of Mac OS X (this OS is the most common among Mac OS users) includes all fonts from the Core fonts for the Web set.
Thus, based on the Windows fonts used in other operating systems, 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
The Webdings font contains a set of icons and therefore cannot be used for content. Andale Mono is not widely used because it is not suitable for everyday screen reading and not all Windows users have it.
Every Windows user, Mac OS X user, and the vast majority of Unix/Linux users (that is, those who have installed the Core fonts for the Web package) have all these fonts.
But what about the rest? After all, I want the designer’s idea to be seen by as many users as possible!
Read about it in the second part of the publication.
Starting to typeset the layout, it is necessary, in particular, to specify in CSS the fonts used on the page. Often, the designer uses different fonts to type not only the main text of the page, but also various headings, logos, and monograms.
A good designer, like a good layout designer, 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 roughly divided into two categories:
- Fonts that will be displayed without problems for the vast majority of users.
- Fonts that a sufficiently large group of users do not have.
If a designer has used 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 text with an image. The disadvantage of using 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 dimensions of the new image do not match the old one).
We can say that the danger of using the technique directly depends on the probability of changing the text. Therefore, for example, the general text of the page cannot be made with non-standard fonts! A good designer would 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 font.
But how to distinguish the fonts of the first group from the second? It is clear that you cannot rely on a set of fonts installed directly on your computer! Let's figure it out.
Standard fonts
Standard fonts are a set of fonts installed with the operating system. Since operating systems are different, they also 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 Mac OS fonts on the page Fonts supplied with Mac OS. As for Unix/Linux operating systems, they do not have a single set of fonts. Many Linux users use the DejaVu font set, in particular on Ubuntu they are installed by default. According to statistics from http://www.codestyle.org, 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 computer the fonts of 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 on any operating system, it is possible to set several fonts separated by commas in the font-family CSS property.
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:
- The name of the font family of choice. For example "Times new Roman", "Arial" and others. Font family names containing spaces must be enclosed in quotation marks. 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.
- Generic (common) family. The specification defines the following generic families:
- serif - fonts with serifs at the ends;
- sans-serif - sans-serif fonts;
- cursive - italic fonts;
- fantasy - decorative fonts;
- monospace - monospace font (with letters of the same width).
Generic family names are keywords and do not need to be enclosed in quotation marks.
Thus, a standard font from OS Windows is taken for design, a similar one for Mac OS and Unix / Linux is selected for it, a common font family is set and you're done.
But not everything is so simple. Let's dig in more detail.
In Search of Web-Safe Fonts
On the Internet, there has historically been such a thing as "safe" Web fonts. A safe font is a font that is standard across all operating systems. Since this state of affairs can only be dreamed of, absolutely safe fonts do not exist!
Some fonts can be called safe with some reservations.
The basis for the definition of "safe" fonts was 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.
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 the Cyrillic alphabet, which is important for Runet.
The set of fonts included in the standard delivery of Mac OS X (this OS is the most common among Mac OS users) includes all fonts from the Core fonts for the Web set.
Thus, based on the Windows fonts used in other operating systems, 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
The Webdings font contains a set of icons and therefore cannot be used for content. Andale Mono is not widely used because it is not suitable for everyday screen reading and not all Windows users have it.
Every Windows user, Mac OS X user, and the vast majority of Unix/Linux users (that is, those who have installed the Core fonts for the Web package) have all these fonts.
But what about the rest? After all, I want the designer’s idea to be seen by as many users as possible!
Fonts supporting Cyrillic
A specific feature of the Runet is the problem with page encodings and Cyrillic support in fonts. To avoid problems with a variety of character encodings, smart people came up with Unicode, which allows you to combine characters from several languages \u200b\u200bin one font. Thus, for Russian-language pages, you need to use only Unicode fonts that support Cyrillic.
Below is a font mapping table.
| Windows | MacOS | Unix/Linux | generic family |
|---|---|---|---|
| Arial Black | Helvetica CY | Nimbus Sans L | sans serif |
| Arial | Helvetica CY | Nimbus Sans L | sans serif |
| Comic Sans MS | Monaco CY | * (see below) | cursive |
| Courier New | * (see below) | Nimbus Mono L | Monospace |
| Georgia | * (see below) | Century Schoolbook L | Serif |
| Impact | Charcoal CY | * (see below) | sans serif |
| Times New Roman | Times CY | Nimbus Roman No9L | Serif |
| Trebuchet MS | Helvetica CY | * (see below) | sans serif |
| Verdana | Geneva CY | DejaVu Sans | sans serif |
* in the column opposite the font means that the operating system does not have native Cyrillic Windows equivalents of the font. But at the same time, there is a high probability that this 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 table and write the line corresponding to it in CSS:
body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
body ( font - family : Arial , "Helvetica CY" , "Nimbus Sans L" , sans - serif ; |
This entry means that if the user has the Arial font (and all Windows users and all Mac OS X users have it), then the page will be displayed in this font. If the user does not have this font, then the page of the Russian-speaking user of Mac OS 9 will be accurately displayed in the standard Helvetica CY system font, and the Unix/Linux user will be displayed in the Nimbus Sans L font, which is installed in 90% of Unix/Linux users. If the Unix/Linux user belongs to the 10% that don't have this font, then the page will be rendered in the serif font set by default for Web browsing.
In addition to the fact that Unix / Linux fonts are taken into account in the table, there is some strange CY icon after the usual Helvetica. Let's figure out what it is!
Prior to the release of Mac OS X, this ruler had the following meaning: for Windows users, the Arial page is displayed, for Mac OS 9 users, the standard Helvetica font, and the rest see the page with the default system sans-serif font in the browser. But again, an important nuance! The standard Mac OS 9 font Helvetica does not have Cyrillic! For the Russian-language page, this meant the following: for Windows users, we display the Arial page, for Mac OS 9 users, in the standard Helvetica font, which displays unreadable information, and the rest see the page with the system sans-serif font configured by default in the browser.
For the correct display of this set for Mac OS 9 users, instead of non-cyrillicized Helvetica, it makes sense to specify the same Helvetica CY font, standard for Mac OS 9, containing Cyrillic.
The reading of rulers has changed since the release of Mac OS X. Windows/Mac OS X now has one common standard font. And if we want Mac OS 9 users to be able to see the designer's idea, they need to register a font containing Cyrillic in the font line.
So while there are no safe fonts, there are safe font lines. They are also called CSS font stacks. In addition to standard Windows/Mac OS X fonts, these lines can also include equivalent fonts from the standard set of Mac OS 9 (which does not contain "safe" fonts by default) and common Unix/Linux fonts.
Any layout designer 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 the Tahoma font on their layouts, which is not included in this list. A properly constructed line of fonts 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 on the "safe" list but can be used in layouts.
| Windows | MacOS | generic family |
|---|---|---|
| Lucida Console | Monaco | Monospace |
| Lucida Sans Unicode | Lucida Grande | sans serif |
| Tahoma | Geneva CY | sans serif |
And if without Cyrillic?
For English-language texts, the above tables have a slightly different look.
| Windows | MacOS | Unix/Linux | generic family |
|---|---|---|---|
| Arial Black | Gadget | Nimbus Sans L | sans serif |
| Arial | Helvetica | Nimbus Sans L | sans serif |
| Comic Sans MS | Monaco | TSCu_Comic | cursive |
| Courier New | Courier | Nimbus Mono L | Monospace |
| Georgia | * (see below) | Century Schoolbook L | Serif |
| Impact | Charcoal | Rekha | sans serif |
| Times New Roman | Times | Nimbus Roman No9L | Serif |
| Trebuchet MS | Helvetica | Garuda | sans serif |
| Verdana | Geneva | DejaVu Sans | sans serif |
For Arial, Courier New and Times New Roman fonts, when composing rulers, it is better to specify the font for Unix/Linux first, and then for Mac OS. This is due to some curvature of the Linux X11 core fonts set.
Fonts that are not on the "safe" list but can be used in layouts are best defined with CSS font stacks based on this table.
| Windows | MacOS | Unix/Linux | generic family |
|---|---|---|---|
| Lucida Console | Monaco | - | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | sans serif |
| Palatino Linotype | Palatino | Garuda** | sans serif |
| Tahoma | Geneva | Kalimati | sans serif |
A dash in the Unix/Linux box indicates that users of these operating systems are likely to see the page's font set to display pages by default.
** In this line, it makes sense to put the Garuda font before Palatino (see the explanation above).
Conclusions:
- There are no absolutely safe fonts. The following fonts can be called conditionally safe:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Safe CSS stacks that take into account Cyrillic support in fonts can be found in the article.
- If Cyrillic support is not important on the page, we use CSS stacks from the article.
Fonts are an integral and very important part of website design, emphasizing its individuality. The article will talk about connecting standard fonts to a web page, they are also called system fonts, and in the next article we will take a closer look at choosing and connecting fonts from Google Fonts to a WordPress site.
System, standard, safe fonts
Any browser displays only those fonts that are present in the operating system of the computer. Therefore, they are called system and are installed by default along with the operating system.
And they are called safe fonts, because with a high probability they will be displayed in the browser of most site visitors.
But the whole problem lies in the fact that different sets of fonts are installed on different operating systems. You can view the sets of supplied fonts along with the operating system on the official pages of Windows, Mac OS. And in Unix/Linux there is no standard set at all.
In order for the web page to be displayed in accordance with the designer's idea, a font property called font-family was set in CSS.
font-family font property
The font-family property — font families grouped according to certain characteristics.
Generic families:
- serif - fonts with serifs at the ends;
- sans-serif - sans-serif fonts;
- cursive - italic fonts;
- fantasy - decorative fonts;
- monospace - monospace font (with letters of the same width).
Thus, similar fonts from different operating systems are simply selected and connected to the web page separated by commas.
Here is an example, just for visual perception. We will return to this example when we consider directly connecting fonts.
Just follow the logic and everything will become very clear.
Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
Let's take a look at what was written:
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- The generic family is sans-serif.
So-called safe fonts
Based on OC Windows, a list of several safe fonts was compiled.
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
All of these fonts are installed on Mac OS X, Windows, and many Unix/Linux users who have the Core fonts for the Web package installed.
For other users, a correspondence table is provided. It picks up similar fonts belonging to a particular family.
Correspondence table and belonging of fonts to a particular family:
| Windows | MacOS | Unix/Linux | generic family |
|---|---|---|---|
| Arial Black | Helvetica CY | Nimbus Sans L | sans serif |
| Arial | Helvetica CY | Nimbus Sans L | sans serif |
| Comic Sans MS | Monaco CY | * (see below) | cursive |
| Courier New | * (see below) | Nimbus Mono L | Monospace |
| Georgia | * (see below) | Century Schoolbook L | Serif |
| Impact | Charcoal CY | * (see below) | sans serif |
| Times New Roman | Times CY | Nimbus Roman No9L | Serif |
| Trebuchet MS | Helvetica CY | * (see below) | sans serif |
| Verdana | Geneva CY | DejaVu Sans | sans serif |
* When connecting fonts, you can safely rely on it. The table supports Cyrillic characters, Russian alphabet.
I took the table itself in this article.
Connecting system fonts to the site
There are several ways to connect system fonts to a site. In addition, you can connect different fonts to different paragraphs. Apply different fonts to individual words and phrases. All this I will now try to consider.
So let's get it right.
Including Fonts in a CSS File
If you need to connect the main font for the entire document, you just need to add the following code to the style sheet:
Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect the font to the entire document */ font-size: 16px; /* additionally set the font size */ font-weight: 400; /* set the boldness of the font, or instead of 400, set the value to - normal */ )
Assign a font for headings H1, H2, H3, H4, H5, H6, (here it is similar, only we set the boldness value to highlight the headings):
H1,h2,h3,h4,h5,h6( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect font to headings */ font-weight: 600; /* set boldness of the font, or instead of 600, set the value - bold */ )
Assign font to paragraphs only:
P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect the font to paragraphs, can be applied to li lists, divs, forms and other elements */ font-weight: normal; /* set the boldness of the font, or instead of 600, set the value to - bold */ font-size: 16px; /* additionally set the font size for paragraphs */ )
To assign a font to a specific paragraph only, or block, you must first assign a class to this block in the HTML document
Here is a paragraph with an assignable font
And in the CSS table write the following code:
Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect the font to certain paragraphs, can be applied to individual lis, divs, form and other elements */ font- weight: normal; /* set the weight of the font, or instead of 600, set the value - bold */ font-size: 16px; /* additionally set the font size for paragraphs */ )
Now, each html element tag with the .font class (call it whatever you like) will be assigned the Arial font, normal (400), bold, and 16px in size.
Similarly, you can assign different fonts to li lists, table tables, to entire div blocks, to individual words, or phrases.
Connecting fonts in an HTML document
Directly in an HTML document, fonts are connected in the same way as a CSS file, the difference is only in the syntax. You can include fonts in the title of the document - between tags
(similar to a CSS file), or inline - assigning properties directly to html tags.Adding fonts to the header, between tags
. To do this, add the following code to the html document:
Here I will not repeat myself. Everything is similar to connecting in a CSS file.
Connecting fonts inline, directly to site elements. Here are some examples:
Connecting the font to the paragraph
Here is a paragraph with text
Highlight a single word in bold and assign a font separate from the main one
Here is a paragraph with text, and this word to be highlighted in bold
Here is the link
Similarly, we assign fonts to any html tag.
But it's still best and recommended to style elements through a CSS file. First, in CSS, you need to write styles only once and then assign only the desired class in HTML. Secondly, writing inline styles creates duplicate content. These properties and classes seem to be indexed by search engines and I heard that the W3C wants to cancel inline altogether. Although sometimes it's easier to write styles this way.
All. Follow the site updates, I am preparing an article on connecting non-standard and original fonts to the site so that they are displayed correctly in all browsers. I will also introduce you to several good services where you can choose non-standard fonts.
