CSS clamp() Generator
16px → 20px · ratio 1.25 · 360px–1440px
Viewport Range
Min viewport
px
Max viewport
px
Base Font Size
Min (at 360px)
px
Max (at 1440px)
px
Root font size
px
Type Scale
Output unit
Viewport
768px
360px — 1440px
xsThe quick brown fox jumps over the lazy dog and the clever cat sat quietly.11.2px
smThe quick brown fox jumps over the lazy dog and the fence.14px
baseThe quick brown fox jumps over the lazy dog.17.5px
lgThe quick brown fox jumps over the fence.21.9px
xlThe quick brown fox jumps high.27.4px
2xlFluid Typography Scale34.2px
3xlFluid Type Scale42.8px
4xlFluid Type53.4px
css
:root {
  --text-xs: clamp(0.64rem, 0.5867rem + 0.237vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.7333rem + 0.2963vw, 1rem);
  --text-base: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1458rem + 0.463vw, 1.5625rem);
  --text-xl: clamp(1.5625rem, 1.4323rem + 0.5787vw, 1.9531rem);
  --text-2xl: clamp(1.9531rem, 1.7904rem + 0.7234vw, 2.4414rem);
  --text-3xl: clamp(2.4414rem, 2.238rem + 0.9042vw, 3.0518rem);
  --text-4xl: clamp(3.0518rem, 2.7974rem + 1.1303vw, 3.8147rem);
}
Formula--text-base
slope = (20px − 16px) ÷ (1440px − 360px) = 0.003704 offset = 16px − (0.003704 × 360px) = 14.667px (0.9167rem) → clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem)

Related Tools

See all ->
REM ↔ PX ConverterBase font size calculatorMedia Queries GeneratorCSS · SCSS · Tailwind · JSFlexbox BuilderVisual layout editorCSS Grid BuilderVisual grid layout editorResponsive PreviewTest any screen sizeFont Pairing ToolGoogle Font combinationsTailwind FormatterSort & group classesCSS → TailwindConvert CSS to utilities

CSS Clamp() Generator — Fluid Responsive Typography

Updated May 17, 2026
Share & Support

What's included

Features

Full 8-step type scale in one operation: xs, sm, base, lg, xl, 2xl, 3xl, 4xl — all from a single ratio and base size
Visual viewport slider (min–max range) with live font size preview — see exact px sizes at any viewport width
6 scale ratio presets: Minor Third, Major Third, Perfect Fourth, Aug. Fourth, Perfect Fifth, Golden Ratio + custom input
Step-by-step formula explainer showing slope, intercept, and derivation for every selected size
CSS custom properties output (: root with --text-xs through --text-4xl)
Tailwind CSS fontSize config output — paste into tailwind.config.js theme.extend.fontSize; sort your Tailwind classes with our Tailwind Formatter
SCSS variables output ($text-xs through $text-4xl) for SCSS/Sass workflows
rem/px unit toggle — rem output respects user browser font size preferences (WCAG 1.4.4 compliance); convert rem values with our REM to PX Converter
Configurable root font size for accurate rem conversion on non-standard base sizes
100% client-side — all calculations run in the browser, nothing is sent to any server; apply sizes to a fluid layout with our Flexbox Builder

About this tool

Generate a Fluid Type Scale With CSS clamp() — No Media Queries, Export as CSS Vars, Tailwind, or SCSS

Runs in your browser
No install or signup
Free forever

You need responsive typography that scales smoothly between mobile and desktop — not a fixed font size that jumps between two breakpoints with a @media query. clamp() is the CSS solution: it linearly interpolates between a minimum and maximum size based on viewport width, producing smooth scaling with no layout jumps. This tool calculates the complete formula and outputs a full 8-step scale (xs through 4xl) in one click.

Set four inputs — min base size, max base size, min viewport width, max viewport width — pick a type scale ratio, and the tool generates eight fluid clamp() expressions that form a proportional typographic system. The math: slope = (maxSize − minSize) / (maxViewport − minViewport), preferred = intercept + slope × 100vw, clamp(minSize, preferred, maxSize). You don't need to do this by hand — the Formula panel shows every step of the calculation for any selected size so you can understand and verify it.

