Type Scale Generator
Generate a modular typographic scale from a base size and ratio. Preview every step live, then copy CSS custom properties or responsive clamp() values.
Scale Values
| Name | rem | px | |
|---|---|---|---|
| 5xl | 5.6102rem | 89.76px | |
| 4xl | 4.2087rem | 67.34px | |
| 3xl | 3.1573rem | 50.52px | |
| 2xl | 2.3686rem | 37.90px | |
| xl | 1.7769rem | 28.43px | |
| lg | 1.3330rem | 21.33px | |
| basebase | 1.0000rem | 16.00px | |
| sm | 0.7502rem | 12.00px | |
| xs | 0.5628rem | 9.00px |
Live Preview
CSS Output
:root {
--text-xs: 0.5628rem;
--text-sm: 0.7502rem;
--text-base: 1.0000rem;
--text-lg: 1.3330rem;
--text-xl: 1.7769rem;
--text-2xl: 2.3686rem;
--text-3xl: 3.1573rem;
--text-4xl: 4.2087rem;
--text-5xl: 5.6102rem;
}What is a type scale?
A modular type scale defines all your heading and body sizes as a geometric progression: each step is the previous multiplied by a fixed ratio. This creates visual harmony across all text sizes.
Which ratio should I use?
1.25 (Major Third) is popular for compact UIs. 1.333 (Perfect Fourth) suits most web designs. 1.618 (Golden Ratio) creates dramatic contrast. Smaller ratios give subtler, calmer scales.
How to use in Tailwind?
Paste the CSS variables into your globals.css :root block. Reference them with font-size: var(--text-lg) or extend Tailwind's theme to map them to class utilities.
Frequently Asked Questions
What is a modular type scale?↓
A modular type scale is a set of font sizes generated by multiplying a base size by a fixed ratio repeatedly. For example, with a base of 16px and a ratio of 1.333 (Perfect Fourth), the sizes are 16 × 1.333 = 21.33px, 21.33 × 1.333 = 28.43px, and so on. Each size is mathematically related to the others, producing a visually harmonious scale.
Which scale ratio should I use for my project?↓
For most web designs, Perfect Fourth (1.333) strikes a good balance between contrast and compactness. Major Third (1.25) is better for dense UIs or mobile apps where you need subtler differences. Golden Ratio (1.618) creates strong contrast between sizes and works well for landing pages or editorial layouts. Minor Second (1.067) gives an almost flat scale, useful when you want sizes that differ only slightly.
What is the difference between CSS custom properties and clamp() output?↓
CSS custom properties (--text-base: 1rem) give you fixed sizes that you manually apply to text elements. The clamp() output wraps each size in clamp(min, preferred + 1vw, max) so font sizes scale fluidly between a minimum and maximum as the viewport width changes, without media queries. Fluid typography with clamp() is increasingly popular for responsive design.
How do I use a type scale in Tailwind CSS?↓
Paste the CSS custom properties into your globals.css :root block. Then either reference them directly with font-size: var(--text-xl) in custom CSS, or extend Tailwind's theme.fontSize in tailwind.config.js to map each variable to a utility class like text-xl. With Tailwind v4, you can use @theme to reference CSS variables directly as design tokens.
What is the Golden Ratio in typography?↓
The Golden Ratio (approximately 1.618) is a mathematical proportion found throughout nature and art. In typography, using it as a scale ratio means each font size is 1.618× the previous one. This creates a dramatic, high-contrast scale with large jumps between sizes, well suited to editorial layouts, landing pages, and display typography where heading hierarchy needs to be very clear.
Last updated: