Skip to main content

CSS clamp() Fluid Typography Generator — full type scale, live preview, copy CSS / Tailwind / SCSS

CSS clamp() fluid typography generator — min/max font size, viewport range, full type scale (h1-h6 + body), copy CSS / Tailwind.

  • Runs locally
  • Category Generator
  • Best for Starting from a blank page without committing to the first result.
px
px
px
px
Math (per Mike Riethmuller 2016)
slope A = (maxFont - minFont) / (maxVw - minVw) × 100   (in vw)
intercept B = (minFont - A × minVw / 100) / 16   (in rem)
clamp(minFont, calc(A vw + B rem), maxFont)
LevelMinMaxCSS clamp()
h161.0352px100.9842pxclamp(3.8147rem, calc(3.699vw + 2.9824rem), 6.3115rem)
h248.8281px75.7571pxclamp(3.0518rem, calc(2.4934vw + 2.4907rem), 4.7348rem)
h339.0625px56.832pxclamp(2.4414rem, calc(1.6453vw + 2.0712rem), 3.552rem)
h431.25px42.6347pxclamp(1.9531rem, calc(1.0541vw + 1.7159rem), 2.6647rem)
h525px31.984pxclamp(1.5625rem, calc(0.6467vw + 1.417rem), 1.999rem)
h620px23.994pxclamp(1.25rem, calc(0.3698vw + 1.1668rem), 1.4996rem)
body16px18pxclamp(1rem, calc(0.1852vw + 0.9583rem), 1.125rem)
small12.8px13.5034pxclamp(0.8rem, calc(0.0651vw + 0.7853rem), 0.844rem)
Viewport width800px

Drag to scrub between min and max viewport

The quick brown fox jumps over the lazy dog
H2 · The quick brown fox jumps over
H3 · The quick brown fox jumps over
H4 · The quick brown fox jumps over
H5 · The quick brown fox jumps over the lazy
H6 · The quick brown fox jumps over the lazy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tellus tortor, posuere id pulvinar in, varius non ipsum. Cras dapibus aliquam erat.

small · Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pel

h1 {
  font-size: clamp(3.8147rem, calc(3.699vw + 2.9824rem), 6.3115rem);
}

h2 {
  font-size: clamp(3.0518rem, calc(2.4934vw + 2.4907rem), 4.7348rem);
}

h3 {
  font-size: clamp(2.4414rem, calc(1.6453vw + 2.0712rem), 3.552rem);
}

h4 {
  font-size: clamp(1.9531rem, calc(1.0541vw + 1.7159rem), 2.6647rem);
}

h5 {
  font-size: clamp(1.5625rem, calc(0.6467vw + 1.417rem), 1.999rem);
}

h6 {
  font-size: clamp(1.25rem, calc(0.3698vw + 1.1668rem), 1.4996rem);
}

body {
  font-size: clamp(1rem, calc(0.1852vw + 0.9583rem), 1.125rem);
}

small, .text-small {
  font-size: clamp(0.8rem, calc(0.0651vw + 0.7853rem), 0.844rem);
}

What this tool does

The fluid typography generator that ships a *full type scale*, not just a single clamp(). Punch in your min and max body size, the viewport range you care about (default 360px mobile → 1440px desktop), and pick a modular scale ratio for each end (Minor Second 1.067, Major Second 1.125, Minor Third 1.2, Major Third 1.25, Perfect Fourth 1.333, or Golden Ratio 1.618). The tool computes a *separate* clamp() for every level from h1 down to small — eight rows in a table, each one a pasteable CSS declaration. The math is the Mike Riethmuller 2016 formula from CSS Tricks's "Modular Fluid Typography": slope A in vw units, intercept B in rem units, then clamp() bounds it on both ends. The derivation is visible in a collapsible block so you don't have to treat the output as a black box. A 360–1920 viewport-width slider scrubs the live preview in real time — every heading and paragraph restyles as you drag, so you see exactly what happens at 480px, 768px, 1024px, and beyond without resizing your browser. Four export formats cover every project: raw CSS rules (h1{...} h2{...} body{...}), CSS custom properties (--text-h1 → --text-small for design-token codebases), an SCSS @mixin (drop into your sass library), and a paste-ready Tailwind config block (theme.extend.fontSize). Switch between rem and px output with one click — rem is the right default (respects user font-size preferences) but px is there for codebases that haven't normalized. Four quick presets cover the common cases: mobile-first (16→18), editorial long-form (18→20), marketing pages (17→21), and compact dashboards (14→16). Every input round-trips through the URL, so sharing a scale with your designer is a single paste. 100% client-side. Zero analytics on the values you tune. Zero dependencies — the entire math is ~30 lines of arithmetic.

Tool details

Input
Numbers + Structured content
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Copy + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
Browser-side processing
The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share
Shareable URL state
Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget
Initial JS <= 18 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Generator · Designer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How CSS clamp() Fluid Typography Generator fits into your work

Use it to get a strong first draft, starter asset, or structured output that you can edit before publishing.

Generation jobs

  • Starting from a blank page without committing to the first result.
  • Creating repeatable drafts, names, templates, or placeholder assets.
  • Exploring options before choosing the one that fits the job.

