Apply typography

Stay organized with collections Save and categorize content based on your preferences.

Display is utilized for large, short strings of text used to display highly glanceable hero information, significant metrics, confidence or expressive brand moments.

• DisplayLarge is the largest headline. Displays are the largest text on the screen, reserved for short, highly glanceable hero information, significant metrics, confidence or expressive brand moments which benefit from a prominent scale and style.
• DisplayMedium is the second largest headline. Displays are the largest text on the screen, reserved for short, highly glanceable hero information, significant metrics, confidence or expressive brand moments which benefit from a prominent scale and style.
• DisplaySmall is the smallest headline. Displays are the largest text on the screen, reserved for short, highly glanceable hero information, significant metrics, confidence or expressive brand moments which benefit from a prominent scale and style.

Title is hierarchical text used as a mechanism for way-finding, like a page, section title, or sub-section title (in the case of TitleSmall).

• TitleLarge is the largest title. Titles are smaller than Displays. They are typically reserved for medium-emphasis text that is shorter in length and not recommended for interactive components, rather page headings or sub headings.
• TitleMedium is the medium title. Titles are smaller than Displays. They are typically reserved for medium-emphasis text that is shorter in length and not recommended for interactive components, rather page headings or sub headings.
• TitleSmall is the smallest title. Titles are smaller than Displays. They are typically reserved for medium-emphasis text that is shorter in length and not recommended for interactive components, rather page headings or sub headings.

Label is used for component level text that describes an action that would happen if interacted with. The most common and widely used application for label is for text nested within a button.

• LabelLarge is the largest label. Labels are used for displaying prominent texts like label on title buttons, applied to interactive components.
• LabelMedium is the medium label, and the most commonly used. Labels are used for displaying texts like primary label on buttons, applied to interactive components.
• LabelSmall is the small label. Labels are used for displaying texts like secondary label on buttons, labels on compact buttons, applied to interactive components.

Body is reserved for content text like paragraphs of body copy, text used in complex data visualization, time stamps and metadata.

• BodyLarge is the largest body. Body texts are typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
• BodyMedium is second largest body. Body texts are typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
• BodySmall is third largest body. Body texts are typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
• BodyExtraSmall is the smallest body. Body texts are typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.

Numeral text styles are used for numerical digits, usually limited to a few characters. Can take on more expressive properties at the larger display sizes. Gives flexibility to expand width axis with minimal localization and font scaling concerns.

• NumeralsExtraLarge is the largest role for digits. Numerals use tabular spacing by default. They highlight and express glanceable numbers that are limited to a two or three characters only, where no localization is required like the charging screen or time picker.
• NumeralsLarge is the second largest role for digits. Numerals use tabular spacing by default. They are large sized number strings that are limited to big displays of time, where no localization is required like a timer countdown or time picker.
• NumeralsMedium is the third largest role for digits. Numerals use tabular spacing by default. They are medium sized numbers that are limited to short strings of digits, where no localization is required like a steps count or time picker.
• NumeralsSmall is the fourth largest role for digits. Numerals use tabular spacing by default. They are for numbers that need emphasis at a smaller scale, where no localization is required like date and time pickers.
• NumeralsExtraSmall is the smallest role for digits. Numerals use tabular spacing by default. They are for numbers that need to accommodate longer strings of digits, where no localization is required like in-workout metrics.

Arc header text is used for curved text making up the signposting on the UI such as time text and a curved labels. Tailored font axis that specifically optimize type along a curve and in order to accommodate the different spacing that appears between characters when they're positioned on the top, compared to the bottom, of a curved screen.

Top

• ArcLarge is for arc headers and titles. Arc is for text along a curved path on the screen, reserved for short header text strings at the very top or bottom of the screen like confirmation overlays.
• ArcMedium is for arc headers and titles. Arc is for text along a curved path on the screen, reserved for short header text strings at the very top or bottom of the screen like page titles.
• ArcSmall is for limited arc strings of text. Arc is for text along a curved path on the screen, reserved for short curved text strings at the bottom of the screen like time text.

Bottom

• ArcLarge is for arc headers and titles. Arc is for text along a curved path on the screen, reserved for short header text strings at the very top or bottom of the screen like confirmation overlays.
• ArcMedium is for arc headers and titles. Arc is for text along a curved path on the screen, reserved for short header text strings at the very top or bottom of the screen like page titles.
• ArcSmall is for limited arc strings of text. Arc is for text along a curved path on the screen, reserved for short curved text strings at the bottom of the screen like time text.