Typography
The theme self-hosts two variable fonts, bundled into your site's build — no request to a font CDN, no layout shift while one loads.
- Roboto Flex for text and headings. Its weight and width axes are what give Expressive its emphasized type.
- Roboto Mono for code.
The scale
| Token | Standard | Expressive |
|---|---|---|
--md-sys-typescale-display-weight | 400 | 720 |
--md-sys-typescale-display-width | 100 | 118 |
--md-sys-typescale-display-tracking | -0.02em | -0.035em |
--md-sys-typescale-headline-weight | 500 | 640 |
--md-sys-typescale-title-weight | 500 | 600 |
--md-sys-typescale-label-weight | 500 | 600 |
--md-sys-typescale-body-weight | 400 | 400 |
Body text never changes between styles: it is what people read for longest, and it is already tuned for that.
Families
| Token | Value |
|---|---|
--md-sys-typescale-brand-font | Roboto Flex, then system UI fonts |
--md-sys-typescale-plain-font | Roboto Flex, then system UI fonts |
--md-sys-typescale-mono-font | Roboto Mono, then system monospace fonts |
To use your own brand face for headings, override the token after the theme's CSS:
css
:root:root {
--md-sys-typescale-brand-font: "Your Brand", var(--md-sys-typescale-plain-font);
}Specimen
Display — the quick brown fox
Headline — jumps over
Title — the lazy dog
Body — Material 3 type is set in Roboto Flex. In Expressive, headings take heavier weights and a wider cut; body copy stays at a comfortable 400 so long pages remain easy to read. Inline code is Roboto Mono.