On Web font family

Time:2020-12-1

preface

Recently, we have studied the font family font settings of major websites, and found that the default values of each website are different, and even some large websites have made obvious mistakes, which shows that the font is still a great knowledge, and we should study it carefully.

The default fonts embedded in different operating systems and browsers are different. The wrong font setting will lead to the confusion of page rendering in different environments. Choosing a suitable font is the first step to create an excellent web page. Through this article, we will introduce the knowledge of fonts and explore how to set fonts correctly on both sides of PC and mobile.

Font Basics

Classification of fonts

  • Serif (serif)
  • Sans serif (sans serif)
  • Monospace (equal width)
  • Fantasy
  • Cuisive (grass)

These are not a single font, but a font family. They are a collection of a series of fonts. The serif fonts and sans serif fonts are the most frequently contacted.

Serif (serif) & sans serif (sans serif)

Serif means that there is extra decoration at the beginning and end of the stroke, and the thickness of the strokes varies. Serif font style is more prominent, common serif fonts areTimes New RomanSong style

Sans serif fonts do not have these extra decorations. The strokes are roughly the same in thickness. They are elegant and straight. The common sans serif fonts areTahomaVerdanaArialHelveticaPingfangMicrosoft YaHei wait.

On Web font family

Monospace (full width font)

The uniform width font refers to the font with the same character width, which is usually used in the code block of editors and technical articles. The equal width font is mainly for the Western font, but it is the same width for every Chinese man. The courier is the most common uniform width font.

Fantasy & cuisive

The scene used in the browser is not much, not much introduction.

Font family property

Set the font of the element. Multiple fonts can be specified at the same time. If the browser does not support the first font, the next one will be tried. You can set the font or font family.

For example: font family: Arial, sans serif;

If the font family is not set, the browser default font will be used. If the font family set is invalid, the default font will be fallback to the browser.

Introduction to common fonts

Helvetica

Apple system supports a Western sans serif font, which is the most commonly used set of Western Fonts in Apple ecology.Helvetica NeueyesHelveticaFont improved version, adding more font shapes with different thickness and width.

Arial

It is designed to compete with helvetica. Its form is similar to that of helvetica. It is supported by browsers in different systems and has good compatibility.

Tahoma

A sans serif font with small spacing, which is supported by browsers of different systems and has good compatibility. It can solve the shortcomings of Helvetica and Arial, such as the difficulty of distinguishing upper case I from lower case L.

San Francisco

Apple launched a sans serif font in 2017, which is also the default Western font of Apple systemHelveticatypeface,San FranciscoThe font style is more concise, reduces some decoration details, and supports the overall center of symbols, such as time display, previousHelveticaThe colon of is not centered.

Minimum compatible version: IOS 9, Mac OS 10.11

Pingfang SC

Apple created a Chinese sans serif font for Chinese users in 2017 andSan FranciscoTogether, SC stands for simplified Chinese, while Taiwan traditional and Hong Kong Traditional are also included. The overall shape is simple and beautiful, which is the default Chinese font of Apple system.

Minimum compatible version: IOS 9, Mac OS 10.11

Hiragino sans GB, Heiti SC

In order to be compatible with the old MacOS system, we usually use them as the fallback of Apple fonts.

Segoe UI

A sans serif font in Windows system is also the default Western Font in Windows system.

Microsoft YaHei

The default Chinese font of windows system is also a set of sans serif font. Most browsers on Mac OS are pre installed with Microsoft YaHei, but Safari browser is not included.

IOS and Android systems do not support Microsoft YaHei, so you can ignore Microsoft YaHei when setting mobile font.

Song style

A Chinese serif font, supported by both windows and MacOS, is thin and has obvious style.

Song typeface is also the default Chinese font for Windows XP and earlier systems.

WenQuanYi micro Hei

The default Chinese font in Linux system is set to be compatible with Linux system.

Roboto

Android system default Western font, is also a sans serif font

Noto sans

Android system default Chinese sans serif font, an open source font launched by Google.

Apple Color Emoji

The text expression of Apple products can be seen everywhere in MAC and IOS systems, and it is also the Emoji expression that we contact most.

Segoe UI Emoji

The Emoji expression in Windows 10 system, black stroke style, no apple mellow and texture.

Noto Color Emoji

Google’s expression, similar to Apple’s, is flatter.

Browser default font

The default font is divided into system default font and browser default font, which are different.

Here we are talking about the browser default font. The system default font will be in the followingsystem-uiIt is introduced in.

When the element does not specify a font family or the set font family is invalid, it will fallback to the browser default font.

PC terminal

PC browser supports setting different default fonts.

The following figure shows the configuration options for chrome. The standard font is the default font. When the font family property is not set, this font will be enabled.

