# Typography

> Material Design 3 type, from the HTML.

## Anatomy

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](https://m3.material.io/styles/typography/overview). 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.