The short version
- A type scale is a short set of font sizes made by multiplying a base size by the same ratio again and again.
- Small ratios such as 1.2 suit dense interfaces, while large ratios such as 1.5 suit posters, social posts and landing pages.
- With a 16 px base and a 1.25 ratio, the scale runs 16, 20, 25, 31, 39 and 49 px.
- Most designs need only five or six sizes, and rounding the results to whole pixels is fine.
- In CSS, a type scale is easiest to maintain as custom properties, made fluid with clamp().
On this page
A type scale is a set of font sizes built from one base size and one ratio. You start with your body size, say 16 px, and multiply it by the ratio to get the next size up, then multiply again for the next. With a ratio of 1.25 you get 16, 20, 25, 31, 39 and 49 px. Because each step grows by the same proportion, the sizes look related, and choosing a heading size stops being a guess.
Why a type scale makes sizes look related
The eye reads size as proportion, not as pixels. The jump from 16 to 20 feels the same as the jump from 39 to 49, because both are a quarter bigger. Sizes picked by feel tend to bunch together in some places and leave gaps in others, so two headings end up almost the same size and look like a mistake. A scale gives every level a clear, consistent step, which is the backbone of visual hierarchy.
Common type scale ratios compared
Many popular ratios borrow their names from musical intervals, and a scale built this way is often called a modular scale. The name matters less than the size of the step: the bigger the ratio, the more drama between levels and the fewer levels fit on a page.
Ratio
Feel
Good for
Ratio
Feel
Good for
Ratio
Feel
Good for
Ratio
Feel
Good for
Ratio
Feel
Good for
Ratio
Feel
Good for
Ratio
Feel
Good for
Ratio
Feel
Good for
Type scale values in pixels
Here is the same 16 px base run through four ratios. Notice how fast the large ratios climb: by step 4, a 1.5 scale is already at 81 px, while a 1.2 scale is at 33 px.
1.2
1.25
1.333
1.5
1.2
1.25
1.333
1.5
1.25
1.333
1.5
1.25
1.333
1.5
1.25
1.333
1.5
1.25
1.333
1.5
1.25
1.333
1.5
Rounding is fine. Nobody can see the difference between 31.25 and 31 px, and whole numbers are easier to remember and to line up on a grid.
How to build your own type scale
- 1
Choose the base size
This is your body text. 16 to 18 px suits most websites; on a 1080 px social canvas, start at 40 px.
- 2
Pick a ratio from the content
Lots of text and many heading levels want a small ratio. Few words and one big headline want a large one.
- 3
Generate five or six steps
Multiply up for headings and divide once for small text. Most designs never use more than six sizes.
- 4
Round and name them
Round to whole pixels and name the steps by role, such as caption, body, title and display, not by number.
- 5
Set line height per step
Bigger sizes need tighter leading. Body around 1.5, titles around 1.2, display type near 1.0.
- 6
Test with real words
Set a real headline, subheading and paragraph. If two steps look too similar, skip one or raise the ratio.
A type scale for social posts
Social posts need a bigger ratio than web pages, because a 1080 px canvas shrinks to a third of its width on a phone and there are only two or three levels of text. A 40 px base with a 1.5 ratio gives 40, 60, 90 and 135 px, which lines up neatly with the sizes in font size for Instagram posts.
A stat post needs three clear levels: the figure, the detail and the label. On a 1.5 scale those are 135, 60 and 40 px.
A list slide uses the lower steps of the same scale, so it sits comfortably beside the stat slide in one carousel.
Using one scale across every slide of a carousel is what makes a set look designed rather than assembled. The same sizes in the same roles, slide after slide. Text layout for social media posts shows how to arrange them.
How to write a type scale in CSS
Store the scale as custom properties so every component pulls from it. You can chain multiplications with calc(), or write the rounded values out. For a scale that grows with the screen, give each step a clamp() range: a minimum for phones, a maximum for wide screens and a fluid value between.
/* A 1.25 scale from a 1rem (16px) base */
:root {
--ratio: 1.25;
--step-0: 1rem;
--step--1: calc(var(--step-0) / var(--ratio));
--step-1: calc(var(--step-0) * var(--ratio));
--step-2: calc(var(--step-1) * var(--ratio));
--step-3: calc(var(--step-2) * var(--ratio));
--step-4: calc(var(--step-3) * var(--ratio));
--step-5: calc(var(--step-4) * var(--ratio));
}
/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }--ratio once and every step updates. Keep rem in the minimum of each clamp so text still respects the reader's own font size setting.Avoid
- Ten sizes when five would do
- Two headings 2 px apart
- The same ratio for a dashboard and a poster
- Fixed pixel sizes that ignore the reader's font settings
Do
- Five or six steps, each with a named role
- Skip a step if two levels look alike
- Small ratio for dense screens, large for few words
- rem based sizes, fluid with clamp()
A scale is one part of a larger set of decisions about fonts, spacing and roles. Typography system brings them together, and tracking vs kerning covers the spacing values that pair with each step. If you design social content, Gradiently's brand kit holds your heading and body fonts and the Designer applies them to every new size, which makes a scale you settle on once easy to keep.
Questions people ask
What is a type scale?
A set of font sizes made by multiplying a base size by the same ratio repeatedly, so every size is proportionally related to the others.
What is the best type scale ratio?
There is no single best one. 1.2 or 1.25 suits websites and apps with lots of text; 1.5 or more suits posters and social posts with few words.
How many font sizes should a design use?
Usually five or six: a small size, body, two or three heading levels and one display size.
Should I round type scale values?
Yes. Rounding to whole pixels makes no visible difference and makes the scale easier to use and remember.
How do I make a type scale responsive in CSS?
Use clamp() for each step, with a minimum in rem, a fluid middle value using viewport units, and a maximum for wide screens.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile