Typography

Typographic styling helps define a UI’s information hierarchy and function. Typography choices can also greatly affect legibility, which is an important consideration for driving.

Guidance at a glance (TL;DR):

  • Use display, body, and subtext from the Android Auto typographic scale
  • Minimum body text size is 24dp – reserve subtext sizes for non-crucial information
  • Use a 4-dp grid for alignment
  • Apply style attributes to create effects (support hierarchy, focus attention)
  • Use medium font weights sparingly – and avoid bold

Scale and grid references

Use the Android Auto typographic scale and typesetting grid to ensure a consistent look and glanceable text at a range of levels for display text, body text, and subtext.

Android Auto typographic scale

This scale shows the fonts, font sizes, and line heights used for the nine default levels of display text, body text, and subtext used in Android Auto.

The minimum type size for Android Auto is 24dp. Sizes below 24dp are not easily glanceable and should be used sparingly in the auto context. Subtext sizes are best reserved for non-crucial or tertiary information such as status bar content.

Type scale
The format for the font information in this scale is: (Font name) (Type size) / (Line height). The values for type size and line height are shown in points (pt).

Typesetting grid and baseline reference

Maintaining the scale and vertical rhythm based on a 4dp grid helps with consistency and visual hierarchy.

scaling on a 4dp grid
The Android Auto scale is designed to accommodate 4dp font-sizing increments.

Guidance and examples

Applying scale and style to your typographic choices can help you:

  • Keep all text legible
  • Convey a visual hierarchy among text elements
  • Focus attention in the most important spots

The sections below provide guidance and examples for how to apply scale and style appropriately.

Applying scale

Google Sans should be used for type sizes 32dp and larger. Roboto is used everywhere else as a functional typeface because it is legible in much smaller sizes.

Type families
This example shows appropriate uses of Google Sans and Roboto at various leels of the typgraphic scale.

Examples

Do

When using a display font best suited to large text, such as Google Sans, keep it at type sizes of 32dp or larger. Use Roboto for smaller, secondary text because it maintains good legibility at sizes below 32dp.

Don't

Don't use Google Sans for smaller text sizes at which its legibility is not optimal.

Applying style

Each style consists of a set of values defined by the scale and additional attributes. These attributes include font weight, color, and opacity values, and they can be added to any type size to create a desired effect, such as focusing attention.

The Title style in this example consists of the Body 1 scale (which defines the font size and line height) modified by additional attributes of color, opacity, and weight.

Examples

Typography text sizes
a. Body 3
b. Body 2
c. Body 1
Typography text sizes
a. Body 2
b. Display 3
c. Body 2
Typography do

Do

Use the medium font weight sparingly. Save it for when you need to emphasize the primary or active text, such as the Recents tab in this example, or to establish visual hierarchy.
Typography don't

Don't

Bold font weights (applied to all text in this example) are less legible than medium weights and should be avoided.