material-design-3-typography

Define CSS custom properties for each of the 15 type scale roles using the md-sys-typescale naming convention, covering font family, size, line height, weight, and tracking. Then create reusable classes like .headline-large and .body-medium that reference those tokens.

The M3 baseline type scale has 15 styles across five roles: display, headline, title, body, and label, each in large, medium, and small sizes. M3 Expressive adds 15 emphasized variants with heavier weights for calls to action and key content.

Roboto is the default M3 typeface, and Roboto Flex is recommended for M3 Expressive because its variable weight and width axes enable dynamic adjustments. Brand fonts like Inter, Poppins, or Work Sans can substitute if they remain readable at small sizes.

Use emphasized styles for calls to action, key headlines, dashboard data points, and onboarding highlights. Apply them sparingly alongside baseline styles, since the contrast between baseline and emphasized weights is what creates visual hierarchy.

The guidelines require a minimum 4.5:1 contrast ratio for body text and 3:1 for large text, using semantic color tokens like on-surface. Relative units such as rem ensure text remains readable when users zoom, and M3 Expressive's medium contrast approach balances legibility with expression.

Use CSS clamp() to create fluid type tokens, for example scaling display-large between 2.5rem and 3.562rem based on viewport width. Container queries can also adjust component-level type sizes, such as card titles, based on their container width.