Type scale generator
Compute a harmonious font size scale (major third, perfect fourth, golden ratio) and fluid sizes with clamp(). Export to CSS, Tailwind and SCSS.
- Free
- No sign-up
- No file uploaded
- Windows, Mac, Android, iPhone
Loading the tool…
About this tool
Build a consistent text hierarchy: base size, musical ratio (from minor second to golden ratio), number of sizes above and below, and an optional fluid typography mode with two scales (mobile and large screen) linked by clamp(). Preview in the font of your choice, export as CSS variables, Tailwind or SCSS.
When to use it
Starting a design system
A scale fixes the allowed sizes (sm, base, lg, xl…): the whole team uses the same ones and pages stay consistent.
Mobile-friendly headings
With fluid typography, a 28 px heading on a phone reaches 48 px on a large screen, with no media query.
Making a site more readable
Replacing arbitrary sizes with a regular scale immediately improves the visual hierarchy.
How to use
- Choose the base size and the scale ratio.
- Turn on fluid typography for sizes that follow the screen.
- Copy the CSS variables, Tailwind config or SCSS.
How it works
Each size equals base × ratio^n, with n going from the smaller sizes (sm, xs) to the larger ones (lg, xl, 2xl…). Names follow Tailwind CSS.
In fluid mode, two scales are computed (mobile and large screen). For each size, the tool finds the line through the mobile size at the minimum width and the large size at the maximum width, and writes it as clamp(min, a rem + b vw, max).
Tips for best results
- A smaller ratio on mobile and a larger one on desktop avoids oversized headings on phones.
- Keep body text at 16 px minimum; 17 or 18 px is more comfortable for long articles.
- Limit yourself to 5 or 6 sizes actually used.
- Adjust line height: tighter for big headings (1.1 to 1.2), looser for body text (1.5 to 1.7).
Common problems and fixes
Headings are huge on desktop
The ratio is too large: choose a third or a fourth, or reduce the number of sizes.
The fluid size doesn't change
Make sure the page isn't zoomed and the screen width is between the two chosen limits.
Values have many decimals
That's normal for a scale: rounding changes the proportion. Browsers handle decimal sizes very well.
Frequently asked questions
What is a type scale?
A series of font sizes obtained by multiplying a base size by the same ratio: 16 px × 1.25 = 20 px, × 1.25 = 25 px… Headings and text then look in harmony.
Which ratio should I choose?
1.2 (minor third) or 1.25 (major third) for interfaces and text-heavy sites; 1.333 to 1.618 for highly contrasted headings on editorial sites or landing pages.
What is fluid typography?
Each size grows gradually between a mobile screen width and a large screen width, thanks to clamp(). No more media queries for headings.
Why rem?
rem follows the font size the visitor chose in their browser: your site stays readable for people who enlarged it.
Related searches
Still stuck?
Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.