Typography

typography.primary

--semantic-typography-primary

Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content.

typography.secondary

--semantic-typography-secondary

Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content.

typography.prose.primary

--semantic-typography-prose-primary

Use for default body copy in long-form content.

typography.prose.secondary

--semantic-typography-prose-secondary

Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy.

typography.ui.primary

--semantic-typography-ui-primary

Use for default text in application interfaces, including controls, labels, and navigation.

typography.ui.secondary

--semantic-typography-ui-secondary

Use for supporting interface text, such as helper text or secondary labels. A step heavier than the primary UI style, so the smaller size stays legible. Use the primary UI style for default interface copy.

typography.ui.tertiary

--semantic-typography-ui-tertiary

Use for the lowest-priority interface text, such as compact metadata or supplemental labels. A step and a half heavier than the primary UI style, so the smallest size stays legible. Do not use when the primary or secondary UI style provides sufficient hierarchy.

typography.ui.label

--semantic-typography-ui-label

Use for interface labels: form field and fieldset labels, and structural labels such as navigation and menu group labels and the table of contents title. The primary UI style's size, half a step heavier than medium, so a label stands apart from the value beside it. Do not use for default interface copy.

typography.ui.searchDialog.input

--semantic-typography-ui-search-dialog-input

Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields.

typography.code.primary

--semantic-typography-code-primary

Use for primary code content, including source code, commands, and structured machine-readable text.

typography.code.secondary

--semantic-typography-code-secondary

Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content.

typography.heading.app.1

--semantic-typography-heading-app-1

Use for the highest-level heading in an application interface, such as a page title.

typography.heading.app.2

--semantic-typography-heading-app-2

Use for second-level headings in an application interface beneath a level 1 heading.

typography.heading.app.3

--semantic-typography-heading-app-3

Use for third-level headings in an application interface beneath a level 2 heading.

typography.heading.app.4

--semantic-typography-heading-app-4

Use for fourth-level headings in an application interface beneath a level 3 heading.

typography.heading.app.5

--semantic-typography-heading-app-5

Use for fifth-level headings in an application interface beneath a level 4 heading.

typography.heading.app.6

--semantic-typography-heading-app-6

Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level.

typography.heading.marketing.display

--semantic-typography-heading-marketing-display

Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings.

typography.heading.marketing.1

--semantic-typography-heading-marketing-1

Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy.

typography.heading.marketing.2

--semantic-typography-heading-marketing-2

Use for second-level headings in marketing content beneath a level 1 heading.

typography.heading.marketing.3

--semantic-typography-heading-marketing-3

Use for third-level headings in marketing content beneath a level 2 heading.

typography.heading.marketing.4

--semantic-typography-heading-marketing-4

Use for fourth-level headings in marketing content beneath a level 3 heading.

typography.heading.marketing.5

--semantic-typography-heading-marketing-5

Use for fifth-level headings in marketing content beneath a level 4 heading.

typography.heading.marketing.6

--semantic-typography-heading-marketing-6

Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level.

fontFamily.code

--semantic-font-family-code

Use for source code, commands, and other content whose character alignment must be preserved. Do not use for prose or general interface text.

fontFamily.prose

--semantic-font-family-prose

Use for long-form reading content, such as articles and documentation. Do not use for application controls or code.

fontFamily.ui

--semantic-font-family-ui

Use for text in application interfaces, including controls, labels, and navigation. Do not use for long-form reading or code.

fontWeight.ui.selected

--semantic-font-weight-ui-selected

Use for the label of the selected or current item, such as the current page in navigation and the section that contains it. Between medium and semi-bold: the selected item also stands out by its fill or color.

fontWeight.emphasis

--semantic-font-weight-emphasis

Use for strongly emphasized text in any context, such as important words in running text.

fontWeight.ui.emphasis

--semantic-font-weight-ui-emphasis

Use for emphasized interface text.

number.fontScale.inlineCode

--semantic-number-font-scale-inline-code

Component token for inline code, relative to the surrounding text, so code in a heading grows with it. Evens out the code typeface looking larger than the text typeface at the same size.