Modular Type Scale — The Math Behind Every Design System’s Font Sizes

You’ve stared at the mockup. The font sizes are 14px, 16px, 18px, 24px, 32px, 48px. Nothing looks wrong, exactly — and yet something feels slightly off. The jumps between sizes don’t feel even. The heading is too close to the subheading. The small label feels disconnected from the body text. You’ve been picking numbers that look round and reasonable, and you’ve been wondering why the result feels a little arbitrary. It is arbitrary. That’s the problem.

Turns out human perception of size differences is roughly logarithmic. We don’t perceive the difference between 16px and 32px as “double” — we perceive it as one step. To create typography that feels proportionally consistent, the gaps between your sizes need to follow a ratio, not an arithmetic sequence. That’s the idea behind a modular scale.

What a Modular Scale Actually Is

A modular scale is a sequence of numbers built by multiplying a base value by a fixed ratio repeatedly. The formula is:

size = base × ratio^n

Où n is the step number (0 for base, positive for larger, negative for smaller). With a base of 16px and a ratio of 1.25 (the major third), you get:

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px (base)
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

Every step up is exactly 25% larger than the previous one. The visual jumps feel consistent because they are consistent — geometrically. Compare that to 14, 16, 18, 24, 32, 48, where the jumps are +2, +2, +6, +8, +16. Wildly inconsistent spacing dressed up as round numbers.

The Named Ratios (and When Each One Makes Sense)

The names come from Western music intervals, which follow the same mathematical relationships. Here’s the practical lineup:

• 1.067 — Minor Second: Very tight. Steps are barely distinguishable. Useful for fine-grained body text spacing within a single component, not for heading hierarchies.
• 1.125 — Major Second: Subtle. Good for dense UI where you need distinctions without drama — think data tables, dashboards.
• 1.25 — Major Third: The sweet spot for most web UI. Enough contrast between levels to read the hierarchy clearly without headings looking oversized. Most popular in design systems.
• 1.333 — Perfect Fourth: Clean and widely used. Gives headings a bit more authority. Works well when you want clear typographic hierarchy with fewer steps.
• 1.414 — Augmented Fourth (√2): Also the aspect ratio of A4 paper. More dramatic than the perfect fourth, good for editorial content.
• 1.5 — Perfect Fifth: Strong contrast between levels. Headers feel large and bold. Works for editorial layouts, landing pages, anything where display text needs to make a statement.
• 1.618 — Golden Ratio: Beautiful in theory, aggressive in practice. Two steps up from body text and your heading is already enormous. Use it for display-only elements, not full UI hierarchies.

For a frontend developer building a product UI, major third (1.25) or perfect fourth (1.333) covers almost every case. If you’re unsure, start with 1.25. You can always increase the ratio if the hierarchy feels too flat.

The Scale in Practice: Major Third from 16px

Here’s what a full major third scale (ratio = 1.25, base = 16px) looks like across seven steps:

Étape	Multiplicateur	px value	rem value
xs	1.25^-2	10.24px	0.64rem
sm	1.25^-1	12.8px	0.8rem
base	1.25^0	16px	1rem
lg	1.25^1	20px	1.25rem
xl	1.25^2	25px	1.5625rem
2xl	1.25^3	31.25px	1.953rem
3xl	1.25^4	39.06px	2.441rem

A note on the decimal values: 12.8px et 31.25px are perfectly fine to keep exact in rem — browsers handle sub-pixel rendering correctly. You don’t need to round to 13px ou 31px and break the mathematical consistency. Keep the math clean; let the browser do its job.

CSS Custom Properties: Your Design Token System

Translate the scale directly into CSS custom properties. This gives you a design token system that’s easy to consume anywhere in your codebase — and easy to swap out later if you change the ratio:

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

Then use them like any design token:

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

The advantage over hardcoded values: when a designer decides the ratio should be 1.333 instead of 1.25, you update seven numbers in one place. Every component updates automatically. Design systems that skip this step end up with fifty different font-size values scattered across component files — and every developer on the team adding their own. Devs and design tokens have a complicated relationship, but this is the version of it that actually works.

If you don’t want to calculate the values by hand, the Font Modular Scale Generator lets you pick a base size and ratio and outputs the full scale instantly — with CSS custom properties ready to copy.

When to Break the Scale

Scales are tools, not laws. Here’s when to deviate intentionally:

Display headings need a separate treatment

Most design systems use two scales: a tighter ratio (1.25 or 1.333) for body text and UI components, and a more dramatic one (1.5 or 1.618) for display headings. The hero headline on a marketing page doesn’t need to follow the same progression as a label inside a form. Tailwind’s default scale does exactly this — tighter steps at small sizes, larger jumps at display sizes.

Fluid typography smooths the transitions

On a mobile viewport, a ratio of 1.5 that looked great on desktop will produce headings that are either too small or too large. The modern answer is clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

This keeps the modular scale values as your min and max anchors, but lets the size scale fluidly between them based on viewport width. The modular scale defines the range; clamp() handles the transitions. The math stays consistent, the output stays readable across device sizes.

Contextual overrides are fine

If your h2 inside a sidebar feels too large at 1.953rem, dropping it to 1.5625rem in that context is a legitimate choice. The scale gives you a coherent default, not an immutable rule. The goal is visual harmony, not mathematical purity. Break the scale when the context demands it — but break it consciously, not because you grabbed a round number.

Putting It Together

Pick a base size (usually 16px), pick a ratio that matches the visual weight you need (1.25 for UI, 1.333 for something with a bit more presence, 1.5 for editorial), generate the scale, and write it as CSS custom properties. Done. Your font sizes now have a mathematical relationship instead of an arbitrary one, and any designer who looks at your code will understand the system immediately.

Le Font Modular Scale Generator on IO Tools lets you configure base size, ratio, and number of steps — and gives you the CSS ready to copy. Try adjusting the ratio from 1.25 to 1.333 and see how quickly the heading sizes shift. That’s the intuition worth building: understanding what each ratio feels like before committing it to a design system.

Vous aimerez peut-être aussi