App Interface Design font specification

Summarize the app's font specifications by summarizing the different types of apps.

First, font selection

1.IOS: Apple IOS 9 system starts, the system's newest default Chinese font is: Ping Fang. The English font is: San Francisco

2.Android: English font: Roboto, Chinese font: Noto

Second, case analysis

1. Take today's headline screen as an example, the navigation main title font size is 40px, the body title is 36px, the auxiliary explanatory text is 24px, the small print (video length, title bar button name) is 20px, the avatar name is 28px. The font size represents a glance at the hierarchical relationship.

2. The body part, the navigation bar title text is 36px, the content title is 48px, the body is 36px, the small print is 22-20px.

(Because of the nature of the app, today's headline as a reading type of app, will pay more attention to text reading convenience.) So the font size selection will be slightly larger. )

3. For example, the navigation bar title text is 36px, the content title text is 34px, the content is 28px, the auxiliary explanatory text is 24px.

4. Finally take the bean fruit food as an example, the bean fruit food is I think the interface reading is a very beautiful app interface design. The text reading gives the person a very delicate and comfortable feeling. With the reading type of news app and tool type app, the text selection is slightly smaller than the font size selection. such as the size of the navigation bar is 30px, the maximum size of the page is 34px (category title), followed by 32px,28px,24px,20px

This is the content of the bean Fruit Gourmet Details page, in the body of the title used to 36px, the body content of 32px, the secondary text is 28px, followed by 24px,22px,20px.

Iii. Summary

Summary, the choice of font size should be based on the nature of the app, style, positioning to choose, should be through the text size to show the weight of the content, hierarchical division, to achieve a clear hierarchical relationship. In addition to the font size differences, you can also style (accentuate the font) and color of the distinction.

App Interface Design font specification