Don’t understand UI text design specifications? This article will help you figure it out!

In UI design, text setting is an essential part.

The text setting process involves font type, font size, font weight, line height, line width, and color.

The text design specifications described in this article include the following parts:

• type
• Font Size
• Font Weight
• Line Height
• Line Width
• color
• type

The default system font for iOS devices is Ping Fang for Chinese characters and SF UI Text for English and numbers.

The default fonts for Android devices are Source Han Sans for Chinese and Roboto for English and numbers.

Font Size

The font size of text varies in different usage scenarios. The main usage scenarios of text are divided into: first-level title, second-level title, third-level title, body text and prompt text.

The minimum font size is generally 11. There are also special cases, such as the text in the label, the font size is 10 or even smaller.

Font Weight

Font weight refers to the thickness of the font strokes. The font weight level is used to indicate the different thickness of the font strokes in the same font family.

In UI design, there are two commonly used font weights, one is Regular and the other is Medium.

Use Regular for normal text. Use Medium when you need to highlight the hierarchy and increase contrast. Medium is often used for titles.

Line Height

The font size is equal to the text height. As shown in the figure below, when the font size is 16 and the line height is set to 16, the line height is also the height of the font itself (16pt).

Line height = font size + line spacing.

As shown in the following figure: the line spacing is 3pt above the text, and the line spacing is 3pt below the text. The font height is 16pt.

Line height (22) = font size (16) + line spacing (3+3).

In the interface process, it is necessary to standardize the font size and the corresponding line height. Otherwise, there will be design layout problems.

For example, when designing a label, when the font size is 14 and the line height is 20, in order to keep the font visually the same distance from all sides, the top and bottom spacing is 4 and the left and right spacing is 8.

Because of the existence of line spacing, the top and bottom spacing and left and right spacing cannot be set the same.

If the line height is set to 14 (the size of the text itself), then the top and bottom spacing should also be 8pt, not 4pt.

The following table is a comparison table of the font size and corresponding line height recommended by the iOS design guidelines.

The following figure is a comparison table of Sketch’s default font size and line height:

It can be seen that the comparison table of font size and line height recommended by iOS is different from the default one in Sketch.

When the Sketch visual draft is developed and implemented, the font size and corresponding line spacing will be inconsistent, which will cause problems with restoration.

There are two ways to solve the problem that row height cannot be perfectly restored:

• Set the line height to the font size, so there will be no line spacing problem, and perfect restoration can be guaranteed. However, due to the double line height, the fonts of some models will be cut off.
• Use a font plug-in so that it can automatically fix the font line height in the Sketch document, so that the font line height in Sketch is 100% restored to the font line height in development.

Line Width

Line width = font width + width of the font on both sides

Line width acts on the text range, as shown in the following figure:

Extending the line width means setting the text content range. The text is 12pt away from the voice icon on the right, which means that when the text content is 12pt away from the voice icon, the text will be punctuated or truncated for display.

color

There are two rules for defining font color. One is to use the color value directly, as shown in the figure:

Another way is to achieve it through opacity, usually with #000000 as the base, setting different opacities, as shown in the following figure:

In general, the opacity method has a wider range of usage scenarios.