# Give typography distinct jobs

ID: cmp-type-roles. Pilot lesson. Sources: [S15](https://design.google/library/google-sans-flex-font), [S16](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-optical-sizing).

Teach roles for orienting labels, expressive statements, explanation, precise data, captions, and actions. Differentiate through width, weight, case, spacing, optical size, or family without requiring many fonts. Do not assign fonts by industry stereotype.

Application A: compact labels support broad expressive headings and ordinary reading text. Application B: a quiet service page uses modest display contrast and tabular numerals for practical details.

Counterexample: display styling spreads into descriptions and controls, reducing scanability.

Mobile: preserve reading comfort, zoom, glyph coverage, and fallback metrics. Use only axes present in licensed fonts.

Storyboard: describe consequential type roles and emphasis. Review: inspect actual copy at its displayed size, including loaded and fallback font behavior.

## Authority and use

This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.