The type scale is the HTML. <h1>–<h6> are display and headline roles, <p> is body-large, <small> is body-small. You do not need a class unless the element cannot carry the role — a <span class="label-large">, or a <p class="display-large"> used as a hero numeral.

Tokens follow the M3 type system. Each role sets family, size, weight, line-height, and letter-spacing from --md-sys-typescale-*. They do not set font-style — the token named -font-family-style holds “Regular” / “Medium”, which are weights, not CSS font-style keywords.

M3's --md-ref-typeface-brand and --md-ref-typeface-plain tokens both default to Roboto. Large display, headline, and title-large roles use brand; smaller title, body, and label roles use plain. Noto Sans is the fallback for characters Roboto cannot cover. The compiled stylesheet ships Latin Roboto and Noto Sans at 400 and 500. Override the reference tokens to use a different family.

Semantic map

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A paragraph uses body-large. It is for longer reading, not chrome.

Small print and figcaptions use body-small.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>A paragraph uses body-large.</p>
<small>Small print.</small>

Element	Role	Size	Weight
`h1`	display-small	2.25rem	400
`h2`	headline-large	2rem	400
`h3`	headline-medium	1.75rem	400
`h4`	headline-small	1.5rem	400
`h5`	title-large	1.375rem	400
`h6`	title-medium	1rem	500
`p`	body-large	1rem	400
`small`, `figcaption`	body-small	0.75rem	400
`body`	body-medium	0.875rem	400

The fifteen roles

When the tag cannot say the role, use the class. Display-large and display-medium have no heading — they are for short, important numerals and hero lines.

Display Large

Display Medium

Display Small

Headline Large

Headline Medium

Headline Small

Title Large

Title Medium

Title Small

Body Large

Body Medium

Body Small

Label Large

Label Medium

Label Small

<p class="display-large">Display Large</p>
<span class="label-large">Label</span>

Class	Size	Weight	Line height	Tracking
`display-large`	3.5625rem	400	4rem	−0.015625rem
`display-medium`	2.8125rem	400	3.25rem	0
`display-small`	2.25rem	400	2.75rem	0
`headline-large`	2rem	400	2.5rem	0
`headline-medium`	1.75rem	400	2.25rem	0
`headline-small`	1.5rem	400	2rem	0
`title-large`	1.375rem	400	1.75rem	0
`title-medium`	1rem	500	1.5rem	0.009375rem
`title-small`	0.875rem	500	1.25rem	0.00625rem
`body-large`	1rem	400	1.5rem	0.03125rem
`body-medium`	0.875rem	400	1.25rem	0.015625rem
`body-small`	0.75rem	400	1rem	0.025rem
`label-large`	0.875rem	500	1.25rem	0.00625rem
`label-medium`	0.75rem	500	1rem	0.03125rem
`label-small`	0.6875rem	500	1rem	0.03125rem

Emphasis

<em> is italic. <strong> and <b> are weight 500 (M3 Medium). Helpers cover the rest when the tag is already taken.

Emphasized, strong, italic, bold, light, thin, underline, upper, capitalize this.

<em>Emphasized</em>
<strong>strong</strong>
<span class="bold">bold</span>
<span class="upper">upper</span>

large-text, medium-text, and small-text apply the three body roles to an element that is not a <p> or <small>.

Blockquotes

Blockquotes emphasize a quote or citation. The left bar uses --md-sys-color-primary.

This is an example quotation that uses the blockquote tag. Here is another line to make it look bigger.

<blockquote>
  This is an example quotation that uses the blockquote tag.
</blockquote>

Flow Text

Toggle flow-text

flow-text scales font size with the viewport so line length stays readable. Resize the window and watch the sample change, or use the button to compare with unscaled body text.

To see Flow Text in action, slowly resize your browser and watch the size of this text body change. Use the button above to toggle flow-text off and on to see the difference.

<p class="flow-text">I am Flow Text</p>

Typeface tokens

Override the brand and plain reference tokens to customize the scale while preserving each role's M3 size, weight, line height, and tracking:

:root {
  --md-ref-typeface-brand: "Roboto Flex";
  --md-ref-typeface-plain: "Roboto";
}

The default order is Roboto, Noto Sans, then the generic sans-serif family. ExpressiveCSS leaves the root font size to the browser and expresses the M3 scale in rem using the standard 16px conversion, so browser text-size preferences continue to work.

Typography