A modular scale is a sequence of font sizes built by repeatedly multiplying a base size by a fixed ratio, so every step shares the same proportion and the typography feels coherent. This generator outputs the full scale in both px and rem, for designers and front-end developers setting up a type system.
How it works
Step 0 is the base size; each step is the base multiplied by the ratio raised to the step number:
size at step n = base × ratio to the power n
Positive steps grow larger, negative steps shrink below the base. The rem value is each size divided by the base. Pick a base, choose a named ratio (minor second 1.067 through the golden ratio 1.618), and set how many steps up and down you need.
Worked example — major third at 16px
With a 16px base and the major third ratio (1.25):
| Step | Calculation | px | rem | Typical use |
|---|---|---|---|---|
| 3 | 16 × 1.25³ | 31.25 | 1.953 | H1 |
| 2 | 16 × 1.25² | 25 | 1.5625 | H2 |
| 1 | 16 × 1.25¹ | 20 | 1.25 | H3 / lead text |
| 0 | 16 × 1.25⁰ | 16 | 1 | Body (base) |
| -1 | 16 ÷ 1.25 | 12.8 | 0.8 | Caption / label |
The jump from step 0 to step 3 gives a headline roughly twice the base — visually distinct without being jarring. Smaller ratios like 1.2 keep sizes closer together (good for dense UIs), while larger ratios like 1.618 create bolder contrast (good for editorial pages with clear hierarchy).
Choosing the right ratio
| Ratio name | Value | Character |
|---|---|---|
| Minor second | 1.067 | Very subtle — tight, information-dense layouts |
| Major second | 1.125 | Compact — forms, tables, dashboards |
| Minor third | 1.2 | Moderate — general-purpose web apps |
| Major third | 1.25 | Common default — balanced contrast |
| Perfect fourth | 1.333 | Noticeable hierarchy — marketing sites |
| Golden ratio | 1.618 | Dramatic — editorial, portfolios |
Larger ratios mean fewer steps fit between body text and a usable smallest size. If you use 1.618 and need six heading levels, the top levels quickly become impractically large. Major third (1.25) or perfect fourth (1.333) are the most-used choices for typical web projects.
Applying the scale in CSS
The most maintainable approach is to define the scale as CSS custom properties, then assign semantic names:
:root {
--text-xs: 0.8rem; /* step -1 */
--text-sm: 1rem; /* step 0 (base) */
--text-md: 1.25rem; /* step 1 */
--text-lg: 1.5625rem;/* step 2 */
--text-xl: 1.953rem; /* step 3 */
--text-2xl: 2.441rem; /* step 4 */
}Components use the semantic names (var(--text-lg)) rather than raw pixel values, so swapping to a different ratio or base only requires updating the root block.
The full scale is generated instantly, all in your browser.