---
name: Modular scale
slug: modular-scale
category: typography
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A type scale generated by multiplying a base size by a fixed ratio,
  so every step is proportionally related to the one before it.
aliases:
  - name: ratio-based type scale
  - name: major third scale
  - name: perfect fourth scale
tags:
  - spacing
  - tokens
relations:
  contrastWith:
    - golden-ratio
    - type-scale
    - fluid-typography
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources:
  - title: What the Font are Vertical Rhythm and Modular Scale?
    url: https://www.bounteous.com/insights/2018/03/26/what-font-are-vertical-rhythm-and-modular-scale/
demo: inline
exhibit: false
useWhen: generating sizes from a ratio instead of picking them
---

A modular scale is a base size and a multiplier. Pick 16 px and 1.25 and the
steps write themselves: 20, 25, 31.25, 39.06, with the same ratio between any
two neighbours all the way up and, going the other way, all the way down. The
argument for generating a [type scale](/type-scale) this way rather than
choosing sizes by eye is that the relationships hold at every step, so a heading
two ranks above body sits the same distance above it everywhere in the product,
and nobody has to defend 22 against 23 in a review.

The ratios are borrowed from musical intervals, which is where the names come
from: 1.125 is a major second, 1.2 a minor third, 1.25 a major third, 1.333 a
perfect fourth, 1.5 a perfect fifth, and 1.618 the golden ratio. The number is
not a matter of taste alone, it is a function of how much text there is. A dense
interface, a table, a dashboard, or anything with four ranks to fit into a small
window wants a tight ratio, because a wide one runs out of room by the third
step. An editorial page with body text and one big headline can carry a fifth
and will look timid without it. A useful check is to write out four steps in
both directions and ask whether the largest is usable on a phone and the
smallest is still readable.

Two practical cautions. The generated numbers are not sacred: rounding 39.06 to
40 costs nothing, and a scale is a starting point rather than a contract, so
break a step when the content needs it and keep the rest. And a scale that
travels between screen sizes usually wants its ratio to travel too, either by
swapping ratios at a [breakpoint](/breakpoint) or by interpolating between them
with [fluid typography](/fluid-typography), since a ratio that reads as
confident on a desktop is shouting on a handset. Once the steps are settled they
belong in tokens, not in components, so the scale is a decision the system made
once.