Stay organized with collections
Save and categorize content based on your preferences.
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 Automotive OS 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 Automotive OS 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 Automotive OS 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 Automotive OS.
The minimum type size for Android Automotive OS 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.
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.
The Android Automotive OS 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
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
a. Body 3
b. Body 2
c. Body 1
a. Display 2
b. Body 1
c. Body 1
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.
Don’t
Bold font weights (applied to all text in this example) are less legible than medium weights and should be avoided.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["Utilize the Android Automotive OS typographic scale for display, body, and subtext to ensure glanceability and consistency."],["Maintain a minimum body text size of 24dp for legibility, reserving smaller sizes for non-crucial information."],["Adhere to a 4-dp grid for alignment and visual hierarchy within the UI."],["Apply style attributes like font weight and color to emphasize important elements and create visual focus."],["Use medium font weights carefully for highlighting primary content and avoid bold weights for improved legibility."]]],[]]
