Type and scale

Generate type sizes and spacing from a modular ratio.

Core principles

  • Use one ratio to relate type sizes and spacing.
  • Review line length and line breaks as well as font size.

Model

  • The theme seed defines a named ratio and density.
  • Component recipes use type and spacing tokens from that scale.

Use in your app

  • Choose a ratio, then inspect headings, body text, and controls.
  • Review narrow layouts after changing the scale or density.

Verification scope

  • Fixtures compare declared targets and estimated inline sizes with configured limits. Font rendering requires browser measurements.

Token notes

  • Scale tokens inform type sizes, spacing, and control heights.