What is a modular type scale?
A modular type scale picks a single ratio and multiplies your base font size by it to produce each step upward, and divides to produce each step downward. The result is a harmonious hierarchy where every size relates to every other.
With a base of 16px and a Perfect Fourth ratio (1.333):
| Step | Calculation | Size | Name |
|---|---|---|---|
| −2 | 16 ÷ 1.333² | 9.003px | xs |
| −1 | 16 ÷ 1.333 | 12.003px | sm |
| 0 | 16 | 16px | base |
| +1 | 16 × 1.333 | 21.328px | lg |
| +2 | 16 × 1.333² | 28.430px | xl |
| +3 | 16 × 1.333³ | 37.897px | 2xl |
Choosing a ratio
| Name | Ratio | Character |
|---|---|---|
| Minor Second | 1.067 | Very subtle. Good for mono-weight UIs |
| Major Second | 1.125 | Tight. Data tables, dense layouts |
| Minor Third | 1.200 | Comfortable. General purpose |
| Major Third | 1.250 | Slightly dramatic |
| Perfect Fourth | 1.333 | Most popular for web |
| Augmented Fourth | 1.414 | Striking. Good for editorial |
| Perfect Fifth | 1.500 | Bold hierarchy |
| Golden Ratio | 1.618 | Maximum drama. Display/marketing |
Start with Perfect Fourth. If you find the contrast between steps too large, go one smaller.
CSS custom properties output
The generator produces a :root { } block:
:root {
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.333rem;
--font-size-xl: 1.777rem;
--font-size-2xl: 2.369rem;
}Reference them anywhere: font-size: var(--font-size-lg).
Tailwind fontSize config
Copy the Tailwind output into your tailwind.config.js under theme.extend.fontSize:
fontSize: {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.333rem",
"xl": "1.777rem",
}This replaces or augments Tailwind’s default text-xs, text-sm, etc. classes with your scale.
Steps up and down
Most body-text UIs need 2–3 steps down (caption, label, small) and 5–6 steps up (body, lead, h4, h3, h2, h1, display). The generator defaults to 2 down / 6 up. Adjust as needed.
rem vs px vs em
- rem — relative to root font size (recommended). Respects user browser preferences.
- px — absolute. Ignores user preferences. Avoid for text.
- em — relative to parent element. Useful for component-scoped typography but can cascade unexpectedly.
Always set root size to match your html { font-size: ... } declaration (default 16px) for the rem conversion to be accurate.