Fluid Type Scale Generator
This fluid type scale generator turns five numbers into a block of CSS custom properties, one
per font size, each written as a clamp() with rem and vw units. Enter the viewport
range, the base size at each end and a scale ratio, and every step from --text-xs up
to --text-4xl scales smoothly with the screen, with no media queries. Nothing is
uploaded; the CSS is built in your browser.
How to use the fluid typography generator
Fill in the five fields at the top. Min viewport (default 320) and Max viewport (default 1200) are the screen widths in pixels where the type is smallest and largest. Min base size (16) and Max base size (20) are the body text size at those two widths. Scale ratio (1.25) is how much each step grows over the one below it. Each field has a number box and a slider.
The CSS box underneath updates as you type, so there is no submit button. When it looks right,
press Copy CSS and paste the :root block into your stylesheet. A
field that cannot be used shows a message instead: the max viewport must be larger than the min
viewport, the max base size larger than the min base size, the ratio 1 or more, and every number
above 0.
Use a step anywhere you set a size: h1 { font-size: var(--text-3xl); }.
Preview the scale at any width
Under Preview, drag Preview width between the min and max viewport. Every step is shown as the sample line "Type that scales smoothly" at the size it resolves to at that width, with its variable name and pixel size, largest step on top. It lets you judge the jump between body text and headings on a small phone and on a wide desktop before you copy anything.
How the clamp() font size is calculated
For each step the tool works out the size at the narrow end (min base size times the ratio to
the power of the step) and at the wide end (max base size times the same power). It then draws a
straight line between the two points: the slope is the change in size divided by the change in
viewport width, and the intercept is the min size minus the min viewport times the slope. The
slope becomes the vw part, the intercept the rem part, and the two end sizes become the minimum
and maximum of clamp(). Values are rounded to 4 decimals.
With the defaults, here is what the steps resolve to at three widths:
| Step | 320px | 760px | 1200px |
|---|---|---|---|
| --text-sm | 12.8px | 14.4px | 16px |
| --text-base | 16px | 18px | 20px |
| --text-lg | 20px | 22.5px | 25px |
| --text-xl | 25px | 28.13px | 31.25px |
| --text-2xl | 31.25px | 35.16px | 39.06px |
Why rem and vw instead of px
A size written only in vw ignores the font size a visitor has chosen in their browser, and it
does not grow when they zoom. Because every number here is split into a rem part and a vw part,
the text still follows the user's base font size and still zooms, which keeps it usable for
people who need larger type. The tool never outputs px. If your site sets
html { font-size: 62.5% } or any root other than 16px, open Advanced
and change Root font size so 1rem matches.
Choose viewports, base sizes and a scale ratio
The default 320 to 1200 covers a small phone up to a laptop. Pick the widest viewport where you want the type to stop growing, since beyond it the size is held at its maximum. For body text a 16px to 20px pair is a common choice. The ratio sets the character of the scale:
| Ratio | Name | Feel |
|---|---|---|
| 1.2 | Minor third | Gentle, close steps |
| 1.25 | Major third | Balanced default |
| 1.333 | Perfect fourth | Clear contrast |
| 1.5 | Perfect fifth | Dramatic headings |
| 1.618 | Golden ratio | Very large jumps |
A ratio of 1 makes every step the same size. The ratio is a single number used at both ends, so the scale at 320px and at 1200px has the same proportions; only the base size changes.
Step names, prefix and the number of steps
Open Advanced to change the output. Variable prefix (default
--text) renames every property. Step names switches between the
names sm, lg, xl (--text-xs, --text-sm,
--text-base, --text-lg, --text-xl, --text-2xl
and so on) and the numbers -1, 1, 2 (--text--1, --text-0,
--text-1 and so on). Smaller steps (0 to 4, default 2) and
Larger steps (0 to 8, default 5) decide how many sizes sit below and above the
base.
What this tool does not do
It makes the type scale only. There is no Tailwind or other export, no per-step overrides, no separate ratio for the narrow and wide ends, and no px output. For the layout around your text, a CSS grid generator or CSS button generator writes the matching code, a color contrast checker tests whether the text colour is readable at the smallest size, and a CSS minifier shrinks the finished stylesheet.
Frequently asked questions
What is a fluid type scale?
A fluid type scale is a set of font sizes that grow smoothly with the width of the screen instead of jumping at breakpoints. Each step, such as small, base, large and extra large, gets a minimum size for narrow screens and a maximum size for wide ones, and the size in between follows a straight line. The generator writes each step as a CSS custom property you can reuse across a site.
How do I use CSS clamp() for font size?
clamp(min, preferred, max) takes three values. The browser uses the preferred value, but never goes below the min or above the max. For type, the preferred value is a rem amount plus a vw amount, for example clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Put that in a custom property, then write font-size: var(--text-base) wherever you need it.
How do I make a responsive font size in CSS?
Declare the sizes once as clamp() variables and the text resizes continuously as the window changes, with no media queries. Set the Min viewport and Max viewport to the widths where you want the smallest and largest sizes, set Min base size and Max base size, and copy the CSS. Below the minimum viewport the text stays at its smallest size, and above the maximum it stays at its largest.
Why is my CSS clamp() font size not working?
The usual causes are a missing unit on a value, no spaces around the plus sign inside clamp(), a minimum larger than the maximum, or a preferred value written in vw alone, which ignores the user's font size setting. The generated lines avoid all four: every value carries a unit, the plus sign has spaces, and the minimum is always smaller than the maximum.
Does this work like the Utopia fluid type scale calculator?
It uses the same idea: sizes interpolate linearly between a narrow and a wide viewport, and each step is a ratio multiple of the base size. Differences: this tool has one scale ratio for both ends, no per-step overrides, and it outputs plain CSS custom properties only, with no Tailwind or other export. Choose it when you want the :root block quickly.
Major third or perfect fourth: which scale ratio should I pick?
Major third (1.25) is a good default for body-heavy pages, because the steps are close enough that headings do not dwarf the text. Perfect fourth (1.333) gives more contrast between steps and suits marketing pages and large headings. Minor third (1.2) is gentler still. Type the ratio into Scale ratio and check the Preview before you copy.
Can I use CSS clamp() in all browsers?
clamp() works in every current version of Chrome, Edge, Firefox and Safari, and has done since 2020. Very old browsers ignore a declaration they do not understand, so if you must support one, put a fixed font-size line before the clamp() line as a fallback.
Is anything I enter sent to a server?
No. The numbers are turned into CSS by your browser, on the page, and nothing is uploaded or stored. There is no account and no sign-up.
Recommended
-
UX/UI Wireframe SketchbookSketch your heading and body hierarchy on paper before you set the scale.
-
KYY 15.6" Portable MonitorCheck your clamp() sizes on a second screen at phone and desktop widths.
-
Rain Design mStand Laptop StandRaise your laptop to eye level for long sessions in your design-system CSS.
Helps keep the tools free. ✨
Images are for illustration only. As an Amazon Associate I earn from qualifying purchases.