Six scale ratio presets — Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.5), Golden Ratio (1.618) — plus a custom input. A visual viewport slider lets you preview all eight font sizes at any width between your min and max. Export as CSS custom properties (--text-xs through --text-4xl), a Tailwind fontSize config object for tailwind.config.js, or SCSS variables.

Step by step

How to Use

  1. 1
    Set the viewport rangeIn the Viewport Range section, set Min viewport to the smallest screen you support — 360px works for modern Android phones. Set Max viewport to your widest desktop breakpoint — 1440px is the most common choice. These two values define the window over which all font sizes scale linearly. Values outside this range are clamped to the fixed min or max size.
  2. 2
    Set the base font size rangeIn the Base Font Size section, set Min to your desired body font size at the minimum viewport (typically 16px) and Max to the size you want at the maximum viewport (typically 18–20px for body text). The Root font size field (default 16px) is used only for rem conversion — set it if your document uses a non-default html { font-size: ... } value.
  3. 3
    Choose a type scale ratioOpen the Type Scale dropdown and select a ratio. Major Third (1.25) is the default and works well for most UI design systems — clear but not dramatic size jumps. Perfect Fourth (1.333) suits editorial or marketing sites that need a bold heading hierarchy. Golden Ratio (1.618) creates very large jumps for display typography on landing pages. Select Custom to enter any ratio from 1.01 to 3.
  4. 4
    Choose rem or px outputToggle between rem and px output. rem is strongly recommended for accessibility: it scales proportionally if the user changes their browser default font size, satisfying WCAG 1.4.4 (Resize Text, Level AA). px output ignores browser font preferences and is appropriate only when you have specific technical requirements for fixed pixel values.
  5. 5
    Preview at any viewport widthIn the Preview pane, drag the Viewport slider left (toward your minimum) to simulate mobile, or right (toward your maximum) to simulate a wide desktop. All eight font sizes — xs, sm, base, lg, xl, 2xl, 3xl, 4xl — update live with actual rendered text and a px badge showing the exact computed size at that viewport. Click any size row to see the full slope/intercept formula derivation for that step in the Formula panel.
  6. 6
    Export the generated scaleSwitch between the CSS Vars, Tailwind, and SCSS tabs in the output panel. CSS Vars outputs a :root { } block with --text-xs through --text-4xl custom properties. Tailwind outputs a tailwind.config.js fontSize object ready to paste into theme.extend.fontSize. SCSS outputs $text-xs through $text-4xl variable declarations. Click Copy to copy the output.

Real-world uses

Common Use Cases

✦
Replace @media font-size breakpoints with smooth fluid scaling
If your stylesheet has @media (max-width: 768px) { h1 { font-size: 2rem; } } style rules, replace them with a single clamp() value. Set min/max viewport widths to match your breakpoints and min/max sizes to your two values — the clamp() output replaces both rules.
⬡
Add fluid typography to a Tailwind project without overriding every class
Export the Tailwind fontSize config and paste it into tailwind.config.js under theme.extend.fontSize. All your existing text-xl, text-2xl etc. classes immediately output fluid clamp() values — no changes to templates. The generated values respect Tailwind's naming conventions. Pair with our Font Pairing Tool to choose typefaces for the scale.
⚡
Create dramatic fluid headings for a landing page or marketing site
Use Golden Ratio (1.618) or Perfect Fifth (1.5) for maximum size contrast. Set a small min base (15px) and large max base (22px) — the 4xl and 3xl sizes will be commanding at wide viewports while xs and sm remain readable on mobile.
△
Generate rem-based clamp() values that respect user browser font preferences
Use rem output so the min and max values scale with the user's browser default. If a user sets their browser to 20px, all rem-based clamp() sizes scale proportionally. Required for WCAG 1.4.4 (Resize Text, Level AA) compliance.
◑
Build a complete design system type scale from one ratio and base size
Set min base to 16px, max to 18px, Perfect Fourth ratio. Export the CSS custom properties (--text-xs through --text-4xl) for a :root block. Every component references the same tokens — update the entire system's typography by changing two numbers. Preview the scale across viewports with our Responsive Preview Tool.
▦
Compare type scale ratios visually before committing
Drag the viewport slider to see how all eight sizes look at any width. Switch between ratio presets — Minor Third (subtle) to Golden Ratio (dramatic) — and watch how heading-to-body size contrast changes in real time before writing any CSS.

