liveBook · Manning

Modular scale

As explained in Math for Web Design

A modular scale is a sequence of related sizes generated by applying a consistent ratio to establish typographic hierarchy.

A page can use sensible font sizes and still feel uneven: body copy, headings, captions, and labels may have been picked independently or separated by fixed pixel jumps. A modular scale gives those sizes a shared relationship. Starting from one base size, apply the same ratio at every step so the type hierarchy has a deliberate rhythm rather than arbitrary values. section 8.3 section 8.0

The calculation is simple: Sₙ = B × Fⁿ. B is the base size, F is the scaling factor or ratio, and n is the step number. Step 0 is the base; positive steps grow above it and negative steps shrink below it. For a 20px base and a 1.5 ratio, the sequence includes 8.89px, 13.33px, 20px, 30px, 45px, and 67.5px. section 8.3.1 section 8.3.1

Sn = B * Fn

Use the formula to calculate any scale step from a base size, ratio, and step number. section 8.3.1

Choose the ratio for the amount of contrast the hierarchy needs. Ratios up to 1.2 make subtle changes. Ratios from above 1.2 through 1.5 favor readability, while ratios above 1.5 through 1.75 create more dramatic jumps. There is no single correct choice: smaller ratios make neighboring sizes closer, and larger ones make headings more emphatic. section 8.3.2

Table 8.4 Traditional modular scale ratios based on ideas in math and music

Name

Ratio

Example scales (base = 20px)

Minor third

1.125

15.8px 17.78px 20px 22.5px 25.31px 28.48px

Major third

1.2

13.89px 16.67px 20px 24px 28.8px 34.56px

Perfect fourth

1.25

12.8px 16px 20px 25px 31.25px 39.06px

Augmented fourth

1.33

11.31px 15.04px 20px 26.6px 35.38px 47.05px

Square root of two

1.414

10px 14.14px 20px 28.28px 39.99px 56.54px

Minor sixth

1.6

7.81px 12.5px 20px 32px 51.2px 81.92px

Golden ratio

1.618

7.64px 12.36px 20px 32.36px 52.36px 84.72px

Major sixth

1.67

7.17px 11.98px 20px 33.4px 55.78px 93.15px

Octave

2

5px 10px 20px 40px 80px 160px

Compare traditional ratios and the size sequences they generate from a 20px base. section 8.3.2

Define a scale once with CSS custom properties

A base of 1.25rem and a 1.618 ratio creates a bold scale. Store both values in custom properties. Divide by the ratio for smaller steps; multiply the previous step for larger ones, because CSS has no exponentiation operator. Assign the resulting variables to headings, paragraphs, and smaller text. Changing --base or --ratio then updates all related sizes together. section 8.3.3 section 8.5

A modular scale organizes font size, not every part of readability by itself. Pair it with suitable line height, line length, and responsive sizing constraints. CSS custom properties and calc() make the scale easier to adjust, while clamp() can constrain fluid type sizes across screen widths. section 8.5

How Math for Web Design covers it

How deep it goes
Derives scale steps with an exponential formula, ratio guidance, and CSS variable implementation.
Examples
Calculates 20px scales at 1.5 and compares traditional ratios, then implements a 1.25rem golden-ratio scale.
What it assumes
Uses only a base size, a ratio, multiplication, division, and basic CSS custom properties.
What you can do after
Build it from scratch by selecting a base and ratio, calculating steps, and assigning CSS variables to type elements.
How it connects
Connects typography with font size, line height, line length, CSS custom properties, calc(), and clamp().
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.