EspañolType scale and fluid font size (clamp)
Choose the base size and the ratio for phone and desktop. The tool generates the sizes from h1 to small text, with clamp() so the font grows smoothly between the two screens.
How to useFont sizes in harmony
Available in: 
Type scale and fluid font size (clamp): what it is for
Choose the base size and ratio (from minor second to golden ratio) for phone and desktop, and the screen widths for each. The tool calculates the sizes of h1, h2, h3, h4, h5, body and small text on both screens and builds the clamp() for each one, in rem.
The preview shows your text at each size, on phone or desktop, and the CSS comes out with ready-made variables.
How to use
- Choose base and ratio for phone and desktop.
- Check the preview of each level.
- Copy the CSS variables.
When to use it
- Setting the font sizes of a new website.
- Headings that adapt to phones without media queries.
- Creating the typography of a design system.
Frequently asked questions
What is a type scale?
It is a sequence of sizes where each one is the previous one multiplied by the same ratio, such as 1.25 (major third). Headings stay proportional to each other and the site looks more organized than with sizes picked at random.
How does clamp() work?
clamp(minimum, preferred, maximum) lets the font grow with the screen width (the preferred value uses vw) without going past the limits. That way a heading has one size on phones and another on desktop, without media queries.
Why use rem?
In rem, sizes respect the person's browser font size setting, which matters for people who enlarge text to read better. The tool uses 1rem = 16px.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.