CSS Fluid Typography Generator
Generate a CSS clamp() type scale (XS to 4XL) that interpolates font size smoothly between a min and max viewport width, with a live resizable preview and the underlying slope/interpolation math shown. Runs entirely in your browser.
Input
Base font size at the min viewport width.
Base font size at the max viewport width.
Below this width, font size stays fixed at the min size.
Above this width, font size stays fixed at the max size.
How much each step grows relative to the last, at the min viewport width.
How much each step grows relative to the last, at the max viewport width.
Off outputs a plain .text-xs / .text-base / … utility-class block instead.
Output
Your type scale will appear here.
A real clamp() rule in a Shadow DOM — resize your browser window to see it scale live.
| Step | Min | Max | clamp() |
|---|---|---|---|
| No data yet | |||
The demo markup the live preview above renders — sample text per step, not meant to be pasted as-is.
What powers the live preview above — the same clamp() rules as the CSS output, applied to the demo markup's classes.
Guides
What it does
Fixed font-size media-query breakpoints jump text abruptly at a handful of widths. Fluid typography scales font size continuously as the viewport resizes, using CSS clamp() to bound the result between a minimum and maximum size. This tool builds a full 8-step type scale (XS to 4XL) of clamp() rules from two font sizes, two viewport widths, and a scale ratio at each end — no fixed breakpoints, no jump.
How to use it
- Set the min font size and min viewport width — the base font size below which text stops shrinking.
- Set the max font size and max viewport width — the base size above which text stops growing.
- Pick a scale ratio for each end (Minor Third, Major Third, Perfect Fourth, …) — how much each step (SM → base → LG → XL…) grows relative to the last. Using a different ratio at each end lets headings grow faster than body text as the screen gets wider, which is common in fluid type systems.
- Choose rem or px for the output, and whether to output CSS custom properties (
--font-base: clamp(...)) or plain utility classes (.text-base { font-size: clamp(...); }). - Copy the CSS output straight into your stylesheet.
The live preview mounts the real generated clamp() rules in an isolated Shadow DOM — resize your actual browser window and the sample text scales in real time, the same way it will on your site.
The math
Each step's clamp() is built from the standard linear-interpolation formula: slope = (maxSize − minSize) / (maxViewport − minViewport), then preferred = (minSize − minViewport × slope) + slope × 100vw. That preferred value grows linearly with viewport width and is bounded by clamp(minSize, preferred, maxSize), so the result matches minSize exactly at minViewport, maxSize exactly at maxViewport, and interpolates smoothly in between. Below the min viewport or above the max viewport, size stays pinned at the corresponding bound. The type scale breakdown table shows the computed min/max size and the resulting clamp() string for every step.
Why not just use a media query?
A media query changes font-size at one fixed pixel width, so text jumps the instant the breakpoint is crossed. clamp()-based fluid typography scales continuously across the whole range between your two breakpoints, so there's no jump to notice — and no breakpoint to pick correctly for every device.
Does this work in every browser?
clamp() and vw units have been supported in all major browsers since 2020, so this works everywhere except very old browsers that predate CSS custom properties too.
Related tools
Converting a size the other direction? Use the Pixel, REM & EM Converter to convert a single value between units. For breakpoint-based (rather than fluid) responsive rules, see the CSS Media Query Generator. For an interactive easing-curve builder in the same style as this one, see the CSS Cubic Bezier Generator.
Privacy
Everything runs in your browser — no font sizes or settings are sent to a server.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/css-fluid-typography-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"minFontSize": "16",
"maxFontSize": "20",
"minViewport": "320",
"maxViewport": "1200",
"minRatio": "1.2",
"maxRatio": "1.25",
"outputUnit": "rem",
"asCustomProperties": "true"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-fluid-typography-generator` tool (CSS Fluid Typography Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.