On Web font family
Because Arial is a Western font, which is invalid for Chinese, the browser will choose the appropriate Chinese font, which is generally Microsoft YaHei on windows and Pingfang on MacOS. However, some browsers will choose a similar Chinese font according to the style of the default font. Arial is a sans serif font. Browsers will also choose a sans serif font to adapt to Chinese. If the default font is a serif font, the browser will choose a serif Chinese font. In order to smooth this difference, we usually set it at the end of the font familysans-serifSpecifies the sans serif font as the base of the pocket.

Mobile terminal

Mobile browsers generally do not support specifying the default font.

The default Chinese font of IOS is Ping Fang, when Lang is set tozh-CNWestern language is also Pingfang. When Lang is not set or set toenThe default font isTimes New Roman, a serif font.

<!DOCTYPE html>
<html lang='zh-CN'>
...

Android’s font is a little more complex, its default font isWestern: roboto, Chinese: Noto sansHowever, different manufacturers may use custom fonts. For example, some of Xiaomi’s mobile phones use Xiaomi Lanting.

Android end Lang is set tozh-CNorenAlthough they are sans serif fonts, the differences are obvious. Even if Lang is set tozh-CNThe performance of default Western fonts on different Android computers may also be different. One word describes chaos.

The mobile system version mentioned above: IOS 9 + Android 4+

It is precisely because of the complexity of the default font of the browser that the importance of setting the font family.

system-ui

system-uiIt selects the default system font under the current operating system. It has the advantage of matching with the font used in the current system. It can make the style of web page and app look more uniform.

How to use it
font-family: system-ui;
compatibility

system-uiIt was launched late, but it has good compatibility. At present, mainstream browsers have already supported it.

Here is the picture belowCan I UseCompatibility information for statistics on
On Web font family

-apple-system
-apple-systemyessystem-uiIt is only supported in Safari, Firefox and WebView on IOS and Mac OS.

BlinkMacSystemFont
So is itsystem-uiThe compatible writing method is only supported under Mac OS chrome, mainly for the version 53-55 of chrome

effect

On IOS and MacOS,system-uiThe Chinese font pointed to is Pingfang, and the Western font isSan Francisco。 In Android system, the Chinese font is usually Noto sans (Siyuan BOLD), and the Western font is roboto. Generally speaking, it is Microsoft YaHei on Windows system, but the fonts on some windows systems will appearproblemSystem UI is not recommended on windows.

Sans serif (sans serif)

In the current mainstream terminal equipment, sans serif is easier to read than serif, and sans serif is more suitable as the default global font setting of web pages.

Every system will have sans serif fonts, sosans-serifIt’s usually placed at the end of the bag,sans-serifNone of the later fonts will work except forEmojitypeface.

PC browser can be specified in the settingssans-seriftypeface.
On Web font family

Mobile browser cannot be specified in settingssans-serifFonts, they will be based onlangSelect the appropriate font for the specified locale, andsystem-uiThe specified font is not necessarily the same.

Writing font rules

Before introducing the font rules, there are several points to note:

1. Different platforms have different preset fonts. such asHelveticaHeping is only built into Apple system, and Microsoft YaHei is only built into windows system (because many people install Office, Microsoft YaHei font will appear on MACS). The fonts built in Android and IOS are different.

2. Fonts are copyrighted, but if you do not refer to an external font file (such as web font or embedded in the app), and you just specify the font name in CSS, you do not need to purchase authorization, because it is just a statement that the browser is expected to use a certain font to render text first.

3. The Chinese website involves two types of characters: Western Font and Chinese font. The Western font includes English numbers, excluding Chinese, but Chinese font generally includes English and numbers. We usually set the Western Font first and then set the Chinese font.

4. If the font contains spaces or Chinese, you need to add quotation marks.

5. Most full names of fonts contain specific attributes such as font thickness, italics, and condensed. However, it is not recommended to use them directly. The style of fonts should be specified in CSS through attributes such as font weight, font style, and font stretch, and the actual rendered fonts are determined by the browser.

6. Font family is an inheritable attribute. The global font family is generally set on the body element.

We can summarize the general rules of font definition as follows:

1. Western language comes first, Chinese comes after

Most Chinese fonts contain western language, but the part of western language is not good-looking, and western language does not contain Chinese. Usually, western language is defined first, and then Chinese is defined to achieve better display effect.

2. System UI is preferred

system-uiUsing the default font of the current system, the style of web page and operating system is unified, and the experience is better.

3. Consider different operating systems

When choosing fonts, you should consider different operating systems and users of older operating systems.

Even if the same font will be slightly different under different operations, we should try our best to use the same font in the same system to ensure the consistency of fonts under the same system. For different systems, try to ensure that the font style is similar, such as using sans serif font.

In order to ensure the use of more elegant Chinese fonts in Apple system, priority should be given to Apple font. For the lower version of MacOS that does not support Apple side, useHiragino sans GB (Holly black)The font is the bottom.

If you need to be compatible with Linux systems, you need to addWenQuanYi micro Heitypeface.

If you need to be compatible with emoticons from different platforms, thesans-serifAdd after"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Etc.

