Material Design font layout (Typography)

Material Design font layout (Typography)

Roboto

Since the release of Ice Cream Sandwich, Roboto has been the default font set for Android systems. In this version, Roboto is further optimized to adapt to more platforms. The width and roundness increase slightly, improving the clarity and looks more pleasant.

Roboto font-1.21 MB (.zip)

Standard Styles)

Font layout scaling and Basic style Typographic Scale & Basic Styles)

Using too many font sizes and styles at the same time can easily destroy the layout. Font typographical scaling contains a set of limited font sizes, and they are well adapted to the layout structure. The most basic style set is the font layout and scaling based on the numbers 12, 14, 16, 20, and 34.

These dimensions and styles balance the content density and reading comfort in classic applications. The font size is specified by the number of scaled fonts (scaleable pixels) in the SP, so that large-sized fonts can be better accepted.

"Display)" style example

Example of "toutiao Headline)" Style

For any table element, the title style must be used for all titles displayed in the App Bar.

"Title)" style example

In some specific scenarios, the "secondary title" style is used instead of a small "subject" style. These individuals contain a short text preview, or appear together with the title and a line of text in the "subject" style.

Example of "Subhead" Style

"Body" style example

"Body" style example

"Button)" style example

Basic Color/Color contrast Basic colors/Color contrast)

The most common sense is that background and text in the same color are hard to read. However, some people do not know that text with a strong contrast will be somewhat dazzling and hard to read. This is especially evident in the dark background.

To obtain a good degree of recognition, the text should satisfy a minimum contrast, that is, 4.5: 1 is calculated based on the brightness ). The 7:1 contrast is the most suitable for reading.

The combination of these colors also takes into account the different contrast reactions of some atypical users.

Large text/Dynamic font size Big Type/Dynamic Type sizes)

If used properly, the large text will make the application more interesting and easy to identify the layout, and help users quickly understand the content.

The dynamic font size allows the font size to be kept in the container when the text length is unknown. The dynamic size is selected from the font layout and scaling based on the available space and estimated character space.

Avoid rashly using small characters to adapt to smaller containers unless you have.

<

> Example Comparison

Line Height)

The row height is determined by the size and width of each style to achieve good readability and proper spacing. Automatic line breaks are only allowed in similar styles such as "subject", "secondary title", and "outline. All other styles should appear in the form of a single line.

<

> Example Comparison

Line feed rule/Line breaking rules/Hypenation)

Yes

|

No

Characters in length in each line: Characters per line lengths)

For readability and line length, see the recommendations from Baymard Institute:

"To achieve good reading performance, each line should contain about 60 characters. The number of characters contained in each line is a key factor in determining the reading comfort ."

"Too wide: if there are too many lines of text, the user's eyes will not be able to focus on the text. This is because it is difficult for users to determine the starting point of a line because of too long text, or even reading the wrong line in a large text segment ."

"Too narrow: if there are too few lines of text, it will lead to too frequent eye scanning and damage the reading speed. Too short content also puts pressure on people, causing users to jump to the next row early before reading this row, thus missing important potential information )."

Reference: readability: optimal line length

Padding Tracking and kerning)

Original Text: Typography Translation: acely Proofreader: chenyusi