Got questions?

Frequently Asked Questions

Use CSS clamp() with a viewport-relative preferred value. The syntax is clamp(minimum, preferred, maximum). The preferred value uses vw units so the font scales proportionally with viewport width. Below the minimum viewport it stays fixed at the minimum size; above the maximum viewport it stays at the maximum size. This creates smooth, linear scaling between two breakpoints with a single value — no @media queries needed. This generator calculates the formula automatically: you set min size, max size, min viewport, and max viewport, and get the complete clamp() expression to paste.

The clamp() preferred value uses linear interpolation. Given minimum font size, maximum font size, minimum viewport, and maximum viewport: slope = (maxSize − minSize) / (maxViewport − minViewport). The y-intercept is: intercept = minSize − (slope × minViewport). The preferred value is: intercept + slope × 100vw. The full expression: clamp(minSize, intercept + slope×100vw, maxSize). At the minimum viewport this resolves to exactly minSize; at the maximum viewport it resolves to exactly maxSize. The Formula panel in this tool shows every step of this calculation for any selected size in the scale.

A type scale ratio is a multiplier applied to a base font size to generate a harmonious progression of sizes. Minor Third (1.2) creates subtle, compact size differences good for dense interfaces. Major Third (1.25) balances variety and subtlety — the most common choice for UI design systems. Perfect Fourth (1.333) creates bolder contrasts good for editorial layouts. Perfect Fifth (1.5) and Golden Ratio (1.618) produce dramatic jumps used for display typography and landing pages. Use the viewport slider to preview how each ratio affects your heading hierarchy before committing.

Rem is strongly preferred over px for accessibility. When a user changes their browser's default font size (a common accommodation for low-vision users), rem-based sizes scale proportionally while px sizes stay fixed. WCAG 1.4.4 (Resize Text, Level AA) requires text can be resized to 200% without loss of functionality. Using rem in clamp() satisfies this because the min and max values scale with the user's root preference. The generator outputs rem by default and shows the rem conversion alongside pixel values in the formula panel.

Set min base size, max base size, min viewport, max viewport, and a scale ratio — then click generate. The tool produces all eight sizes (xs, sm, base, lg, xl, 2xl, 3xl, 4xl) as a proportional system in a single operation. Every size is derived from the same ratio so the relationships feel natural. Export as CSS custom properties, Tailwind fontSize config, or SCSS variables — updating the entire system's typography then only requires changing two numbers.

The minimum viewport should represent your smallest supported device — typically 360px for modern Android phones. The maximum viewport should be your largest common desktop breakpoint — 1440px is the most common choice and covers most laptop and desktop displays. A 360px–1440px range gives a 1080px scaling window with smooth, perceptible font growth across the most common device sizes. Below the minimum the font stays fixed at the min size; above the maximum it stays at the max size.

Paste the CSS output into a :root { } block in your global stylesheet. Then use the variables anywhere: h1 { font-size: var(--text-4xl); }, p { font-size: var(--text-base); }. For Tailwind, paste the fontSize object into tailwind.config.js under theme.extend.fontSize — your existing text-xl, text-2xl classes then output fluid clamp() values. For SCSS, use the $text-base, $text-lg variable names in your component stylesheets after importing the variables file.

Drag the Viewport slider left to simulate a mobile screen (360px) or right to simulate a wide desktop (1440px). All eight font sizes update in real time showing both live text rendering and the exact computed pixel size. This lets you verify that sizes like 3xl and 4xl aren't too overwhelming on mobile or too small on desktop before committing to the values.