Type Scale Calculator
Build a modular type scale from a base size and ratio, preview each step, and copy CSS custom properties in rem or as fluid clamp() values between two viewports.
The interactive tool loads here when JavaScript runs.
About this toolWhat is the Type Scale Calculator?
A modular type scale picks every font size on a site from one base size and one ratio: body text at the base, each heading one or more steps up by multiplying, captions and small print steps down by dividing. The result is a set of sizes that feel related instead of chosen one at a time. This calculator builds that set. Start from 16 px with a major third (1.25) and you get 20, 25, 31.25, 39.06 and 48.83 px going up, 12.8 and 10.24 px going down.
Pick one of the named ratios, from the subtle minor second (1.067) to the dramatic golden ratio (1.618), or type your own. Every step is listed in px and rem with a live preview in your own text. Switch on the fluid option and set a second base and ratio for wide screens, and each step becomes a CSS clamp() expression that grows smoothly between two viewport widths. The CSS custom properties are ready to copy into a stylesheet.
- Eight named ratios from minor second to golden ratio, or any custom ratio
- Any number of steps up and down, in px and rem with a configurable root
- Live preview of every step in your own text
- Fluid clamp() values from a second base and ratio between two viewport widths
- Copyable CSS custom properties with the pixel range in comments
How to use the Type Scale Calculator
- Enter the base size (usually the body text size) and the root size used for rem.
- Choose a ratio from the named list or enter a custom one.
- Set how many steps up (headings) and down (small text) you want.
- Type a sample phrase to see the preview at every step.
- For a fluid scale, switch on clamp(), set the minimum and maximum viewport widths, and the base size and ratio to reach at the maximum width.
- Copy the CSS custom properties and use them as var(--step-2) and so on.
Worked examples
Major third from 16 px
Input
Base 16 px, ratio 1.25, 5 up, 2 down
Output
48.83, 39.06, 31.25, 25, 20, 16, 12.8, 10.24 px
In rem at a 16 px root these are 3.0518rem down to 0.64rem. The 10.24 px step is too small for body copy and best kept for fine print or dropped.
Perfect fourth from 18 px
Input
Base 18 px, ratio 1.333, 4 up, 1 down
Output
56.83, 42.63, 31.98, 23.99, 18, 13.5 px
A larger base and ratio give an editorial feel; the h1 at 56.8 px is 3.552rem.
Fluid body text
Input
Base 16 px at 360 px viewport, 18 px at 1280 px
Output
--step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)
Text is 16 px on a phone, 18 px on a laptop and grows linearly in between.
Fluid top heading
Input
Step 5: 16 px x 1.25⁵ at 360 px up to 18 px x 1.333⁵ at 1280 px
Output
clamp(3.0518rem, 2.3932rem + 2.9271vw, 4.7348rem)
The heading grows from 48.8 px to 75.8 px, much more than the body text, so the hierarchy opens up on wide screens.
Background and insight
Each size is base x ratio^step, with step 0 as the body size, positive steps for headings and negative steps for smaller text. The interval names come from music, where the same ratios describe the frequency of notes: a perfect fifth is 3:2 (1.5), a perfect fourth 4:3 (1.333), a major third 5:4 (1.25). Tim Brown's 2011 article "More Meaningful Typography" popularised the idea for the web.
Smaller ratios suit dense interfaces with many heading levels, because the steps stay close: a major second (1.125) from 16 px reaches only 25.6 px after four steps. Larger ratios suit editorial pages with a few dramatic headings, but they grow quickly: a golden ratio scale passes 100 px within four steps. Many teams use a smaller ratio on phones and a larger one on desktops, which is what the fluid option does.
The fluid sizes use linear interpolation between two viewport widths. The slope is (max size − min size) / (max viewport − min viewport), and the CSS is clamp(min, intercept + slope x 100vw, max), where intercept = min size − slope x min viewport. Writing the intercept in rem keeps part of the size tied to the reader's font setting, which helps text still respond to zoom and the WCAG resize-text requirement.
Common use cases
Design systems
Define a consistent set of font size tokens and share them as CSS custom properties.
Responsive typography
Generate clamp() sizes that grow with the viewport instead of jumping at breakpoints.
Rebrands and redesigns
Try different ratios on real copy before committing to a heading hierarchy.
Teaching typography
Show how a base size and ratio produce a family of sizes, and how interval names map to numbers.
Tips and limitations
- Round to whole or half pixels in the design file if you like, but keep the CSS values unrounded; browsers handle the decimals.
- Not every step needs to be used. Many sites use four or five sizes from a longer scale.
- Pair the scale with line heights that shrink as size grows: about 1.5 for body text, 1.1 to 1.25 for large headings.
- Keep the smallest text at or above about 12 px; below that, legibility suffers on most screens.
- Test fluid sizes at 200% zoom. A clamp() with a large vw part may not grow enough when only the font setting changes.
Frequently asked questions
What is a modular type scale?
A set of font sizes made by repeatedly multiplying a base size by a fixed ratio. With 16 px and a 1.25 ratio, the sizes are 16, 20, 25, 31.25 px and so on, which gives headings a consistent relationship to body text.
Which type scale ratio should I use?
For dense interfaces and dashboards, 1.125 to 1.2 keeps headings close together. For blogs and marketing pages, 1.25 to 1.333 gives clear hierarchy. Ratios of 1.5 and above suit pages with only a couple of large headings.
What is the major third type scale?
A scale with a ratio of 1.25, named after the musical interval 5:4. From 16 px it gives 20, 25, 31.25, 39.06 and 48.83 px going up.
How do I make font sizes fluid with clamp()?
Choose a size at a small and a large viewport, then interpolate: slope = (max − min) / (max viewport − min viewport), intercept = min − slope x min viewport. The CSS is clamp(min, intercept + slope x 100vw, max), with the intercept in rem.
Should type scale sizes be in rem or px?
Use rem in CSS so text follows the reader's browser font setting. Design tools work in px, so the calculator shows both.
How many sizes should a type scale have?
Most sites need five to seven: one or two below body text for captions and labels, the body size, and three or four heading sizes. Generating a longer scale and using only some steps is common.
Is there an in-depth guide to the Type Scale Calculator?
Yes. “Modular Type Scales: Picking a Ratio and Making It Fluid” covers the background, how it works, common pitfalls and worked examples. Read the full guide.
Related Tools You May Like
Free, in-browser tools that pair well with this one.