Font is one of the important elements in interface design. It can assist the transmission of information and is the external form of text. Font can also express emotional experience and shape brand image through its unique artistic charm.
This article summarizes the importance of font design, the recommendation of commonly used fonts for interfaces, and the selection and setting of font size, line height, and font weight in authoritative design systems at home and abroad. If you want to have a deeper understanding and application of interface font design, this article will provide some help.---
One, font
1. The importance of font design
Auxiliary information transmission
Text is the carrier of information content and a record Thoughts, ideas, and images or symbols that carry language, while fonts are the external form characteristics of words and the visual style of words. Appropriate fonts can assist text and convey information to users clearly and accurately.
Express emotional experience
The artistry of fonts is reflected in Its perfect external form and rich connotation. Before text information is delivered to users, people first feel the visual charm and emotional expression brought by fonts.
Building brand image
Different fonts have different Style characteristics: Some fonts are beautiful and fresh, with smooth lines; some fonts are regular and full of tension;
2. Recommended fonts for interface
The choice is determined by keywords of product attributes or brand characteristics. General Chinese fonts are divided into: Hei Ti, Song Ti, Fang Song, Kai Ti, etc.; English fonts are divided into: sans-serif, serif, italic, handwritten, black fonts, etc.
Chinese font recommendation
Online Chinese fonts are recommended to use Siyuan HeiTi, Huawen HeiTi, Holly HeiTi, Microsoft YaHei, Pingfang-Jian, HeiTi-Jian, Fangzheng LantingHei. Among them, the default Chinese font of the iOS system is "Pingfang (PingFang)", and the Chinese font of the Android system uses "Noto Sans CJK".
Introduce the font "Siyuan Heiti", which was jointly developed by Google and Adobe. Its style is between modern and traditional. It can be widely used in many ways, such as mobile phones, tablets, and desktops. user interface, web browsing, or e-book reading. It brings people a pleasant and efficient information reading experience, and it's free.
English font recommendation
Online English fonts are recommended to use San Francisco, Helvetica Neue, Roboto, Avenir Next, Open Sans. The default English font of the iOS system is "San Francisco", and the default English font of the Android system is "Roboto".
Helvetica is a widely used Western font, designed by a Swiss font designer in 1957, and Microsoft's commonly used Arial font also comes from it.
As a classic sans-serif font, Helvetica is very popular and successful in graphic design and business. It is considered a model of modernist design concept, and its simple and simple line style is very popular.
Recommended digital font
Recommended online digital fontDIN , Core Sans D, Helvetica Neue. DIN originated in Germany in 1995. It is a sans-serif font, easy to use and durable, and open. It is one of the favorite fonts for designers. It is suitable for displaying relatively long large numbers, but In the case of font size, the recognition degree is low. Core Sans D is a sans-serif font designed by a Korean designer. It supports Thin, Light, Regular, Medium, Bold and other types of font weights. It has a good display effect on large numbers, but it It is a paid font.
Helvetica Neue is an upgraded version of Helvetica in addition to the simplicity, neutrality, and no extra decoration introduced above. It has more font weights and can be used as a cross-platform digital font for iOS and Android .
2. Font size
1. About font size
Font size is another important element in interface design. The size of the font size determines the level and primary and secondary relationship of information. A reasonable and orderly font size setting can make the interface information clear and easy to read, with clear layers; on the contrary, bad and disorderly The use of a large font size will clutter the interface and affect the reading experience.
2. Choice of font size
The choice of font size can follow the font size rules in authoritative design systems at home and abroad such as iOS, Material Design, Ant Design, or you can define it yourself according to the characteristics of the product.
iOS font size rules
in iOS11 system In , use San Francisco as the system English font, including the text styles of the following font sizes:
11pt / 12pt Caption caption
13pt Footnote
15pt Subhead
16pt Callout Callout
17pt Body / Headline body / module title
20pt / 22pt / 28pt Title page title
34pt Large Title page title
It should be noted that the San Francisco font has two modes: text mode SF Pro Text and display mode SF Pro Display, the text mode is suitable for text with a font size smaller than 20pt, and the display mode is suitable for text with a font size greater than or equal to 20pt.
Material Design Font Size Rules
In Material In the Design design system, Roboto is used as the English font, and the following common font sizes for text layout are specified:
12sp small print hint
14sp (desktop 13sp) text/button text
16sp (Desktop 15sp) Subtitle
20sp Appbar Text
24sp headline
34sp / 45sp / 56sp / 112sp oversized text
For long text, it is recommended to have about 60 characters per line, and for short text, it is recommended to have about 30 characters per line.
Ant Design Font Size Rules
Inspired by the pentatonic scale and natural law, Ant Design defines 10 different font sizes, from small to large: 12px, 14px, 16px, 20px, 24px, 30px, 38px, 46px, 56px, 68px.
It is recommended that the main font size be 14px, and the choice of other font sizes can be freely defined according to the specific situation, try to control between 3-5 types, and maintain the principle of restraint.
Kiwi font size rules
Kiwi is Ele.me's mid-background design language, dedicated to creating Products that can "understand, gain insights, warm, and motivate users".
In Kiwi Web, the specified minimum font size is 12px, the main text font size is 14px, and the maximum font size is 46px.
3. Line height
1. About line height
The line height can be understood as an invisible box wrapped outside the font, and the distance between the font and the box The top and bottom gaps are half-spaced.
Referring to the W3C principle, the distance from the eyes to the screen is 25cm is the best reading distance.
The basic line height of Western text is usually about 1.2 times the font size. However, because Chinese characters are dense and of the same height, there is no upper and lower extensions of Western characters to create a gap between lines, so the general line height needs to be larger, according to the characteristics of different groups of people (children, young people, old people) and usage environment, it can reach 1.5 to 2 times or even larger.
2. Line height setting
iOS line height setting
The correspondence between Apple's official iOS font size and line height is as follows (@1x magnification):
| text type | font size (pt) | < span >line height (pt) |
|---|---|---|
| Caption | 11/12 | 13/16 |
| Footnote | 13 | 18 |
| Subhead | 15 | 20 |
| Callout | 16 | 21 |
| Body/Headline | 17 | 22 |
| Title | 20/22/28 | 25/28/34 |
| Large Title | 34 | 41 |
Fluent Design row height setting
Microsoft's official Fluent Design font size and line height are as follows (using the font Segoe UI):
| text type | font size (px) | < span >line height(px) |
|---|---|---|
| Caption | 12 | 14 |
| Body | < span >15 | 20 |
| Base | 15 | 20 |
| Subtitle | 20 | 24 |
| Title | 24 | 28 |
| Subheader | 34 | 40 |
| Header | 46 | 56 |
Ant Design line height setting
The correspondence between Ant Design font size and line height of Ant Financial is as follows (system default font is preferred):
| Font size (px) | 12 | 14 | 16 | 20 | 24 | 30 | 38 | 46 | 56 |
|---|---|---|---|---|---|---|---|---|---|
| line height (px) | 20 | 22 | 24 | 28 | 32 | 38 | 46< /td> | 54 | 64 |
Line height calculation formula: L = F + 8. Where L is the line height (Line Height), F is the font size (Font Size), F ≥ 12.
Fourth, word weight
1. About font weight
Word weight refers to the thickness of the font, generally Thin, Light, Regular, Medium, Bold marked after the font family name , Heavy etc. are heavy names. More and more product interfaces need to expand the information level through word weight. The current mainstream trend of iOS11 headline style is to expand the information level through word weight.
Different font weights reflect different hierarchical relationships and emotional feelings. Thin fonts give people a delicate and light feeling, while bold fonts give people a solemn and serious feeling, so it is necessary to define font specifications Consider which word weight is used for which scene, so as to maintain a good reading experience.
2. Word weight setting
Word weight The settings are also based on the principles of order, stability, and restraint. In order to unify the overall effect, it is better to use two font weights under normal circumstances, for example, only Regular and Medium font weights appear. In special cases, thicker or thinner font weights can be used to further expand the information level. When the font size is 12-18pt, use Regular; when 20-26pt, use Light; when 28-34pt, use Thin; when the font size exceeds 34pt, it is recommended to use Ultralight .
The above is set according to the rule of inverse ratio between font size and font weight, that is, the larger the font size, the lighter the font weight. Of course, you can also follow the proportional rules or custom rules. Specifically, you need to set them according to the positioning of the product and the characteristics of the users, so as to ensure that the information level is clear and clear.
This article will end here It's over, if it helps you a little, please like it~ You can also pay attention to my official account Peng Peng Design Notes, I will update UI/UX design boutique articles from time to time, thank you for reading.
Recommended related articles:
"Data Knowledge for Designers"
"Super mind! App dynamic design essential knowledge"
Super Comprehensive! 5 Elements of Interface Visual Design》
"Design System Interface Design Principles-Vision"
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Interface%20Visual%20Design%20Elements%20%20Fonts.html
支付宝扫一扫 
评论列表（196条）
测试