The HTML elements carry the type scale. <h1> to <h6> take display and headline roles, <p> takes body-large and <small> takes body-small. Add a class only when the element cannot carry the role, such as 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. Override the reference tokens to use a different family.

Noto Sans is the fallback for characters Roboto cannot cover. Roboto ships Latin, Latin Extended, Cyrillic, Cyrillic Extended, Greek, Greek Extended and Vietnamese. Noto Sans adds Devanagari. Each subset comes at 400, 500 and 700. Every subset is its own face with a unicode-range, so the browser downloads only the scripts and weights the page renders.

Noto Sans Arabic, Noto Sans Hebrew and Noto Sans Thai come next in the fallback. Each covers only its script's range, so a page fetches one only when it shows that script. CJK text falls through to the system font the browser picks for the element's lang. Set lang on Japanese, Chinese and Korean text. For another script, load its family and add it to --md-ref-typeface-fallback before sans-serif.

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>

The fifteen roles

When no tag maps to the role, use the class. Display-large and display-medium have no heading. Use them 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>

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, overline, upper, capitalize this.

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

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

Add -emphasized to a role class for its heavier Material 3 Expressive counterpart, such as .label-large-emphasized or .headline-small-emphasized. Each of the fifteen roles has one, with the same family, size and spacing. Display, headline, title-large and body roles go to 500. Title-medium, title-small and label roles go to 700. The weight is a token, --md-sys-typescale-emphasized-{role}-font-weight. The framework bundles Roboto and Noto Sans at 700, and the browser loads that weight only when a page uses it.

Inbox Unread

<h2 class="headline-small-emphasized">Account security</h2>
<span class="label-large-emphasized">Selected</span>

Links

Links use the primary color. A link without a class is also underlined when it sits in a paragraph, a <dd>, a blockquote, a figure caption or a table cell. Color alone does not mark a link for everyone. Links elsewhere, and any link with a class, have no underline. That way navigation lists, menus, tabs and buttons made from <a> keep their own look.

<p>Read the <a href="/themes.html">theme guide</a> first.</p>  <!-- underlined -->
<a class="button tonal" href="/themes.html">Themes</a>         <!-- styled by its class -->

Blockquotes

Blockquotes emphasize a quote or citation. The bar on the start side 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>

Keyboard keys

The stylesheet draws <kbd> as a keycap. Wrap a combination in an outer <kbd>, which stays plain around the keys inside it. A trailing <kbd> in a menu or list item is quiet shortcut text instead.

Press Ctrl+K to open the command palette, or ? for help.

<p>Press <kbd><kbd>Ctrl</kbd>+<kbd>K</kbd></kbd> to open the command palette.</p>

Highlighted text

<mark> highlights part of a text, such as the letters a search matched. It adds no padding, so a match inside a word does not split it. To highlight ranges from a script without changing the markup, register them under the name mark with the CSS Custom Highlight API.

Results for “press”: Expressive buttons, Pressed states

<p>Ex<mark>press</mark>ive buttons</p>

const range = new Range();
range.setStart(textNode, 2);
range.setEnd(textNode, 7);
CSS.highlights.set("mark", new Highlight(range));

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>

Prose

Add .prose to a container of bare HTML, such as rendered Markdown or CMS output. It caps the line length at 70 characters, spaces out headings and indents lists. It underlines links in lists and headings, and gives inline <code> and <pre> blocks a surface. It styles only elements without a class, so a button or chip inside the content keeps its own look.

npm run build

<div class="prose">
  <h2>Release notes</h2>
  <p>Run <code>npm ci</code>, then rebuild.</p>
  <ul>
    <li><a href="/helpers.html">Helpers</a></li>
  </ul>
  <pre><code>npm run build</code></pre>
</div>

Put .prose on a <div>, <section> or <main>. The framework draws every <article> as a card, so an article with .prose would look like one.

Typeface tokens

Override the brand and plain reference tokens to customize the scale. Each role keeps its 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. It expresses the M3 scale in rem with the standard 16px conversion, so browser text-size preferences keep working.