In any effective interface , Hierarchical design distinguishes the important parts of the interface from the minor ones , Can be aligned from 、 spacing 、 Color 、 Indent and font, etc . When all this is adjusted and applied properly , It can improve the readability of the whole interface .
A lot of them have just been done APP The designer of the interface , Often because of the font size 、 The font color 、 The distance bothers me . When you get the design requirements , Start designing , I don't know how to adjust the font size and line spacing of the interface .
Every word in the interface 、 Every character is important . Good text is good design , Text is the most fundamental interface , We need our designers to shape and polish this information . The biggest difference between Fonts is not in serifs , It's the difference between the font and the font . But a lot of fonts don't differ much , Some of the new fonts are even the result of minor modifications to existing fonts .
therefore , The font is divided into several large series , The same type in a series , It's called the universal font family . It includes the following five series ：
① Serif type .Times New Roman By default s Serif type , In Chinese characters , It's song style 、 It's like Song Dynasty .
② Sans serif fonts . default sans serl typeface , In Chinese font, Microsoft YaHei 、 All of them are in bold type .
③ Equal width font . Every letter in this font has the same width , Usually used to display program code, etc .Courier Is the default constant width font , For Chinese, each character is of equal width .
④ Imitate handwritten Fonts . Handwriting is more personalized , Usually used as a title 、logo wait . There is no default font for this font family , In English , Usually use Comicsans, Chinese words , Running script series 、 The font of cursive script series, etc , Can be counted as handwritten .
⑤ Decorative Fonts . Most of them are used in titles , Great personality , There are so many Fonts , For art Fonts .
Regular font size
Due to the small space of mobile devices , Ambient light is usually weak , So we should pay more attention to the choice of font and size . Text size is just a range , It depends on the visual effect of the design , There is no strict standard for font size , But in APP In design , involve 4 Seed size 32px、28x and 24px, The font size should be even , All are 4 Multiple .
We need to popularize it here px The concept of .px A unit of pixels ,10px Express 10 Pixel size , It is often used to indicate the size of a font , It's very convenient and intuitive .
Spacing and line width
Line width is the length of a line of text , The ideal line width for comfortable reading is 50 About characters , The size of the line spacing depends on the design and spacing of the text ; Line spacing is the space between the lines , If the line spacing is too tight or too wide, it will cause dyslexia to users , The standard line spacing is 1.4EM, In mobile interface design , We usually use x To represent the height of ; There is no fixed value for word spacing , We pursue the principle of readability in interface design , You don't usually adjust the word spacing .
The font color
The text in the interface is divided into three levels , Including the main text 、 Paraphrase 、 Prompt copy, etc . Against a white background , The color level of the font is actually black 、 Dark grey 、 gray . The common color values are #333333、#666666、#999999.
① Official headline number ： Intelligent design Top creative designers must
② This article is Intelligent design www.cocoo.top Edit and organize , The copyright belongs to the original author , Reprint please indicate the source ！