The author of this article @Qiangu Yihao.

preface

The coders around me, many of whom are technical geniuses, are often troubled by something as simple as fonts.

In this article, we will talk about common knowledge about fonts. The problems involved in these common sense have strong operability, which are really encountered in the actual business and need to be repeatedly communicated with the development students, product managers and designers.

Are fonts really just “system default, unexplained”? Is the product being cheated? Or is development perfunctory? Who wins the game between the two? Learn this text and you will win.

Classification of the font

Common typefaces can be divided into two types: serif and sans serif.

1. Serif: There is extra decoration at the beginning and end of the strokes, and the strokes are of different thickness.

Common serif bodies are:

  • Song Style, regular script

  • Times New Roman

2. Sans-serif: The strokes are basically of the same thickness, except for the backbone. The shape is concise and powerful, and the origin is very late. Suitable for headlines, advertisements, etc., high recognition.

Common sans serif bodies are:

  • blackbody
  • Default Chinese font for Windows: Microsoft Yahei
  • The default Font on Windows is Arial
  • Default Chinese font for Mac & iOS: PingFang SC
  • Default Font for Mac & iOS: San Francisco
  • The default font for Android is Droid Sans

Supplement:

Serifs are rarely used these days, and the familiar word “Song Style” is mostly found in print publications. The non-serif body is more modern.

Therefore, here is a warm reminder: do not use song Typeface PPT. If you don’t know what font to use, stick to the default fonts: Microsoft Yahei for Windows and Apple Font for Mac.

If you find a designer using Song style for a poster design or graphics, she’s a layman.

Font family

Font families 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 body.
  • Monospace: equal width font. Each letter takes up the same width. Write code in a monospaced font.
  • Cursive: handwritten type. For example, Xu Jinglei’s handwriting.
  • Fantasy: Like some artistic characters.

These five font families do not represent a specific font, but when you specify a font family in CSS, it is possible to find a font within the font family to display.

References: Serif, Sans-Serif, Monospace, Cursive and Fantasy

Multi-font fallback mechanism

Multi-font fallback mechanism: When the specified font is not found (or some text does not support this font), it will continue to look for later. Such as:

.div1{
    font-family: "PingFang SC"."Microsoft Yahei", monospace;
}

Copy the code

Render the text in the specified tag element in Apple font on Mac & iOS and Microsoft Yahei font on Windows. If neither font is available, use a font of equal width.

Note:

(1) When writing CSS code, font family does not need quotation marks.

(2) Some Mac users install software such as Office, which comes with Microsoft Yahei fonts. At this point, writing CSS in the order “Microsoft Yahei” with “PingFang SC” may cause some Mac users to display fonts in Microsoft Yahei. So beautiful apple square font, you have the heart to give up?

Font-weight: Bold property of a font

Font weight is the most confusing attribute for front end students. When you do a good web page to product manager acceptance, a web page opened, product manager first attention is the font bold problem, do you believe it? Here are some of the product managers’ common phrases that have made you hear voices:

  • “Why isn’t this font in bold?”

  • “Isn’t that a little thick?”

  • “Why is the text on the iPhone and Android different in thickness?”

To understand this confusion, let’s take a look at the attributes of font-weight.

Font-weight attribute: The value of this attribute can be 100 to 900, normal or bold. The value of normal is equal to 400, and the value of bold is equal to 700. As follows:

font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; font-weight: normal; Font weight: bold; // Equivalent to 700Copy the code

Here’s the big question. Font weight: 300, 400, 500

At this time, everyone began to make fun of Windows computers too bad, Windows browser too bad; At the same time, he would say how nice the Mac is and how it supports different font sizes.

In fact, all of these numeric keywords are supported by the browser, and the reason you don’t see any thickness changes is because the font you’re using doesn’t support them.

Microsoft Yahei, for example, only supports 400 and 700, so when you write 500 in code, it will be interpreted as 400. On the Mac, however, typefaces can be anywhere from 100 to 900.

For example, some time ago, Alibaba’s open source Pratt font also supports a variety of thick and thin fonts:

The default font bold effect for all platforms

A picture is worth a thousand words. With that explained, let’s take a look at what font bolding looks like on various platforms.

The following screenshots are my personal test results. If you want someone to see the results, just throw them to them. You don’t see a lot of good front-end guys like me.

1, Mac platform default font bold effect :(apple font)

2, Windows platform default font bold :(Microsoft yahei font)

