Typography Scale and Token Generator
Build a bounded type-size ladder and named role styles as CSS custom properties or JSON tokens, using your own base and ratio.
Loading tool…
How to use Typography Scale and Token Generator
Generate a complete source artifact: size tokens plus semantic role aliases with explicit line heights and weights. Rem conversion uses an entered root-size assumption and does not override the actual document root or user zoom.
- Enter your own values or load the local synthetic example.
- Run the tool and review the complete result and stated assumptions.
- Copy the output or download the generated file.
Good to know
- At most 21 size levels and21 named role rows. Safe lowercase identifiers only; no arbitrary selectors, CSS expressions, scripts or external fonts.
- CSS sizes round to 6 decimal places. JSON preserves calculation precision. Derived levels above10000 px are refused.
- A numeric ladder does not prove readability or accessibility. The generated artifact never sets the root font size.
Common questions
Does this change a live website?
No. It generates CSS or JSON source for you to review and integrate.
Why supply a root-size assumption?
It defines the conversion from the planned pixel sizes to rem values. The actual page root and user preferences still govern rendering.
Keep going with related tools
All developer →CSS Clamp Generator
Derive fluid CSS clamp sizing from two viewport and size anchor points.
DeveloperCSS Formatter and Minifier
Format a CSS stylesheet or serialize its syntax tree with compact token spacing.
AccessibilityContrast Palette Generator
Generate bounded opaque sRGB candidates that meet a declared WCAG contrast ratio against one background.
DeveloperCSS Font-face Kit Builder
Generate escaped font-face CSS and optional first-face preload source from your authored web-font URLs and face descriptors.