Fluid Typography Generator

What Is Fluid Typography?

Fluid typography uses CSS clamp() to interpolate a font size between a minimum and maximum viewport, instead of switching steps at fixed breakpoints. The function takes three arguments: clamp(min, preferred, max). The browser clamps the preferred value, calculated from a viewport unit, to the floor and ceiling. The MDN Web Docs entry on clamp() is the canonical reference.

The preferred value is a linear interpolation: slope * 100vw + intercept, where slope is (maxSize - minSize) / (maxViewport - minViewport) and intercept is minSize - slope * minViewport. Set the min and max viewports to the smallest and largest widths your layout will see, and every step in the scale interpolates between them.

Browser support for clamp() is universal across current Chrome, Firefox, Safari, and Edge. The W3C CSS Values and Units Module Level 4 specifies the function. Older browsers, such as Internet Explorer and Safari before 13.1, ignore the declaration and fall back to the next applicable font size, so the technique degrades safely.

Why Fluid Beats Fixed Breakpoints

Fixed breakpoints make font sizes jump. A heading set at 40px on desktop and 28px on mobile stays at 28px until the viewport crosses the breakpoint, then snaps to 40px in a single frame. At 767px wide, a phone and a small laptop can render the same layout at very different physical sizes, yet both get the mobile step. Fluid sizing closes that gap by giving every intermediate width its own interpolated value, so a 900px tablet gets a heading sized for 900px, not a rounded-up phone size.

The practical win shows up in the middle of the range, where most traffic actually sits. Phones at the low end and wide desktops at the high end are covered by either approach. It is the tablets, the small laptops, and the maximized browser windows in between that benefit most, because they stop inheriting sizes tuned for a different device class. The transition is invisible, which is the point: readers should never catch type changing size.

A Worked Example: the Default Scale

The tool starts at 320px and 1200px viewports, a 16px base at the small end growing to 20px at the large end, with a perfect fourth ratio. The base step alone shows the whole pattern. The slope is (20 - 16) divided by (1200 - 320), about 0.0045, and the intercept lands at 14.55, which produces clamp(16px, 0.0045vw + 14.55px, 20px). Check it at the extremes: at 320px the preferred value is 14.4 plus 14.55, just under 16, so the floor wins and the body renders at 16px. At 1200px the preferred value reaches 19.95px, a hair under the 20px ceiling, so the body lands essentially on the ceiling. In between, the body tracks the line smoothly.

Every other step follows the same recipe with its own numbers. The second step above base interpolates from 28.43px to 35.54px as clamp(28.43px, 0.0081vw + 25.85px, 35.54px), and the top of the default four-step scale runs from 50.52px to 63.15px. The ratios between steps stay fixed at every viewport, because each step scales the same base by the same power of the ratio. Hierarchy is a property of the scale, so a heading that is 1.78 times the body at 320px is still 1.78 times it at 1200px. Only the absolute sizes move.

Using the Controls

The settings panel holds the five decisions the formula needs. The min viewport slider runs from 320px to 480px and the max viewport slider from 800px to 1440px, with the pair kept at least 100px apart so the slope never collapses. The base min slider sets the body size at the small viewport, from 12px to 18px, and the base max slider sets it at the large viewport, from 16px to 24px. The ratio dropdown offers the same six named ratios as the static calculator, plus a custom entry from 1.05 to 8, and the steps slider picks how many sizes appear above and below the base.

The controls guard against nonsense inputs. The min and max viewports cannot cross, the base min cannot exceed the base max, and the sliders hold their relative order as you drag. If you set the base to 14px minimum and 22px maximum, every step in the scale interpolates across that same 8px spread scaled by the ratio, so the smallest captions barely move while the largest headings swing the most.

Resizing the Preview

The preview pane is a small viewport you can drag. The preview width slider spans the full range between your min and max viewports, and every row renders the sample text at the exact interpolated size for that width. Each row also prints its clamp declaration, so you can watch the formula change as the pane moves and check your understanding of the numbers.

This is the fastest way to sanity-check a scale before copying it out. Drag the pane to the small end and confirm the body text is still readable. Drag it wide and confirm the largest heading has not grown past the layout's appetite. If the span between base min and base max feels too flat or too extreme at either end, adjust it here, where the effect is visible in the same frame.

Choosing the Viewport Range

The min viewport should match the narrowest screen your design actually supports. 320px covers the oldest small phones and is a common floor for this reason. The max viewport is subtler: it is not the largest monitor, but the largest width your content column reaches. A content area capped at 1100px inside an ultrawide monitor is still a 1100px layout, so setting the max viewport to 1200px or 1440px is usually enough. Past the max, the ceiling holds, which is exactly what you want.

Nothing about the viewport range changes the character of the scale, only where its movement happens. A narrow range, say 320px to 640px, concentrates the interpolation on phones and small tablets and leaves desktops at the ceiling. A wide range spreads the same total change across more widths, which makes the per-pixel slope gentler and the sizes at any one width less extreme.

Fluid Type and Accessibility

The clamp floor is an accessibility feature in its own right. A bare font-size: 5vw shrinks text to unreadable sizes on narrow screens and grows it past usefulness on wide ones. The min argument in every declaration here guarantees a readable lower bound, and the max argument keeps headings from ballooning. The WCAG success criteria for resizing text and reflow set expectations that type stays legible when the viewport is small; a clamped scale satisfies that far more reliably than viewport-only sizing.

The exported values use pixels in the clamp, which means they scale with browser zoom like any other pixel sizing. A user zooming to 200 percent sees every size double, fluid or not. If you prefer rem-based sizing to honor root font size changes, convert the exported custom properties at the point of use; the numbers in the comments give you the min and max for each step to work from.

When Fluid Is Right, and When It Is Not

Fluid type shines on marketing pages, landing pages, blogs, and anything where a smooth visual experience matters more than exact control at named widths. It also removes an entire class of breakpoint bugs, because the type has no states to get wrong. Fluid type stays fluid regardless of how your layout grid breaks; the two are independent systems, and you can keep layout breakpoints for columns while the type interpolates between them.

Static scales still win in specific places. Print output wants fixed sizes. Documentation that must match a design spec at exact widths is easier to audit with fixed rem values. Code samples and tables, where a sudden size change is more disruptive than helpful, often stay static. For those cases the static type scale calculator produces the fixed rem scale, and the two tools share the same ratio names and step names, so switching between them does not mean relearning anything.

From Fluid Scale to Production

The export panel writes a single :root block with one --font-size-* custom property per step, each a complete clamp declaration, plus a matching line-height token. Each declaration carries a comment showing the pixel range it interpolates across, so a future reader can see the intent without running the math. Paste the block into your stylesheet and the tokens work like any other font size variable.

Then the rest of the toolkit takes over. The typography playground applies the fluid scale to a real layout so you can feel the interpolation across an actual page. The brand kit folds the scale in with a font pairing and a palette for one combined export. And when you want a different body face, the font catalog is where to pick it before regenerating the numbers.

Frequently Asked Questions

Related Tools

Pair the fluid scale with its static counterpart when you need fixed sizes for print or specific viewports, or load it into the playground to see it applied across real layouts.