Comprehensive UI design fonts and typography guide

Whether you're doing a Web page or app design, text content can always take up nearly 80% of the space in the entire layout. So understanding fonts and typography is critical to UI designers. You need to always put the readability of the content first to consider and weigh your choice of fonts and typography.

　　Basic Terminology for Fonts

It is important to understand the basic terminology of font design, which is frequently seen in related articles about font design. For example, x-height (high x) refers to the distance from the letter's baseline to the top of the highest letter, which increases legibility when the proportion of the X-word is relatively large.

　Glyph of Chinese character

In most cases we choose to use the system's own fonts, such as Microsoft, Black, XXFarEastFont-Arial, bold, etc. to define the title and content, but sometimes, we do logo,banner design also need to change the font, to achieve more ideal results. At this time we need to master the Chinese character's glyph structure and some of the most basic design principles.

　　Line words and non-liner words

The alphabet system in Western countries is divided into two large characters: serif (serif font) and sans serif (sans serif fonts). The line Word (the song, Times New Roman) in the image below refers to the extra decorations at the beginning and end of the stroke, and the thickness of the strokes will vary depending on the vertical. Conversely, sans-serif (the source bold and Helvetica in the image below) do not have these additional decorations, and the strokes are roughly the same thickness.

The font of the liner character is easy to identify, so it has high readability. Conversely, no liner word is more eye-catching. Generally speaking, the need to emphasize, highlight small text generally use sans serif word, and in the long text, in order to read the convenience, the general use of liner words. In practice, because of the Chinese XXFarEastFont-Arial and Western-style liner, the Chinese bold and Latin-text sans-serif are similar in styles and applications, so they are usually used in combination.

　　Font layout Suggestions

Before you know the typography skills, you need to make sure that your content is simple and clearly displayed. Good writing and typography make us more willing to read, so it's best to focus on whether the fonts and typography you set are easy to read, and then consider modifying them for aesthetic changes.

　system fonts in iOS

With the release of the iOS 9 system and the EI Capitan system, the system fonts are now turned into Apple's own design of San Francisco. iOS still uses the SF UI elsewhere and uses the SF Compact in Apple Watch.

San Francisco has two dimensions: Text mode (SF UI text) and Presentation mode (SF UI display). Text mode is suitable for sizes smaller than points, and the display mode is suitable for sizes larger than points. When you use San Francisco in your app, iOS automatically switches between text and presentation modes at the right time.

Note: If you use a tool such as sketch or Photoshop to design, you need to switch to display mode when you set the font to be greater than or equal to points. iOS automatically adjusts word spacing for San Francisco based on font size.

　　Select Body Font

Selecting the right font for the body text is the most important. Be sure to choose fonts that are readable and look clean and easy to read. The common English fonts I recommend are: San Francisco, Helvetica neue, Avenir Next, Open Sans, Museo Sans. Chinese fonts are, XXFarEastFont-Arial Black, the source bold.

　　Size of font

The body font set in Iphone,ipad,iwatch should not be less than 11pt, so that it can be read normally. We recommend that the body text size should be in 15-18pt.

　　The character weight of the font

While we are setting larger fonts for better readability, we should also reduce the font weight (weight) and consider Light,thin or Ultra Thin. Overweight fonts can be too eye-catching to affect the display of other content.

When the font size is 12-18pt, when using regular,18-24pt, use light,24-32pt, use thin, when the font size exceeds 32pt, it is recommended to use ultralight. All of these are recommended values, and you should set the text content to look clear and refined based on the display effect of different fonts, thus maintaining a good reading experience.

Modern fonts have multiple character resets: Regular,light,thin and ultralight

　Reasonable set line height, so that the text can also breathe

Line spacing (leading) should be set to between 120% and 145% of the font size.

In the example on the right, the row height is set to be 100% the same height as the font, and in the example on the left, I set it to 145%. There is a very significant difference in their display. When the number of words increases further, you will find that reading line spacing set too small large text will be very tired. Reasonable set line height, is also a white technique, can enhance the user's reading experience.