Generation checks

  • Review generated output before it reaches a customer, page, or document.
  • Change defaults when you need a specific brand voice, format, or audience.
  • Keep only the parts that match the real task.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 Color Converter HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only Open
  2. 2 Type Scale Generator Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only Open
  3. 3 CSS Shadow Generator Pro CSS shadow generator pro — multi-layer box-shadow + text-shadow + filter:drop-shadow, with Material/Tailwind/Apple shadow presets and dark-mode preview. Open

Real-world use cases

  • Replace your 24 hand-tuned font-size media queries with one CSS file

    You've got h1 through h6 plus body and small, each with two or three @media breakpoints, each with a different font-size value — call it 24 lines of media-query CSS that nobody on the team wants to touch. Generate the scale here once, copy the CSS rules export, paste it in. Eight `font-size: clamp(...)` declarations replace the entire 24-line stack, the typography stays consistent across every viewport from 360 to 1440, and the next time the designer tweaks the scale you re-run the tool and paste the new eight lines — no media-query archaeology.

  • Lock down a design-system typography token in 5 minutes

    Your team is about to ship a fresh design system and needs a canonical type scale that lives in CSS variables. Pick a body size and ratio that matches the brand voice, export "CSS variables", drop the resulting `:root { --text-h1: clamp(...) }` block into your tokens file. Every component that needs a heading references `var(--text-h1)` and you only ever change one place when the scale needs to shift. Five minutes from "we need typography tokens" to "we have typography tokens".

  • Match a Figma fluid typography spec without manual math

    Designer hands you a Figma file with "h1 ranges 48px → 72px from 375 to 1440, ease into it". You used to hand-calculate this in a calculator app, double-check the slope at three intermediate breakpoints, write the clamp, then realize the intercept was wrong because you mixed up rem and px. Now: punch the four numbers in, copy the clamp(), done. Verify with the viewport slider that 48px shows at 375px and 72px at 1440px (it will, that's the math). Three minutes vs thirty.

  • Audit an old SCSS codebase and consolidate font-size declarations

    Inherited a 40k-line SCSS codebase with 60 different font-size values scattered across modules. Define a fluid scale here that covers the visual range of what you see in the codebase, export the SCSS @mixin, drop it into your shared partial. Now you can do a codemod that replaces `font-size: 21px` with `@include fluid-type('h4')` etc., and your final stylesheet has 8 fluid tokens instead of 60 static values. Smaller bundle, consistent typography, one place to tune.

  • Verify h1 stays readable at every viewport you actually support

    The classic fluid typography failure mode: you tune a scale that looks great at 1440 desktop, ship it, then someone opens it on a 360 phone and h1 wraps three lines because the min you set was too aggressive. Drag the viewport slider here from 360 to 1920 and watch the live preview — if h1 wraps poorly at 360, you catch it before commit, not after a Slack message from QA. The slider is the single most useful interaction in this tool; everyone forgets to test the small end.

  • Add fluid typography to a Tailwind project without ejecting from utilities

    Your team uses Tailwind and the standard `text-sm / text-base / text-xl` utilities. You want fluid typography but don't want to replace every utility class in the codebase. Export the Tailwind config block, paste it under `theme.extend.fontSize` with semantic keys (h1 / h2 / body), and use those new utilities only where you want fluid behavior — `class="text-h1"` on headings, existing `text-sm` everywhere else. Gradual migration: add fluid on new components, keep static utilities working unchanged.

Common pitfalls

  • Setting min font size too low for the smallest level. Body at 14px sounds fine, but `small` is one step below — at a 1.333 ratio that's 10.5px on mobile, which Lighthouse flags and users can't read. Check the small row's min column before you ship.

  • Picking the same ratio for min and max viewport. You get a flat fluid scale that's identical in shape at every width. The whole point of two ratios is to be quieter on mobile and louder on desktop — use 1.2 → 1.333 or 1.25 → 1.414 to actually exercise the feature.

  • Confusing viewport range with breakpoints. The min/max viewport in this tool defines where the clamp INTERPOLATES, not where your layout breaks. Below min viewport the font size sticks at min; above max it sticks at max. You still need separate @media breakpoints for layout shifts.

  • Outputting in px because "rem is hard". rem isn't hard; it's just `value / 16`. Outputting in px breaks user font-size preferences (an accessibility regression) and means you lose the scale-with-zoom benefit fluid typography is supposed to give you in the first place. Use rem.

  • Forgetting that clamp() needs three arguments. If you copy just the calc() part by mistake, the browser silently ignores the rule. Always copy the full `clamp(min, calc(...), max)` — the full row export here does that for you.

  • Setting max viewport at the actual maximum device width (1920+). Fluid typography should stop scaling well before the layout itself stops scaling. Use 1440 or 1536 as a reasonable upper bound; past that, font-size doesn't need to keep growing.

Privacy

Every number you type, every ratio you pick, every export format you switch to — all of it stays in your browser. The tool runs as a React island on a static Astro page; there is no server endpoint involved in the math, no telemetry on the values you tune, no analytics on which presets you click. The shareable URL contains only the configuration itself (min/max body, min/max viewport, ratios, output unit) — no user identifier, no session token, no tracking parameters. The viewport preview slider position is intentionally NOT in the URL because it's a local "what am I looking at" state, not configuration. Open the tool, build your scale, close the tab — nothing leaves your machine.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-06-14