Skip to content
uxTools
Design & CSS

Typography Scale Generator

Pick a base size, choose a scale ratio (Major Third, Perfect Fifth, Golden Ratio…), and generate a modular type scale. Optional fluid mode emits CSS clamp() based on min/max viewports.

Scale

Pick a base size and a modular ratio; the steps update live.

px

Fluid mode

Output CSS clamp() so each step interpolates between a small-screen and large-screen size.

Fluid mode is off — output uses a single rem value per step. Toggle on to emit clamp().

Preview

Settings only affect the live preview — not the generated CSS.

em

Live preview

Each step is rendered at its computed size. In fluid mode, choose a viewport to see how it interpolates.

  1. 5xl61.04px
    The quick brown fox jumps over the lazy dog
  2. 4xl48.83px
    The quick brown fox jumps over the lazy dog
  3. 3xl39.06px
    The quick brown fox jumps over the lazy dog
  4. 2xl31.25px
    The quick brown fox jumps over the lazy dog
  5. xl25px
    The quick brown fox jumps over the lazy dog
  6. lg20px
    The quick brown fox jumps over the lazy dog
  7. base16px
    The quick brown fox jumps over the lazy dog
  8. sm12.8px
    The quick brown fox jumps over the lazy dog
  9. xs10.24px
    The quick brown fox jumps over the lazy dog
  10. 2xs8.19px
    The quick brown fox jumps over the lazy dog

Code output

CSS custom properties, utility classes, a Tailwind theme extension, SCSS map, JSON, or W3C design tokens.

:root {
  --text-5xl: 3.8147rem;
  --text-5xl--line-height: 1.5;
  --text-4xl: 3.0518rem;
  --text-4xl--line-height: 1.5;
  --text-3xl: 2.4414rem;
  --text-3xl--line-height: 1.5;
  --text-2xl: 1.9531rem;
  --text-2xl--line-height: 1.5;
  --text-xl: 1.5625rem;
  --text-xl--line-height: 1.5;
  --text-lg: 1.25rem;
  --text-lg--line-height: 1.5;
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-sm: 0.8rem;
  --text-sm--line-height: 1.5;
  --text-xs: 0.64rem;
  --text-xs--line-height: 1.5;
  --text-2xs: 0.512rem;
  --text-2xs--line-height: 1.5;
}