Typeface is one of the most important elements in interface design. It can assist the transmission of information and the external expression of the text. The font can also express the emotional experience through its unique artistic charm and shape the brand image.
This paper summarizes the importance of font design, the recommendation of commonly used fonts on the interface, and the selection and setting of font size, line height and word weight in the authoritative design system at home and abroad. This article will provide some help if you want to have a deeper understanding and application of interface font design.
1) The importance of font
designAuxiliary information transfer
Text is the carrier of information content. It is an image or symbol to record ideas, communicate ideas and carry language, while the font is the external form of the text, and it is the visual style of the text. Appropriate fonts can help text and convey information clearly and accurately to users.
Express emotional experience
The art of typeface is embodied in its perfect external form and rich connotation. Before word information is transmitted to users, people first feel the visual charm and emotional expression of fonts.
Molding brand image
Different fonts have different stylistic features: some are beautiful and fresh and smooth lines; some are styling and full of tension; there are lively and lively Fonts… Choosing the correct font according to the attributes of the product can effectively create the brand image.
2)commonly used font recommendation
The choice of font is determined by product attributes or keywords of brand characteristics. The general types of Chinese fonts are divided into black body, song body, song style and regular script. The types of English fonts are divided into no serif, serif, Italy italic, handwritten, black fonts and so on.
Chinese font recommendation
Online Chinese fonts recommend the use of Siyuan blackbody, Chinese blackbody, Holly blackbody, Microsoft black, Ping Fang Jian, blackbody Jane, founder Lanting Pavilion black. Among them, the default Chinese font of the iOS system is “Ping Fang PingFang”, and the Chinese font of Android system uses “Siyuan blackbody Noto Sans CJK”.
Introduce the “siren blackbody”, which is developed by Google and Adobe. It is between modern and traditional style, which can be widely used in many ways, such as mobile phone, tablet, desktop user interface, web browsing or e-book reading. It brings pleasure and efficient information reading experience to people, and it is free.
English font recommendation
Online English fonts recommend San Francisco, Helvetica Neue, Roboto, Avenir Next, Open Sans. Among them, the default English font of the iOS system is “San Francisco” and the Android system default English font is “Roboto”.
Helvetica is a widely used western style font. It was designed by Swiss font designer in 1957, and the Arial font commonly used by Microsoft comes from it.
As a classic serif typeface, Helvetica is very popular and successful in graphic design and business. It is regarded as a model of modernist design concept. Its simple and simple line style is very popular.
Digital font recommendation
Online digital fonts recommend DIN, Core Sans D and Helvetica Neue.
DIN, which originated in Germany in 1995, has no serif font, easy to use looking, and is one of the most favorite types of fonts for designers. It is suitable for displaying large numbers of large numbers, but the recognition of small words is low.
Core Sans D is a serif – free font designed by Korean designers. It supports Thin, Light, Regular, Medium, Bold and other types of characters. It has a good display for large numbers, but it is a charge font.
Helvetica Neue, in addition to the simplicity and simplicity of the previous article, the neutral, no superfluous modification, or the upgrades of the Helvetica, has more words to use as a cross platform digital font for iOS and Android.
2. word number
1. about the word number
Font size is another important element in interface design, the size of the word size determines the level of information and the primary and secondary relations. A reasonable and orderly number setting can make the interface information clear and clear. On the contrary, the use of bad and disordered words will make the interface chaotic and affect the reading experience.
The choice of 2. words
The choice of word number can follow the character rules of iOS, Material Design, Ant Design and other domestic and foreign authoritative design systems, and can also be defined according to the characteristics of the products.
IOS number rule
In the iOS11 system, San Francisco is used as the system font in English, including the following text styles:
11pt / 12pt Caption description
13pt Footnote footnote
15pt Subhead subtitle
16pt Callout annotation
17pt Body / Headline body / module title
20pt / 22pt / 28pt Title page title
34pt Large Title page headline
It is important to note that the San Francisco font has two modes: the text mode SF Pro Text and the display mode SF Pro Display, and the text mode is suitable for words with a number less than 20pt, and the display mode is suitable for words that are larger than 20pt.
Material Design number rule
In the Material Design design system, Roboto is used as the English font, which specifies the commonly used font size of the following text typesetting:
12sp small word hints
14sp (desktop 13sp) text / button text
16sp (desktop 15sp) subtitle
20sp Appbar text
34sp / 45sp / 56sp / 112sp super character
Long text, about 60 characters per line, and short text suggest about 30 characters per line.
Ant Design number rule
Ant Design, inspired by the 5 scale and the natural law, defines 10 different types of characters from small to large: 12px, 14px, 16px, 20px, 24px, 30px, 38px, 46px, 56px, 68px.
The main font size is 14px, and the choice of other sizes can be defined according to the specific circumstances. As far as possible, we should control the principle of restraint between 3-5 kinds.
Kiwi number rule
Kiwi is hungry backstage design language, dedicated to creating products that can “understand, perceive, warm and inspire users”.
In Kiwi Web, the minimum font size is 12px, the main text size is 14px, and the largest font size is 46px.
3. high line
1)about the height of the line
Line height can be understood as an invisible box wrapped outside the typeface, with a font spacing of half a row from the top to bottom of the frame.
Referring to the W3C principle, the distance from the eye to the screen 25cm is the best reading distance.
The basic line height of western language is usually about 1.2 times that of the font size. Because Chinese characters are dense and highly consistent, there is no gap between the upper and lower parts of the western language to create interline spaces, so it needs to be higher in general. According to the characteristics of different populations (children, young people, old people) and the environment, it can reach 1.5 to 2 times even greater.
2. line high settings
IOS row high setting
The corresponding relationship between Apple official iOS size and row height is as follows (@1x multiplying):
Fluent Design row high setting
Microsoft the official Fluent Design font is corresponding to line height as follows (using font Segoe UI):
Ant Design row high setting
The corresponding relationship between Ant Design and height is as follows.
The high calculation formula: L = F + 8. Among them, L is row height (Line Height), F is the font size (Font Size), F is greater than 12.
4. word weight
1. on the weight of the word
Word weight refers to the size of the font. Thin, Light, Regular, Medium, Bold, Heavy, etc., usually marked after the font family name, are word heavy names. More and more product interfaces need to open the information hierarchy through word weight, and the mainstream trend of iOS11 headline is to pull the information level through the word weight.
Different characters reflect different levels of relationships and emotional feelings, fine fonts give people a delicate and light feeling, while the Bold will give people solemn and serious feelings, so in the definition of a font specification, what kind of words should be considered in order to maintain a good reading test.
2. The setting of the word weight
The setting of word weight is also based on the principles of order, stability and restraint. In order to unify the overall effect, in general, the use of two kinds of words is good, for example, only the appearance of two types of fonts, such as Regular and Medium, can be used to further open the information hierarchy with more coarse or thinner words in special cases.
When the size is 12-18pt, use Regular; 20-26pt, use Light; 28-34pt, use Thin; it is recommended to use Ultralight when the size is more than 34pt.
The above is the rule based on the inverse ratio between the font size and the word weight, that is, the larger the font size is, the lighter the word weight is. Of course, it can also be set according to the rules of the positive ratio or the custom rules, or according to the positioning of the products and the characteristics of the users, so as to ensure that the information level is clear and clear.