"Design Talk" font and typography

Whether you're working on a Web page or an app design, text content can always account for nearly 80% of the entire layout. Understanding fonts and typography is therefore critical to UI designers. You need to always put the readability of the content in the first place to consider and weigh your choice of fonts and typography.

Basic terms for fonts

It is important to understand the basic terminology of font design, which is often seen in related articles that introduce font design. For example, x-height (x-height) refers to the distance from the beginning of the letter's baseline upward to the top of the shortest letter, when the ratio of high x is relatively large to increase legibility.

Chinese style

In most cases we have chosen to use the system's own fonts, such as Microsoft Jas, Arial, blackbody, etc. to define the title and content, but sometimes we do logo,banner design, we also need to change the font to achieve more satisfactory results. At this point we need to grasp the shape of Chinese characters and some of the most basic design principles.

Liner Word and non-liner word

The alphabet system in Western countries is divided into two large characters: serif (serif font) and sans serif (sans serif font). Serif words (in the Arial, Times New Roman) refers to the beginning and end of the stroke of the word where there is additional decoration, and the thickness of the stroke will vary depending on the straight horizontal. Conversely, sans-serif words (the source blackbody, Helvetica) do not have these extra decorations, and the stroke thickness is roughly the same.

The font of liner words is easy to identify, and therefore has high legibility. Conversely, no liner word is more prominent. Generally speaking, need to emphasize, highlight the small text generally use sans serif words, and in the long text, in order to read the convenience, the general use of liner word. In practical applications, because the Chinese language of the song and the western liner body, the Chinese black body and the Latin sans serif, in style and application scene similar, so often used.

Font layout Suggestions

Before you know your typography skills, you need to make sure that your content is simple and clearly presented. 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 retouching for beauty. We can refer to this English guide: 5 Principles of excellent typography and apply these principles to our app and web design.

system fonts in iOS

With the release of the iOS 9 system and the EI Capitan system, today's system fonts have become Apple's own design [San Francisco]. iOS still uses the SF UIElsewhere, while using the SF Compact in Apple Watch

San Francisco has two types of dimensions: text mode (SF UI text) and Presentation mode (SF UI display). The 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 mode and presentation mode at the right time.

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

Select Body Font

Choosing the right font for body text is the most important. Be sure to select those fonts that are readable and appear clean and easy to read. I recommend the common English fonts are: San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans. Chinese fonts are, Chinese fine black, Siyuan blackbody

Size of font

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

The character weight of the font

When we set larger fonts for better readability, we should also reduce the weight (weight) of the fonts accordingly, considering 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 , use regular,18-24pt , use light,24-32pt, use thin, when the font size exceeds 32pt , It is recommended to use ultralight. These are the recommended values, and you should set the text content to look clear and refined based on the display effect of the different fonts, thus maintaining a good reading experience.

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

Set the line height reasonably so that the text can breathe

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

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

45-90 characters per line

The length of a single line of text, if the line contains too many words, the text content will be difficult to read. English characters generally in 45-90 words more appropriate, and Chinese 35-60 words is appropriate. A reasonable president makes the user feel light and cheerful when jumping between the lines, and conversely makes reading a burden.

Font style

Font styles are important for legibility and quick browsing, and the general principle is that the modified text should not exceed 10% of the entire text, which is not emphasized if all the text is emphasized by the decoration. Of course, one should not simultaneously make more than three types of accent styles. In other words, do not use the same text in the same time, color, font change, size, underline, italic, bold.

Find the right Font

Most commercial fonts are expensive, but there are plenty of good fonts for free. You just have to pick your favorite font and apply it to your design. Here are a few very good font sites.

Google Fonts (need to turn over the wall)

At Google Fonts, you can download your favorite fonts for free and use them in your project as needed. Because the only way to use other fonts in iOS is to import font files into the system, Google Fonts's download capabilities are useful. Google fonts contains more than 1400 different fonts, including the most famous:Open Sans and Roboto fonts, which are the default fonts used by the Android system.

You can use the skyfonts on your Mac to come from syncing fonts to your desktop.

If you need to use Google Web Fonts directly on your website, you can choose a 360 proxy to access Google's free font library. Here are the instructions for use, very simple.

Typekit

There are very many excellent fonts. This is very useful for those who are just starting out. There are Proxima Nova and Museo fonts that I like very much. It also earns the Chinese fonts such as the source Blackbody .

Have font

For users who need to use a lot of Chinese fonts, having a font is a good choice. It is currently a relatively good web font service platform, contains a large number of excellent Chinese fonts.

Other resources

Typography and typography are an art worthy of further exploration. The formation and development of each font has a far-reaching history that can be traced back. When you design a work that can also be called artwork, that is the greatest affirmation to you.

Text Layout Guide

This is an English text typesetting guide, but the content and most of the comments on the Chinese font selection and layout are also meaningful. Well worth reading.

The basics of font design: The word is born from the heart

How does the Chinese character develop? What font are we using to change the font from now on? is the font base of the ancestors used in today's fonts? ... ... Through this article, we can understand the basic knowledge of Chinese characters.

What kind of font is best for quick reading

This article introduced in detail the Chinese and English font collocation suggestion, has the reference value.

Type is Beautiful

is a very well-known blog about the font site, provides a large number of font research articles, suitable for beginners to senior designers to read. It also provides a podcast called "Word Talk"

Related articles:

"Design Talk" color

Writer/Craftsman (author of Jane's book)
Original link: http://www.jianshu.com/p/d139cb264be9
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

"Design Talk" font and typography