Type Scale Calculator: Build a Modular Scale and Fluid CSS Font Sizes
This type scale calculator multiplies a base font size by a fixed ratio to produce a set of heading sizes that belong together. Choose a ratio from the gentle minor second to the steep golden ratio, read the results in pixels and rem, and copy fluid clamp() values that grow smoothly between a phone and a wide desktop screen.
Generate a type scale
CSS custom properties, fluid from 360 to 1280 px ↓
What a type scale calculator does
A type scale calculator starts with two numbers: a base size and a ratio. It multiplies the base by the ratio to get the next size up, then multiplies that result again, and so on. A 16 pixel base with a ratio of 1.25 gives 20, 25, 31.25 and about 39 pixels. Those numbers become your headings.
The point is restraint. Without a system, a site quietly gathers 15, 17, 22 and 23 pixel sizes, each picked by eye on a different afternoon. A scale cuts that down to five or six values that share one proportion. Hierarchy becomes obvious, and anyone joining the project later can see which size a new heading should take.
Printers worked this way long before screens. Metal type came in fixed sizes, roughly 6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 36, 48 and 72 points, because every size meant cutting and casting a new set of letters. The small steps at the bottom and the big leaps at the top are still a good model.
The modular scale ratios, from minor second to golden
A modular scale names its ratios after musical intervals. The gentlest common one is the minor second, 1.067, followed by the major second at 1.125, the minor third at 1.2 and the major third at 1.25. Steeper choices include the perfect fourth, 1.333, the augmented fourth at 1.414, the perfect fifth at 1.5 and the golden ratio, 1.618.
| Ratio name | Value | Sizes from 16 px |
|---|---|---|
| Minor second | 1.067 | 16, 17.1, 18.2, 19.4 |
| Major second | 1.125 | 16, 18, 20.3, 22.8 |
| Minor third | 1.2 | 16, 19.2, 23, 27.6 |
| Major third | 1.25 | 16, 20, 25, 31.3 |
| Perfect fourth | 1.333 | 16, 21.3, 28.4, 37.9 |
| Augmented fourth | 1.414 | 16, 22.6, 32, 45.3 |
| Perfect fifth | 1.5 | 16, 24, 36, 54 |
| Golden ratio | 1.618 | 16, 25.9, 41.9, 67.8 |
Here is the digression. The names come from just intonation, where a minor second is 16:15, about 1.067. A piano tuned in equal temperament plays its semitone at about 1.059 instead, so the type world kept the older, purer value. Web designer Tim Brown popularised the musical vocabulary in a 2011 essay, and it has stuck ever since.
Choosing a modular scale for the content
Long reading pages need many levels, so they suit gentle ratios. With 1.2, the fifth step above 16 pixels is still under 40, which leaves space for an H2, an H3, a pull quote and a page title without a heading that fills the whole phone screen. Documentation sites and news articles mostly sit in this range.
Short pages can afford drama. A landing page with one headline looks confident at 1.5 or the golden ratio, which the golden ratio calculator explores in more depth. The risk is the gap between body text and the first heading. At 1.618, a 16 pixel paragraph jumps straight to 26 pixels, with nothing in between.
Type scale calculator output in rem units
The type scale calculator shows every size twice: in pixels for reasoning and in rem for code. One rem equals the font size of the root element, and browsers set that to 16 pixels unless the reader changes it. So 1.25rem is 20 pixels by default, and 1.5625rem is 25 pixels on the major third scale.
Rem is the better unit because it respects the reader. Someone with low vision may raise the default font size in browser settings, and every rem-based size grows in proportion. Pixel values ignore that wish. The Web Content Accessibility Guidelines, at success criterion 1.4.4, ask that text can be resized to 200 percent without losing content or function.
Fluid CSS type with clamp()
A fixed scale has one weakness. A 49 pixel headline swamps a phone. The old fix was media queries with a different set of sizes at each breakpoint. CSS clamp() handles it more smoothly, and it has worked in every major browser since spring 2020, so in 2026 there is little reason to avoid it.
The function takes three arguments: a minimum, a preferred value and a maximum. Suppose a heading should be 24 pixels on a 360 pixel phone and 36 on a 1280 pixel screen. The calculator works out the line between those points: clamp(1.5rem, 1.207rem + 1.304vw, 2.25rem). At 360 pixels wide it returns 24, at 1280 it returns 36.
Keeping a rem term in the middle value matters. A preferred size written only in viewport units, such as 3vw, ignores the reader’s font setting and barely responds to browser zoom, which can break the 200 percent resize rule. Mixing rem with vw keeps both behaviours. The W3C’s CSS Values and Units specification defines the arithmetic.
A practical CSS setup for a modular scale
Most teams store the output as custom properties on the root element: —step-0 for body text, —step-1 for small headings, up to —step-5 for the page title. Components then refer to the step, never to a raw number. Change the ratio once and every heading on the site moves together, which is exactly what the system is for.
A sensible routine is to pick two ratios, a smaller one for phones and a larger one for desktops, say 1.2 and 1.25. The type scale calculator generates both scales and writes one clamp() value per step. Body text stays nearly fixed while the title stretches the most, which mirrors how people actually read on each device.
Line height, measure and the rest of the system
Sizes are only one part of a type system. Line height usually shrinks as size grows: about 1.5 for body text, nearer 1.1 or 1.2 for large headings. Line length matters just as much, and 45 to 75 characters per line is the traditional comfortable range for continuous reading in a single column.
The face itself changes how a scale feels. A wide sans with a tall x-height looks larger than a narrow serif at 16 pixels. The font pairing guide suggests combinations that share proportions, and typography basics covers spacing. Once sizes are set, the colour contrast checker confirms that small text still passes.
Questions about type scales
What is a type scale?
A type scale is the fixed set of font sizes a design uses for body text, captions and headings. Instead of choosing each size by eye, you start from a base, often 16 pixels, and multiply by one ratio to get each larger step. The result is fewer sizes, clearer hierarchy and headings that look related to one another.
What is the best type scale for web?
For long articles on the web, a ratio around 1.2 or 1.25 is the usual choice, because it leaves room for four or five heading levels without huge jumps. Landing pages with only one or two headings can use 1.333 or 1.5. On phones, many designers drop to a gentler ratio so a top heading still fits on two lines.
What is the best type scale for mobile?
On a narrow screen, a ratio near 1.125 to 1.2 keeps headings from wrapping into four lines. Fluid type handles the change automatically: the calculator gives a smaller ratio at phone width and a larger one at desktop width, then CSS clamp() blends between the two, so every size grows with the viewport rather than jumping at a breakpoint.
Should font sizes be in px or rem?
Use rem for font sizes in CSS. One rem equals the root font size, which follows the reader's browser setting and defaults to 16 pixels. If someone raises that setting for comfort, every rem-based size grows with it. Pixel sizes ignore the preference, which can fail readers who need larger text and makes zooming less predictable.
How does CSS clamp() work for font size?
The function takes a minimum, a preferred value and a maximum. For type, the preferred value usually mixes rem and viewport width, such as 1.207rem plus 1.304vw. The browser calculates it for the current window, then keeps the result between the minimum and maximum, so the heading never shrinks too far on phones or swells too large on monitors.
Why are modular scale ratios named after musical intervals?
The ratios match the frequency ratios of intervals in just intonation. A perfect fifth is 3:2, or 1.5, and a perfect fourth is 4:3, about 1.333. Designers borrowed the names as handy labels for familiar proportions. There is no evidence that type sized this way is easier to read, but the names stuck because they are memorable.