Standard fonts for word. Standard font stack
Choice standard font, used by a particular operating system, may improve performance. This applies to any safe for the internet» font. The benefit of “system” fonts is that they match those that the operating system already uses, so the user will be comfortable reading the text.
Classification of system fonts:
OS | Version | System font |
Mac OS X | El Capitan | San Francisco |
Mac OS X | Yosemite | Helvetica Neue |
Mac OS X | Mavericks | Lucida Grande |
Windows | Vista | Segoe UI |
Windows | XP | Tahoma |
Windows | 3.1 to ME | Microsoft Sans Serif |
Android | Ice Cream Sandwich (4.0)+ | Roboto |
Android | Cupcake (1.5) to Honeycomb (3.2.6) | Droid Sans |
Ubuntu | All versions | Ubuntu |
Let's move on to the code
The introduction shows that with the advent of new versions of operating systems come new fonts, and with them the need for updating standard fonts for the site.
Method 1: System Fonts at the Element Level
Chrome and Safari recently introduced " system-ui" is a universal font family that can be used instead of " -apple-system" And " BlinkMacSystemFont". One method of using system fonts is to call them directly on an element using the font-family property.
GitHub uses this method on their site by using system fonts in the body:
/* System fonts are used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )
Both Medium and WordPress admin use a similar approach. Most supported is Oxygen Sans ( created for the GNU+Linux operating system) and Cantarell (created for the GNOME operating system).
This example also demonstrates support for some types of emoticons and symbols:
/* System fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )
Note: This method can only be used for font family CSS standard fonts instead of the shorter font.
Method 2: System Font Stacks
The limitation of the first method is that it needs to call the full font stack every time it is applied to an element. And this can bloat the code, depending on where and how it is used.
An alternative method where system fonts are declared using the @font-face property. The advantage of this is that you can declare fonts once and then apply them with the font-family property instead of a long list of fonts each time.
Standard fonts on a site are those fonts that are installed by default on the computer of the user viewing the site.Any browser by default does not download or install fonts from third-party resources. This is why the problem of “non-standard” fonts often arises. Let's say a webmaster decided to make some beautiful font on the site, specified it in the code, but most site users do not have this font installed in their operating system.
The browser, of course, will try to replace this font with one of those installed, but the site will not be displayed at all as it was originally intended. Of course, there are technologies that allow you to bypass this limitation, but it is better to do this in extreme cases, when you simply cannot do without third-party fonts.
So, what is this “standard set” of fonts? Below is a list of pre-installed operating system fonts (fonts recommended for use on websites are highlighted):
Font name | Windows 2000 | Windows XP | Vista | Windows 7 | Win 8 |
Arial | + | + | + | + | + |
Arial Black | + | + | + | + | + |
Book Antiqua | + | ||||
Calibri | + | + | + | ||
Cambria | + | + | + | ||
Candara | + | + | + | ||
Comic Sans MS | + | + | + | + | + |
Consolas | + | + | + | ||
Constantia | + | + | + | ||
Corbel | + | + | + | ||
Courier | + | + | + | + | + |
Courier New | + | + | + | + | + |
Estrangelo Edessa | + | + | + | + | |
Franklin Gothic Medium | + | + | + | + | |
Gautami | + | + | + | + | |
Gabriola | + | + | |||
Georgia | + | + | + | + | + |
Georgia Italic Impact | + | ||||
Impact | + | + | + | + | + |
Latha | + | + | + | + | |
Lucida Console | + | + | + | + | + |
Lucida Sans Console | + | + | + | + | |
Lucida Sans Unicode | + | + | + | + | + |
Marlett | + | + | + | + | + |
Modern | + | + | |||
Modern MS Sans Serif | + | ||||
MS Sans Serif | + | + | + | + | + |
MS Serif | + | + | + | + | + |
MV Boli | + | + | + | + | |
Nyala | + | + | + | ||
Palatino Linotype | + | + | + | + | + |
Roman | + | + | + | + | + |
Script | + | + | + | + | + |
Segoe Print | + | + | + | ||
Segoe Script | + | + | + | ||
Segoe UI | + | + | + | ||
Small Fonts | + | + | |||
Symbol | + | + | + | + | + |
Tahoma | + | + | + | + | + |
Tempus Sans ITC | + | ||||
Times New Roman | + | + | + | + | + |
Trebuchet MS | + | + | + | + | + |
Tunga | + | + | + | + | |
Verdana | + | + | + | + | + |
Webdings | + | + | + | + | + |
Westminster | + | ||||
Wingdings | + | + | + | + | + |
What standard fonts look like.
Windows Vista, Internet Explorer 7, ClearType enabled (click image to view full size)Windows Vista, Firefox 2.0, ClearType enabled (click image to view full size)
Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (click image to view full size)
Windows 2000, IE 6.0 (click on image to view full size)
This list contains fonts common to all current Windows operating systems (in fact, since Windows 98), and their equivalents in Mac OS. Such fonts are sometimes called "browser safe fonts" ( browser safe fonts). This is a small reference book that I use when I make Web pages and I think it will be useful to you too.If you are new to web design, you may be thinking something like: “Why should I be limited to such a small set of fonts? I have a huge collection of beautiful fonts!” The fact is that the visitor's browser can only display those fonts that are installed in his operating system ( approx. translator: Currently, it is already possible to use virtually any fonts when designing pages using CSS 3 and its new property @font-face; however, not all browsers yet support this function), which means that every 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
@font-family meaning | 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 come 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 by a standard font (although, for example, the Symbol font is displayed in Opera, and Webdings in Safari).
3 The Book Antiqua font 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 Safari in standard style, but do not 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 installed on Mac only with Classic installation
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)
Fonts are an integral and very important part of a website’s design, emphasizing its individuality. The article will talk about connecting standard fonts to a web page, they are also called system fonts.
System, standard, safe fonts
Any browser displays only those fonts that are present in the computer's operating system. That's why they are called system ones and are installed by default along with the operating system.
And they are called safe fonts because they are likely to be displayed in the browser of most site visitors.
But the problem is that different operating systems have different sets of fonts installed. You can view the sets of supplied fonts along with the operating system on the official pages of Windows and Mac OS. And in Unix/Linux there is no standard set at all.
In order for the Internet page to be displayed in accordance with the designer’s idea, a font property called font-family was installed in CSS
font-family property
The font-family property is font families grouped by 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).
This way, similar fonts from different operating systems are simply selected and connected to the Internet page separated by commas.
Here's an example, just for visual perception. We will return to this example later when we consider directly connecting fonts.
Just follow the logic and everything will become crystal clear.
Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) Let's analyze what is written:
- OS Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Generic family - sans-serif.
So-called safe fonts
Based on OS Windows, a list of several safe fonts has been 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 contains similar fonts belonging to a specific family.
Table of correspondence and belonging of fonts to a specific family:
Windows | Mac OS | Unix/Linux | ancestral family |
---|---|---|---|
Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
Arial | Helvetica C.Y. | 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 C.Y. | * (see below) | Sans-serif |
Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
Trebuchet MS | Helvetica C.Y. | * (see below) | Sans-serif |
Verdana | Geneva C.Y. | DejaVu Sans | Sans-serif |
* When connecting fonts, you can safely rely on it. The table supports Cyrillic characters and the Russian alphabet.
Connecting system fonts to the site
If you need to connect main font for the entire document, you just need to add the following code to the CSS style sheet:
Body ( /* connect the font to the entire document */ font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* additionally set the font size */ font-size: 16px; /* set the boldness font, or instead of 400, set the value - normal */ font-weight: 400 )
And this is how system fonts are connected in Bootstrap 4 framework: Fonts are included with mobile devices in mind.
Body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; )
Assigning a font for headings
H1, H2, H3, H4, H5, H6 - here it’s the same, 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 the font to the headings */ font-weight: 600; /* set font weight, or instead of 600, set the value to bold */ )
We assign a font only to paragraphs:
p ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; ) Line by line it looks like this:- We connect the font to paragraphs, it can be applied to li lists, div blocks, forms and other elements;
- Set the font weight, or instead of 600, set the value to bold;
- Additionally, we set the font size for paragraphs.
To assign a font only to a specific paragraph, or block, you must first assign a class to this block in the HTML document:
Here is a paragraph with a plugin font
And in the CSS table write the following code:
Main-font ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; )
Now, each tag - an html element with a .font class (call it whatever you like) will be assigned an Arial font, with normal (400), boldness and a size of 16 pixels.
Similarly, you can assign different fonts to li lists, tables, entire div blocks, individual words, or phrases.
Connecting fonts directly in an HTML document
Fonts are included directly into an HTML document in the same way as a CSS file, the only difference is in the syntax. You can include fonts in the document header - between tags
(similar to a CSS file), or inline - assigning properties directly to html tags.Including fonts in the header, between tags
. To do this, add the following code to the html document:
Everything is similar to the connection in the CSS file.
Connecting fonts inline
Directly to site elements. Let me give you a few examples:
Connecting the font to the paragraph
Here is a paragraph with text
We highlight a separate word in bold and assign a separate font from the main oneHere is a paragraph with text, and this word, which should be highlighted in bold
We highlight the link in bold and assign a separate font from the main oneThis is simple text. Here the link is also simple text.
Similarly, we assign fonts to any html tag.
Note - System fonts in Bootstrap 4
The developers of the famous Framework Bootstrap 4 connect fonts in the following way so that almost any device can use its standard system fonts.
Body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )