What is Typography Scale Generator?
A typography scale generator builds a modular type ramp from a base size and a ratio. This Typography Scale Generator produces nine steps labeled XS through 5XL (CSS variable names text-xs through text-5xl), previews each size, and exports a :root block of CSS custom properties with px values and rem comments.
Steps use geometric progression: size = basePx × ratio^(index − 2), so the third step (text-base) equals the base. Ratios offered are 1.125, 1.2, 1.25, 1.333, 1.5, and 1.618. Rem values divide px by your configured root font size (default 16).
Modular scales have a long history in print and web typography. By fixing a ratio, every step stays related—useful when many contributors would otherwise invent one-off sizes.
Why Use This Tool?
Modular scales keep headings and body sizes related instead of arbitrary. Exporting CSS variables accelerates design-system setup.
Comparing ratios visually shows how aggressive 1.618 feels versus a quieter 1.2 major second.
Exporting CSS variables means engineers can adopt --text-lg without reverse-engineering a Figma inspection panel.
- Six classic scale ratios
- Nine named steps with live preview
- CSS variables export
- Configurable base and root font size
How Does This Tool Work?
Choose a ratio and base pixel size (slider 10–24). Optionally set root font size for rem comments. The tool maps steps from text-xs (exponent −2) up to text-5xl (exponent +6 relative to the naming list’s base index).
Exported CSS looks like --text-base: 16px; /* 1rem */ inside :root. Variable names are inspired by common utility naming; they are not Tailwind itself unless you wire them that way.
The preview renders each label at its computed pixel size so hierarchy is obvious before you commit tokens.
Understanding Your Results
Larger ratios increase contrast between steps—great for editorial sites, potentially extreme for dense admin UIs. Smaller ratios feel tighter and more product-like.
Px values can be fractional after multiplication; the export rounds px display values while rem comments keep higher precision.
Why Tracking This Matters
A documented scale prevents one-off font sizes that fragment the UI. Rem-aware exports support user font scaling when you apply rem in CSS.
Benefits of Using Typography Scale Generator
- Deterministic modular arithmetic
- Preview before you commit
- Ready-to-paste :root variables
- Common ratio presets including golden ratio 1.618
- Private browser generation
- Free
How Is the Result Calculated?
For step index i with baseIndex 2: px = basePx × ratio^(i − 2); rem = px / rootFontSize. CSS export writes --{name}: {px}px; /* {rem}rem */.
px_i = basePx × ratio^(i − 2); rem_i = px_i / rootFontSize
- basePx
- Pixel size of the base step (text-base).
- ratio
- One of 1.125, 1.2, 1.25, 1.333, 1.5, 1.618.
- rootFontSize
- Divisor used when expressing rem equivalents.
- text-xs … text-5xl → nine steps
- Base sits at text-base (third step)
Tips for Better Results
- Start with 1.25 (major third) for many product UIs.
- Set root font size to match your html rule before trusting rem comments.
- Prefer applying rem in CSS if you want user-agent font scaling to matter.
- Check heading contrast and line length after picking dramatic ratios.
- Pair with the CSS Unit Converter when mixing px specs and rem tokens.
Standards and References
Conclusion
Pick a base size and ratio, preview the ramp, and copy the :root CSS variables into your design system. Adjust the ratio until hierarchy feels right for your product density, then apply sizes consistently.