4. Ends with a serif or sans serif font family

In order to ensure normal display in various environments or conditions, we willsans-serifPlaced behind the font, the non serif font displays better in the display.

5. Simple and practical

Font setting is not the more the better, in the case of meeting the design requirements, try to be concise. Under the same system, Chinese and Western fonts have a fallback, which does not need too much.

Font settings

Through the introduction of font knowledge points and font setting specifications, we summarize the setting method of global default font.

Mobile terminal

Compatible versions: ios9 +, Android 4+

Recommended writing method:

font-family: system-ui, -apple-system, Arial, sans-serif;

Interpretation: prioritysystem-ui, usingArialThe fallback of the Western font is made because it andHelveticaThe font is similar and has good support in IOS and Android.

PC terminal

Recommended writing method 1:
MacOS gives priority to system fonts

font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

2
Specify font

font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

The resolution of Windows computer screen is generally not high,TahomaIn small font size, the font structure is clear and complete, easy to read and identify, and has good support in different operating systems. Therefore, as the preferred font, if the system is not pre installedTahoma, then useArialAs an alternative. But there is little difference between them,ArialIt’s OK to advance the priority.

Need to be compatible with Linux system and emoticons, you can addWenQuanYi Micro HeiandEmojiFont, such as:

font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

To highlight the font features of MacOS and windows, you canTahomaFront settingHelveticaorSegoe UIIs the preferred font, such as:

font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

be careful:

1. There is no fixed standard for font setting, which needs to be determined according to the business situation. The above is only the recommended writing method. If the designer requires, it can be changed on this basis.

2. CSS’sfont-familyThe weight is higher than the default font of the browser. Some websites choose not to set the font family and use the default font of the browser, which tends to be the user’s choice. This is different from one another.

Specifies the element font

When an element is set tofont-faimilyAfter that, the global default font is invalid for this element. In this case, you should also consider the issue of font compatibility. It is best to specify a fallback font and end with sans serif.

div {
    font-faimiy: "PingFang SC", sans-serif;
}

Comments on font family of major websites

First of all, the following is my personal opinion. If there is any mistake, please point it out

When the following data are taken:2020-11-25

Taobao Homepage
tahoma,arial,'Hiragino Sans GB',b8bf53,sans-serif

\5b8b\4f53For the Song Dynasty Unicode code, this can effectively avoid the browser to interpret CSS code when the problem of garbled code.
The default font of Taobao home page is very simple, but the Chinese font used on MacOS is sans serif, while the font used on windows is serif font Song typeface. The differences between the two systems are obvious.

Jingdong Homepage
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"B8BF53",sans-serif

JD home page uses Microsoft YaHei as the preferred font, so both Chinese and English will be Microsoft YaHei. In MacOS Safari, the default is that Microsoft YaHei is not supported, so it will fall backHeiti SC (BOLD)As the default Chinese font in earlier versions of MacOS, boldface has been criticized for its bell mouth design for a long time. Of course, there must be their consideration for the setting of Jingdong, but the Chinese font should be placed in thetahomaarialIt is not recommended before the Western Script, unless required by the designer or business.

Tmall Homepage
"Microsoft YaHei",SimSun,'b8bf53',sans-serif

SimSun: also in song style

The default font setting of tmall home page is similar to that of jd.com. Microsoft YaHei is preferred in both Chinese and English. As mentioned above, MacOS Safari does not support Microsoft YaHei by default, so it will fallback to Song typeface. Song typeface is serif font, which makes the fonts of other MacOS browsers and safari browsers differ greatly.

The following figure shows the effects of chrome and safari under Mac OS 10.14.5
On Web font family On Web font family

Tencent Homepage
'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif

Tencent’s homepage also uses Microsoft YaHei as the preferred font for Chinese and Western languages, and there are corresponding fallbacks on different systems. It is good in theory, but as mentioned above, it is not recommended to start with Chinese font unless the designer or business needs it.

Sina Weibo
Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif

The default font of sina Weibo is very good.

Home page of nuggets
-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial

The Nuggets made a very obvious mistake heresans-serifAfter the definition of other Chinese and English fonts, becausesans-serifThe Chinese and English fonts defined after are invalid. As a place where the great gods gather, it’s not right to make such a low-level mistake.

Segmentfault home page
-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif

I think it’s very good personally.

Zhihu Homepage
-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif

Source Han Sans SCNoto Sans CJK SCThese two fonts are both Siyuan bold. Although they are open source fonts, they are not built-in in in most systems. Is it unnecessary to set them here?

Front page of headlines
PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif

As mentioned above,Helvetica Neue,ArialWestern Fonts are suggested to be put in front.

I would like to reiterate that the above is only my personal experience. If there is any mistake, please point it out

Reference link

Further exploration of Web font family

Font family you should know

Font, and font family

How to choose font family elegantly

Starting from web font — default font style setting

Pingfang SC should not be used as the preferred font for mobile web pages

Introduction and use of IOS 9 font