3. Default font bold on iOS :(apple font)

4. Default font bold for Android (huawei P30 Pro) :(Droid Sans)

Summary :(the default font bold effect for all platforms)

  • For Mac and iOS, the “apple side” font is 500 and 600, and the bold effect is different. >=600 has the same effect in bold.

  • Windows “Microsoft Yahei” font: only >=600 will be bold, and the bold effect is the same.

  • On Android, the Droid Sans font is bold only when >=700; And the effect of bold is the same.

Most fonts are not free

One thing you need to know: Most of the fonts you see aren’t free. In other words, if you want to use a third-party font for business, you have to pay for it and get permission to use it. When you create a web page for your company, it’s a business.

Of course, there are free fonts, such as Siyuan Black font (an open source font jointly launched by Adobe and Google in July 2014), Alibaba Huizi, and so on. But these free fonts, we usually do not use the basic.

This is why many companies will buy a commercial font library or even develop their own fonts to avoid potential future disputes and troubles.

Give you a common scenario. Most of the time, the front-end students get the visual draft is PSD draft, and they need to open the source file with PS software to see what font the text inside is. In PHOTOSHOP, when we select a font with the cursor, the following scene appears:

When you see FZLTZCHK above, don’t panic, just go to Google and find that the full name of this font is Founder Lanting font series. Well, almost certainly, there is a charge for this font.

At this time, the front end students should immediately tell the product or designer not to use this font, because it is a commercial font, there is a charge, be careful of lawsuits. So what font should we use? And then we look down.

What font is commonly used on web pages

In most cases, using the system’s default font is sufficient for web pages. If you want to use a special font, you can only use a special font for Arabic numerals. Chinese and English, using the default font, is sufficient.

If you do want to use a special font, there are only a few ways:

  • Use open source free fonts (e.g. Siyuan Boldface, Alibaba Huizhi, etc.). But this kind of typeface, very few kinds, and not very good-looking. In web development, almost nobody uses it.

  • Purchase commercial fonts separately and obtain licenses.

  • Their own company to develop a font for their own people to use.

For example, JD Company I work for has independently developed a set of commercial fonts JDZH (only allowed for JD company, other companies are not allowed to use), supporting three kinds of thick and thin. As follows:

/** * JD bold, provide three types of word weight, please select font strictly according to the design draft */
 @font-face {
    font-family: 'JDZH-Light';
    src: url('xxx.com/data/ppms/others/JDZH_Light.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZH-Regular';
    src: url('xxx.com/data/ppms/others/JDZH_Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZH-Bold';
    src: url('xxx.com/data/ppms/others/JDZH_Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZhengHT-EN-Bold';
    src: url('xxx.com/data/ppms/others/JDZhengHei_01_Bold.ttf') format('truetype');
}

Copy the code

In order to use the JDZH font, the JD company does this when actually developing web pages:

  • Step 1: Introduce the font library code above into the public CSS file. This way, when the page loads, the user’s terminal will download the font library.

  • Font-family: ‘jdzh-regular ‘; font-family:’ jdzh-regular ‘; This code will take effect.

This JDZH, we usually only use Arabic numerals; Chinese and English, it is recommended to use the system default font.

The last paragraph

The so-called “micro knowledge”, a humble knowledge point, also has a lot of knowledge. Fonts alone are enough to become a discipline.

In his commencement address at Stanford University in 2005, Steve Jobs, the founder of Apple, said:

I never expected that what I learned would have any practical use in my life.

But ten years later, when we were designing the first Macintosh computer, it all flooded in. So I took those designs and put them into the Mac, which was the first computer with beautiful typography.

It is fair to say that if I had never dropped in on that single calligraphy class, the Mac would have never had typography and typography. When Windows borrowed from the Mac, it seemed that all computers should look like this.

I couldn’t connect the dots at the time, but it was all so clear looking back ten years later.

Recommended reading

  • Common Free fonts: Zenozeng.github. IO/free-chines…

  • How to select the font elegant, the font-family: segmentfault.com/a/119000000…

  • Iconfont: www.iconfont.cn/

  • Alibaba’s official release free commercial font: alibaba pratt &whitney body: mp.weixin.qq.com/s/daKUNnF_S…

  • Get | from oracle to get this model, make a person is: god mp.weixin.qq.com/s/ZnMxrhoH9…

If you think this article is valuable to you, please like it and pay attention to our official website and WecTeam. We have quality articles every week: