Typography in Material Design

Roboto

Roboto has been the default font for Android since Ice Cream Sandwich. In this version, Roboto has been further optimized to adapt to more platforms. The width and roundness have been slightly increased, which improves clarity and looks more pleasing.

Roboto Font – 1.21 MB (.zip)

Standard Styles

Typographic Scale & Basic Styles

Using too many font sizes and styles at the same time can easily ruin a layout. Typographic scaling is a set of finite font sizes that work well with the layout structure. The most basic style set is based on 12, 14, 16, 20 and 34 font sizes.

These sizes and styles balance content density and reading comfort in classic applications. Font sizes are specified in SP (scalable pixels), making large font sizes more acceptable.

Example of the Display style

Example of "Headline" style

As with any table element, all titles that appear in the App Bar should use the "Title" style.

Example of the "Title" style

In some specific cases, you may want to use the "Secondary Heading" style instead of the smaller "Main Body" style. These instances contain a small preview of text, or a heading that appears with a line of "Main Body" style text.

Example of "Subhead" style

Example of "Body" style

Example of "Body" style

Example of the "Button" style

Basic colors/Color contrast

It’s common sense that text and backgrounds of the same color are difficult to read. But what some people don’t know is that text with too much contrast can be a bit dazzling and just as difficult to read. This is especially noticeable against a dark background.

To achieve good legibility, text should meet a minimum contrast ratio of 4.5:1 (calculated based on brightness). A contrast ratio of 7:1 is optimal for reading.

These color combinations also need to take into account the different reactions of some non-typical users to contrast.

Big Type / Dynamic Type sizes

If used correctly, large fonts can make an app more interesting, make the layout easier to discern, and help users quickly understand the content.

Dynamic font sizes allow large text to fit within a container when the length of the text is unknown. Dynamic sizes are selected from the font typography scale based on the available space and the estimated character space.

Avoid rashly using smaller type to fit smaller containers unless absolutely necessary.

<

> Sample comparison

Line Height

Line height is determined by the size and weight of each style to achieve good readability and proper spacing. Automatic line wrapping is only allowed in styles such as "body", "subheadings", "outline", etc. All other styles should appear in single line form.

<

> Sample comparison

Line breaking rules / Hypenation

want

|

don't want

Characters per line lengths

Readability and line length follow the recommendations from the Baymard Institute:

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

“Too wide: If there is too much text per line, the user’s eyes will have difficulty finding and focusing on the text. This is because too long text makes it difficult for users to determine where a line starts, and they may even read the wrong line in a long paragraph.”

“Too narrow: If each line of text is too short, the eye will scan back and forth too often, disrupting the rhythm of reading. Too short content can also create pressure, causing users to jump to the next line too early before finishing the current line (thus missing potentially important information).”

Reference: Readability: Optimal Line Length

Tracking and kerning

Original: Typography Translation: acely Proofreading: chenyusi