A type scale multiplies a base font size by one ratio again and again, so every heading size relates to the body text. Pick a base and ratio for phones and another for desktops; this generator turns each step into a clamp() value in rem and vw that grows smoothly between the two widths.
| Ratio | Value | Feel |
|---|---|---|
| Minor second | 1.067 | Dense apps, dashboards |
| Major second | 1.125 | Dense apps, dashboards |
| Minor third | 1.2 | Articles, marketing pages |
| Major third | 1.25 | Articles, marketing pages |
| Perfect fourth | 1.333 | Articles, marketing pages |
| Augmented fourth | 1.414 | Posters, bold landing pages |
| Perfect fifth | 1.5 | Posters, bold landing pages |
| Golden ratio | 1.618 | Posters, bold landing pages |
Updated
Most type scale tools give one fixed set of sizes. This one gives two, a small-screen scale and a large-screen scale, and joins them with clamp() so you ship a single rule per step instead of a pile of media queries.
Set a base size and ratio for a small screen and for a wide screen. Every step gets a clamp() value that grows smoothly between the two widths, plus a live preview and CSS you can copy.
A worked example: base 16px at 375px rising to 18px at 1280px, ratio 1.2 rising to 1.25.
Each step is one clamp(). Apply them to elements, or to utility classes, and line height per step.
:root {
--step-3: clamp(1.728rem, 1.5336rem + 0.8296vw, 2.1973rem);
--step-2: clamp(1.44rem, 1.3083rem + 0.5619vw, 1.7578rem);
--step-1: clamp(1.2rem, 1.1145rem + 0.3646vw, 1.4063rem);
--step-0: clamp(1rem, 0.9482rem + 0.221vw, 1.125rem);
}
h1 { font-size: var(--step-3); line-height: 1.15; }
h2 { font-size: var(--step-2); line-height: 1.2; }
h3 { font-size: var(--step-1); line-height: 1.3; }
body { font-size: var(--step-0); line-height: 1.55; }The same variables in a small page. Edit the code to try other values; the frame is narrow, so you see the small-screen end.
<style>
:root { --step-2: clamp(1.44rem, 1.3083rem + 0.5619vw, 1.7578rem); --step-1: clamp(1.2rem, 1.1145rem + 0.3646vw, 1.4063rem); }
h2 { font-size: var(--step-2); margin: 0 0 4px; line-height: 1.2; }
h3 { font-size: var(--step-1); margin: 0 0 4px; line-height: 1.3; }
</style>
<h2>Fresh bread every morning</h2>
<h3>Order by 8pm for next-day pickup</h3>
<p>Body text sits at the base step and the headings grow from it.</p>The musical names come from the frequency ratios of intervals; each value here is the exact fraction rounded to three places.
| Name | Fraction | Value | Five steps above 16px |
|---|---|---|---|
| Minor second | 16:15 | 1.067 | 22.093px |
| Major second | 9:8 | 1.125 | 28.833px |
| Minor third | 6:5 | 1.2 | 39.813px |
| Major third | 5:4 | 1.25 | 48.828px |
| Perfect fourth | 4:3 | 1.333 | 67.424px |
| Augmented fourth | 1:√2 | 1.414 | 90.51px |
| Perfect fifth | 3:2 | 1.5 | 121.5px |
| Golden ratio | 1:1.618 | 1.618 | 177.443px |
A ratio that looks generous on a 1440 pixel monitor makes headings wrap into four lines on a phone. Using a tighter ratio on small screens, such as 1.2, and a wider one on large screens, such as 1.25 or 1.333, keeps headlines strong on desktop and readable on mobile.
Steps below zero work the same way in reverse: the base is divided by the ratio, which gives caption and fine-print sizes that stay in proportion.
For each step the tool knows the size at the small width and at the large width. It draws a straight line between those two points: the slope becomes the vw part and the starting offset becomes the rem part of the preferred value.
clamp(min, preferred, max) then holds the size at the minimum below the small width and at the maximum above the large width. Mixing rem into the preferred value matters: a pure vw size ignores browser zoom, while the rem part still grows when someone zooms in.
MDN advises that when clamp() sets text size, the maximum should be at least twice the minimum so text can reach 200 percent zoom, the WCAG 1.4.4 resize level. A modest fluid range will not meet that by itself, so test your largest steps with browser zoom at 200 percent.
For text-heavy sites, 1.2 (minor third) or 1.25 (major third) are safe choices. 1.333 (perfect fourth) suits marketing pages with short, bold headings. Ratios at 1.5 or above make big jumps that work for posters but quickly produce huge headings.
At about 1.618 it is very steep: five steps above 16px already exceed 170px. It can work for a two or three step display scale, but most interfaces read better with a smaller ratio.
Text sized only in vw does not respond to the browser's text zoom, which fails people who enlarge text. The rem part in the preferred value keeps zoom working while vw handles the smooth growth between widths.
Yes. Tailwind v4 creates a text-* utility from each --text-* variable inside an @theme block, so pasting the Tailwind output gives you classes such as text-step-2 in your markup.
Related: PX to rem converter, Font pairing tool, Web font loading.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.