MD3 typescale
Each row uses the matching text-<role>-<size>
utility. Computed metrics on the right are read live from
getComputedStyle.
Tailwind size scale → MD3 mapping
Tailwind defaults are re-mapped to the closest MD3 typescale role, so existing markup picks up Material-correct size + line-height + tracking without changes.
Without a Tailwind build
Everything above needs your own Tailwind build to generate it. Pages loaded from a CDN, or
rendered by Django or Rails, get the same scale as ready-made classes from
material.css — md-typescale-body-large and friends, one per role.
The rows below use those classes, not utilities.
md-typescale-headline-small
Aa Material headline
md-typescale-title-medium
Material title text
md-typescale-body-medium
Body copy — the quick brown fox jumps over the lazy dog.
md-typescale-label-small
Caption
They read the same tokens, so the font picker above moves them too — and they sit in a cascade
layer, so any unlayered CSS on the page overrides them without !important.
Sample usage
<!-- Named MD3 utilities -->
<h1 class="text-display-large">Hero headline</h1>
<h2 class="text-headline-medium">Section title</h2>
<p class="text-body-medium">Body copy</p>
<span class="text-label-small uppercase">Caption</span>
<!-- Tailwind defaults — already aligned to MD3 metrics -->
<p class="text-sm">14/20, tracking 0.25 (body-medium)</p>
<p class="text-base">16/24, tracking 0.5 (body-large)</p>
<p class="text-2xl">28/36 (headline-medium)</p>
<!-- No Tailwind? Same scale, ready-made classes from material.css -->
<h1 class="md-typescale-display-large">Hero headline</h1>
<p class="md-typescale-body-medium">Body copy</p>
<!-- Re-skin globally — swap one var on :root -->
<style>
:root { --md-sys-typescale-plain-font: 'Inter', system-ui, sans-serif; }
</style>