The Fluid Type Scale Generator creates a responsive typography system using CSS clamp(). Instead of switching font sizes at breakpoints with media queries, fluid type scales smoothly between a minimum size on small screens and a maximum size on large screens, so your headings and body text always look proportionate.
Set your minimum and maximum screen widths and font sizes, choose a modular scale ratio, and how many steps you need above and below the base. The tool generates a set of CSS custom properties (--step--2, --step--1, --step-0, and so on), each with a ready-to-use clamp() value, plus a live preview. Everything runs in your browser.
How to build a fluid type scale
- Set the minimum screen width and font size (for small phones) and the maximum screen width and font size (for large screens).
- Choose a modular scale ratio — Major Third (1.25) is a popular default.
- Set how many steps you want above and below the base size.
- Drag the preview width slider to see how the scale looks, then copy the generated CSS.
How fluid typography with clamp() works
CSS clamp(MIN, PREFERRED, MAX) picks the preferred value but never goes below MIN or above MAX. For fluid type, the preferred value is a linear function of the viewport width (using vw units) solved so it equals your minimum size at the small screen and your maximum size at the large screen. The result scales smoothly with the viewport and needs no media queries.
What is a modular scale?
A modular scale multiplies a base size by a fixed ratio for each step up, and divides for each step down. For example, with a base of 16px and a ratio of 1.25, the next step up is 20px, then 25px, and so on. Using a consistent ratio keeps the relationship between your text sizes harmonious.
Frequently Asked Questions
What is fluid typography?
Fluid typography is text that scales smoothly with the screen size instead of jumping between fixed sizes at breakpoints. It is usually implemented with the CSS clamp() function so the font size grows gradually as the viewport widens.
How does the CSS clamp() function work for font sizes?
clamp(min, preferred, max) uses the preferred value but clamps it between the minimum and maximum. The preferred value is a viewport-based expression, so the font size grows with the screen width and stops at your chosen limits.
How do I use the generated CSS?
Paste the generated :root block into your stylesheet, then apply a step to any element with font-size: var(--step-1). Each variable already contains a complete clamp() value.
Do I still need media queries?
For font sizing, no. Because clamp() scales fluidly between your min and max screen widths, you do not need media queries just to change type sizes.
Which root font size does it assume?
The generated rem values assume the default 16px root font size, which is the browser default. If you change your root size, adjust accordingly.