Font specification of APP interface
Young and frivolous 2020-11-26 00:55:15
Text design is the most detailed part of interface design , It is also the most fundamental part that can not be ignored . Two factors should be considered in the process of interface design : Text recognition and readability of the interface .


?APP The font specification of the interface



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 .


?APP The font specification of the 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 .


?APP The font specification of the interface


Regular Fonts


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 .


?APP The font specification of the interface



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 :


?APP The font specification of the interface


① 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 .


?APP The font specification of the interface



③ 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 .


?APP The font specification of the interface


④ 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 .


?APP The font specification of the interface


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 .


?APP The font specification of the interface



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 .


?APP The font specification of the interface


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 .


?APP The font specification of the interface


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.

?APP The font specification of the interface


?APP The font specification of the interface

( The circle card has been added here , Please check the toutiao client )

① 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 !
版权声明
本文为[Young and frivolous]所创,转载请带上原文链接,感谢
https://fheadline.com/2020/11/202011260049460702.html
相似文章

2021-08-09