After so much code, do you really understand fonts?

Preface

Among the code farmers around me, many are technical masters, but they are often troubled by simple things like fonts.

In this article, let's talk about common sense about fonts. The problems involved in these common senses are highly operable, and they are all encountered in actual business, and they need to be repeatedly communicated with developers, product managers, and designers.

Is the font really as simple as "System default, no way to explain"? Is the product being fooled? Or is the development perfunctory? Who will win the game between the two? Learn this article and you will win.

Font classification

Common fonts can be divided into two categories: serif and sans-serif.

1. serif (serif): There are additional decorations at the beginning and end of the strokes of the characters, and the strokes Thickness will vary.

Common serif fonts are:

•Arial, Italic•Times New Roman

2. Sans-serif (sans-serif): The thickness of the strokes is basically the same, leaving only the trunk. The shape is concise and powerful, and its origin is very late. Suitable for headlines, advertisements, etc., with high recognition.

Common sans serifs are:

•黑体•Windows platform default Chinese font: Microsoft Yahei•Windows platform default English font: Arial•Mac & iOS platform default Chinese font: Pingfang (PingFang SC)•Mac & iOS platform default English font: San Francisco•Android platform default font: Droid Sans

Supplement:

Serif fonts are rarely used nowadays, and the "Song typeface" you are familiar with can basically only be seen in paper publications. And sans-serif font is more in line with modern aesthetics.

So, here is a warm reminder to everyone: Don’t use Song typeface for PPT. If you don’t know what font to use, just use the default font of the system: Microsoft Yahei for Win platform, and Pingfang font for Mac platform.

If you find a designer who uses Arial when doing poster design or drawing, it means that she must be a layman.

Font family

The font family in CSS can be understood as a certain type of font. Common font families can be divided into five categories:

•serif: serif body. •sans-serif: sans serif. •monospace: Monospace font. Each letter occupies the same width. Use monospaced fonts as much as possible for code writing. •cursive: Handwritten font. For example, Xu Jinglei's handwriting. •fantasy: Fantasy font. For example, some artistic words.

These five types of font families do not represent a specific font, but when you specify a font family in CSS, the system may find a font in the font family to display.

Reference links:serif, sans-serif, monospace, cursive and fantasy^[1]

Multi-font fallback

The multi-font fallback mechanism can be understood as a kind of bottom-up mechanism for fonts. It means: when the specified font cannot be found, continue to look for it. for example:

.div { font-family: 'PingFang SC', 'Microsoft Yahei ', sans-serif;} 

The line above The meaning of the CSS code is: Let the text use Apple's "Pingfang" font on the iOS & Mac operating system, and use the Microsoft Yahei font on the Windows system. If neither of these two fonts are available, just find a sans-serif font to display.

font-weight: the bold attribute of the font

font-weight The bold attribute of the font is the most confusing attribute for front-end and product students. When you show the finished page to the product manager for experience, the first thing the product manager pays attention to is the bolding of the font.

Let's take a look at the attribute values ​​of font-weight first.

When setting whether the font is bold, the attribute value can be directly filled with numbers such as 100 to 900, or can be filled with words such as normal, bold. A value of normal is equivalent to 400 and a value of bold is equivalent to 700. as follows:

The key problem is that many people will find that in browsers on the Android platform, whether the font-weight is set to 300, 400, or 500, the thickness of the text will not change, and it will only be bold when it reaches 700 For a moment, it seems that the browser does not support these values, so is it useful to have so many gears?

Actually, all these numeric keywords are supported by the browser, the reason why you don't see any change in weight depends on whether the font you use supports it.

Take the font "Microsoft Yahei" as an example. It only supports two thicknesses, so when you write 500 in the code, it will also be considered as 400. But the "Ping Fang" font on Mac supports at least six weights.

Bold font effect of major platforms

A picture is worth a thousand words. After explaining so much, let's take a look at the default fonts of the major operating systems and what the bold effect looks like.

The following screenshots are all the results of my own testing. If you want to let others see the font bold effect, just throw the following picture to him. A caring front end like me is probably rare.

1. Default font bold effect of iOS platform: (Pingfang font)

2. Default font bold effect on Android platform (Huawei P30 Pro):(Droid Sans font)

3. Default font bold effect on Mac platform: (Pingfang font)

4. Default font bold effect on Windows platform: (Microsoft Yahei font)

Summary: (default font bold effect of major operating systems)

•Droid Sans font on Android platform, only >=700 will be bold; and the bold effect is the same. • Mac & iOS platform "Pingfang" font: 500 and 600, the bold effect is different; >=600 The coarse effect is the same. •Windows platform "Microsoft Yahei" font: only >=600 will be bold, and the bold effect is the same.

Most fonts are not free

What you need to know is: most of the fonts you know are not free. In other words, if you want to use a third-party paid font to engage in commercial activities, you must first pay for the authorization before you can use it normally. When you make a website for the company, it is a kind of commercial behavior.

There are free fonts (such as Siyuan HeiTi, Alibaba Puhui Ti, etc.), but the number is too small, and they are not universal enough, so we basically don’t use them when we make web pages.

So, Many companies will purchase a set of commercial font libraries, or even develop a set of fonts themselves, to avoid potential troubles and disputes in the future.

Illustrate a common scenario for you. In many cases, the visual drafts that front-end students get are psd drafts. In PS software, when we use the cursor to select a font, we wanted to see what font it uses, but the following scene appeared:

Seeing this FZLTZCHK font, don’t panic, check it online and find its Chinese name is< code >Founder LantingFont family. It is basically certain that this font is also charged.

At this point, the front-end students should immediately tell the product or designer that this font cannot be used for free, and beware of lawsuits.

In most cases, using the system default fonts for web pages is perfectly sufficient. If you really want to use special fonts, you must either develop your own fonts, or spend enough money to buy commercial fonts. For example, our JD company independently developed a set of commercial fonts JDZH, which are only used by JD company.

The last paragraph

Although the font is small, you can read the book.

In June 2005, Jobs, the founder of Apple, gave a speech at the graduation ceremony of Stanford University. He said something like this:

Reed College offered the best calligraphy program in the country at that time. Every poster in this university, every label on every drawer is full of beautiful calligraphy. After dropping out of school, I decided to learn how to write beautiful calligraphy.

At that time, I never thought that the design knowledge I had learned would be of any practical use. But ten years later, I incorporated those designs and ideas into a Mac computer, which also made this Mac the first computer with beautiful fonts.

And when the Windows system borrowed from the Mac, everyone felt that all computers should be like this.

At that time I couldn't connect these things, but, looking back ten years later, everything became suddenly clear.

References

[1] serif, sans-serif, monospace, cursive and fantasy: http://www.ayqy.net/ blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/