Typography Scale Generator
Generate a harmonious type scale based on a ratio — for consistent typography across your design system.
CSS Custom Properties
Frequently Asked Questions
What is a modular type scale?▼
A modular scale is a sequence of font sizes calculated by multiplying a base size by a ratio. Instead of picking arbitrary sizes like 12, 14, 18, 24, you use a formula: size_n = base × ratio^n. This creates visual harmony because the sizes relate to each other mathematically — the same principle used in music for harmonics.
What ratio should I choose?▼
For body-heavy content (blogs, articles): Major Third (1.25) or Perfect Fourth (1.333) work well — large enough difference between levels without extreme jumps. For display/marketing pages: Golden Ratio (1.618) creates dramatic hierarchy. For dense UI with many levels: Minor Second (1.067) or Major Second (1.125) provide subtle differentiation.
Should I use px, rem, or em for font sizes?▼
rem (root em) is recommended for font sizes — it's relative to the root html font-size (typically 16px), respects user browser zoom settings, and is easy to reason about. px ignores browser zoom preferences (accessibility issue). em compounds with nesting, making it harder to predict. rem gives you control without compounding.
How do I use a type scale in a design system?▼
Define CSS custom properties (--text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl, --text-3xl) and use them consistently. Map scale steps to semantic roles: --text-base for body, --text-lg for lead text, --text-xl to --text-3xl for h3, h2, h1. Avoid using arbitrary font sizes outside the scale.