Modular Type Scale: Practical Size Ratios for the Web

A type scale is a small set of intentional size relationships. It helps headings and supporting text feel related without requiring every decision to be made from scratch. A modular scale generates those relationships by repeatedly multiplying a base size by a ratio. The arithmetic is easy; deciding which results actually serve the content takes more care.

Choose a base that serves the body

Begin with your most common reading task. If article paragraphs feel comfortable at 18px in the selected font, use that as the trial base. If the product primarily contains short interface text, test its dominant content before borrowing an editorial value. The base size is a reading decision, not the smallest number in a spreadsheet.

Use the px-to-rem converter to translate the chosen base and calculated steps into rem values. With a 16px reference root, 18px becomes 1.125rem. Keep the root responsive to reader preferences rather than setting a tiny root merely to simplify arithmetic.

Collect actual content for at least five roles: body, small supporting text, section heading, page heading, and a large promotional heading. The scale should support those roles without forcing you to invent unnecessary intermediate sizes.

Calculate a few candidate ratios

A ratio of 1.2 produces gentler differences than 1.333. Starting from 18px, multiplying by 1.25 gives 22.5px, 28.125px, and approximately 35.16px. Dividing the base by the same ratio produces 14.4px. These are relationships, not instructions to use every resulting value.

Compare small, medium, and strong contrast with your longest headings. A strong ratio may feel decisive in a spacious article but create unwieldy multi-line titles in a narrow product panel. A restrained ratio can work well in dense content, provided weight and spacing preserve a visible hierarchy.

The MDN font-size reference is useful when choosing the units that carry these values into CSS. Relative units express relationships to user settings more naturally than locking every role to an absolute pixel size.

Round where rounding improves maintainability, but do it consciously. Changing 28.125px to 28px is usually a modest visual adjustment. Rounding every step to a favorite spacing increment can distort the ratio enough that the supposed modular relationship no longer explains the result.

Turn the arithmetic into usable CSS

Keep an initial implementation small. Give sizes names that describe their position, then assign them to content roles. This makes it easier to change a heading's role without rewriting the underlying arithmetic everywhere.

:root {
--type-small: 0.9rem;
--type-body: 1.125rem;
--type-step-1: 1.40625rem;
--type-step-2: 1.7578125rem;
--type-step-3: 2.197265625rem;
}
.prose { font-size: var(--type-body); line-height: 1.6; }
.prose h2 { font-size: var(--type-step-2); line-height: 1.2; }
.page-title { font-size: var(--type-step-3); line-height: 1.1; }

These values illustrate a 1.25 relationship around the base. The smaller step is not automatically appropriate for legal text or essential instructions. Small text still needs to be readable in its actual family and context.

The design tokens introduction explains how reusable values fit a broader system. For this exercise, avoid expanding into a large token architecture before the typography itself has been proven with real content.

Assign hierarchy beyond font size

A scale cannot carry hierarchy alone. Two adjacent sizes may appear nearly identical when both are bold, while equal sizes can feel different through weight, placement, and spacing. Use multiple coordinated cues, but keep each cue purposeful.

Give section headings more space before than after when that helps readers associate them with the following text. Check that a heading near a list or quotation still reads as a section boundary. Do not create a new size every time an arrangement feels weak; first inspect spacing and weight.

Semantic heading levels do not require a rigid visual ladder. A deeply nested heading may share a size with body text and use weight to distinguish it. Conversely, a page title can be visually prominent without changing the logical document outline. The W3C headings tutorial explains why structural relationships matter independently of appearance.

Review the whole page in grayscale. If the hierarchy disappears without decorative color, strengthen the typographic relationships before adding more color treatments. A modest set of sizes is easier to learn than a page containing a different size for every component.

Stress-test and make deliberate exceptions

Create a specimen containing your shortest and longest realistic titles. Add numbers, accented names, and a heading that wraps to three lines. Check small screens, text enlargement, and a dense page with several consecutive sections. Wrapping behavior often exposes an oversized top step more clearly than an isolated type sample.

You do not need to preserve one ratio at every breakpoint. A compact title can use a lower step on narrow screens while the body remains stable. That is a role adjustment, not a failure of the system. Avoid reducing every size proportionally if it makes the main reading text too small.

When an exception is needed, write down its reason. A data-heavy panel may require a compact heading, while a long editorial title may need a capped size. If exceptions become the majority, revisit the base or ratio rather than adding more overrides.

Finally, compare the scale after the real font is installed and the editorial team has entered real copy. Keep a specimen with your typography resources so future changes can be reviewed against the same material. A successful scale is predictable in use, even if its final values are not mathematically perfect.

Compare ratios in a fixed specimen

Set up two copies of the same article excerpt with an 18px body. A 1.2 ratio produces trial headings around 21.6px, 25.9px, and 31.1px; a 1.25 ratio produces 22.5px, 28.1px, and 35.2px. Hold the family, weight, container width, and copy constant so the comparison isolates size relationships.

Inspect a narrow column and a wide one. Count title lines, but also check whether the heading visually overwhelms the opening paragraph and whether successive sections remain distinguishable. A ratio that looks elegant with short specimen labels may consume excessive space with real editorial titles.

Choose roles from the stronger specimen rather than mixing whichever individual values look attractive. Then adjust one exception at a time and record its purpose. If only the page title needs restraint, cap that role instead of shrinking the body or rebuilding every step. This preserves a coherent hierarchy while acknowledging the layout's actual constraints.

Key takeaways

• Start with a comfortable body size and representative content.
• Use a ratio to generate options, not mandatory component sizes.
• Convert and round values with their reading context in mind.
• Combine size with weight, spacing, and structural meaning.
• Prefer a small, tested scale over mathematical purity.