CSS Clamp() Generator — Fluid Responsive Typography

CSS clamp() is a mathematical function that constrains a value between a minimum and maximum, with a preferred value that scales between them. The syntax is clamp(minimum, preferred, maximum). For fluid typography, the preferred value uses viewport units (vw) so the font size scales proportionally with the viewport width — growing from the minimum size at the minimum viewport width and reaching the maximum size at the maximum viewport width. Below the minimum viewport it stays fixed at the minimum size; above the maximum viewport it stays fixed at the maximum size. This creates a smooth, linear scaling range between two breakpoints without requiring multiple @media queries.

The clamp() preferred value uses a linear interpolation formula. Given a minimum font size, maximum font size, minimum viewport width, and maximum viewport width: slope = (maxSize − minSize) / (maxViewport − minViewport). This slope tells you how many pixels the font grows per pixel of viewport width. The y-intercept is: intercept = minSize − (slope × minViewport). The complete preferred value is: intercept + slope × 100vw. The full clamp() expression becomes: clamp(minSize, intercept + slope×100vw, maxSize). At the minimum viewport width this formula resolves to exactly minSize, and at the maximum viewport width it resolves to exactly maxSize — linearly interpolated for all widths in between. The generator performs this calculation automatically and shows the full step-by-step math in the Formula panel for every size in the scale.

A type scale ratio is a multiplier applied to a base font size to generate a harmonious progression of sizes. Starting from a base size (e.g., 16px), each step up the scale multiplies by the ratio and each step down divides by it. Common musical ratios produce typographic harmony: Minor Third (1.2) creates compact, subtle size differences suitable for dense interfaces; Major Third (1.25) is a popular balance of variety and subtlety used by many design systems; Perfect Fourth (1.333) creates bolder size contrasts good for editorial layouts; Perfect Fifth (1.5) and Golden Ratio (1.618) produce dramatic size jumps used in display typography and landing pages. This generator supports all six standard ratios plus a custom value, and applies the same ratio at both the minimum and maximum viewport widths so the entire type scale scales fluidly and proportionally.

Using rem units is strongly preferred for typography over px for accessibility reasons. Rem is relative to the root font size — by default 16px in browsers. When a user changes their browser's default font size (a common accessibility accommodation for low-vision users), rem-based sizes scale proportionally while px sizes remain fixed. WCAG 1.4.4 (Resize Text, Level AA) requires that text can be resized up to 200% without loss of content or functionality. Using rem in clamp() satisfies this requirement because the minimum and maximum values scale with the user's root preference. The intercept value in rem units ensures the entire scaling curve respects user font preferences. The generator outputs rem by default and clearly shows the rem conversion alongside pixel values in the formula panel.

A complete type scale — xs, sm, base, lg, xl, 2xl, 3xl, 4xl — created from a single ratio and base size produces harmonious visual relationships between all text sizes on the page. When every size is derived from the same mathematical ratio, headings, subheadings, body text, captions, and labels form a coherent visual hierarchy where the size relationships feel natural and proportional rather than arbitrary. Defining the scale as CSS custom properties (--text-xs through --text-4xl) or a Tailwind fontSize config means you can update the entire site's typography by changing two numbers — min base size and max base size — rather than recalculating every individual clamp() value. This generator produces the complete scale in one operation, outputting ready-to-paste CSS variables, Tailwind config, or SCSS variables.

The minimum viewport should represent your smallest supported device — typically 360px for modern Android phones. The maximum viewport should represent your largest common desktop screen — 1440px covers most laptop and desktop displays and is the most common choice. Some designers extend to 1920px or even 2560px (4K) for very wide layouts. Below the minimum viewport the font stays fixed at the minimum size, and above the maximum viewport it stays fixed at the maximum size — so the clamp() function provides clean, predictable behavior at the extremes. A 360px–1440px range gives a 1080px scaling window, which provides smooth, perceptible font growth across the most common device sizes.

Copy the CSS output and paste it into your global stylesheet or a :root { } block in your CSS file. Once the custom properties are defined, use them anywhere in your CSS: h1 { font-size: var(--text-4xl); }, h2 { font-size: var(--text-3xl); }, p { font-size: var(--text-base); }. The font size automatically scales with the viewport without any JavaScript or media queries. For Tailwind, paste the fontSize object into your tailwind.config.js theme.extend.fontSize section — then use text-xs, text-sm, text-base etc. as you normally would in JSX, and Tailwind will output the clamp() values. For SCSS, import the variables file and use $text-base, $text-lg etc. in your component stylesheets.

The viewport slider simulates what your font sizes look like at any viewport width between your minimum and maximum. Drag it left to see how text appears on a small mobile screen (360px), or drag it right to see how it looks on a wide desktop (1440px). The font sizes in the preview rows update in real time with every pixel of slider movement, showing both the live text rendering and the exact computed pixel size in the badge on the right. This helps you verify that your type scale looks good at every breakpoint before you commit to the values — especially useful for checking that larger sizes like 3xl and 4xl are not too overwhelming on mobile, or too small to read at wide viewports.