Calculate structural breakpoints for smooth font scaling. Enter your size range and get a copy-ready CSS clamp() rule with live preview - instantly, 100% in your browser.
Input Variables
px
px
px
Generated CSS Output
CSS Font-Size Rule
font-size: ;
CSS Variable (Design System)
--fluid-text: ;
Slope (vw rate)-
Y-Intercept (rem)-
Preferred value-
Min (rem)-
Max (rem)-
Live Preview
Drag the right edge of the box below to resize and watch the text scale fluidly.
The quick brown fox jumps over the lazy dog.
This is body copy at a fixed 14px for contrast. Notice how the heading above scales continuously as you drag the container wider or narrower - no jumps, no breakpoints.
--- px
drag to resize ››
Advertisement
Key Terms Explained
clamp()
A CSS function that takes three arguments: a minimum value, a preferred value, and a maximum value. The browser uses the preferred value unless it falls outside the min/max bounds.
Fluid Typography
A design technique where font sizes scale continuously and proportionally across all viewport widths, rather than jumping between fixed sizes at defined breakpoints.
vw (Viewport Width)
A relative CSS unit equal to 1% of the current viewport width. A value of 5vw means the element is 5% as wide as the browser window, adjusting dynamically on resize.
REM
Root EM. A relative CSS unit scaled to the root element (html) font size. If the root is 16px, then 1rem = 16px. Respects user browser font preferences unlike pixels.
EM
A relative unit scaled to the font size of the current element's parent. Because it compounds through nested elements, rem is preferred for global type scales to avoid compounding confusion.
Linear Interpolation
A method of estimating values between two known points on a straight line. The fluid typography formula linearly interpolates font size between the minimum and maximum viewport widths.
Breakpoint
A viewport width at which a CSS layout or style changes. Traditional responsive design uses discrete breakpoints; fluid typography replaces them with a continuous scaling range.
WCAG
Web Content Accessibility Guidelines. Published by the W3C, these guidelines define how to make web content accessible. Criterion 1.4.4 requires text to be resizable up to 200% without loss of function.
The Complete Guide to Fluid Typography with CSS clamp()
Fluid typography is the practice of making font sizes scale proportionally with the viewport, rather than switching abruptly between fixed values at predetermined breakpoints. The CSS clamp() function makes this possible in a single property declaration. This guide explains the underlying math, the accessibility implications, and exactly how this generator computes its output.
How This Generator Computes clamp()
The formula treats your two breakpoints as a straight line on a graph: the x-axis is viewport width and the y-axis is font size. The generator solves for that line, then expresses it as a viewport-relative CSS value.
Step 1: Compute the slope. slope = (maxFontSize - minFontSize) / (maxViewport - minViewport). This is the number of pixels the font grows for every pixel of viewport width added.
Step 2: Compute the y-axis intercept. intercept = minFontSize - (minViewport * slope). This anchors the line to your minimum viewport and minimum font size.
Step 3: Convert to rem. Divide both the intercept and the font size bounds by the root base size (default 16). This keeps the values responsive to browser font preferences.
Step 4: Convert slope to vw. Multiply the slope by 100 to convert it from "px per px" into a viewport-width percentage.
The result is: clamp(minRem, interceptRem + slopeVw, maxRem).
How to Use This Tool
Set your minimum and maximum viewport widths - these are the two breakpoints that define the scaling range. Then set your minimum and maximum font sizes: the text will be exactly the minimum size at the minimum viewport, and exactly the maximum size at the maximum viewport. Between those two widths, it scales continuously. The root base size field should match your project's html { font-size: 16px; } declaration (or 100% if you have not changed it).
Toggle the unit switches next to the font size inputs to work in rem or px as you prefer. The engine converts to rem automatically regardless of your input unit. Drag the right edge of the preview box to watch the font scale live.
Why Fluid Typography Beats Media Queries
A traditional responsive approach requires at least two breakpoints and two separate font-size declarations. Every intermediate viewport width gets whichever static value it falls into - there is no in-between. Users on a 900px-wide window get the same font size as users on a 1199px-wide window. With clamp(), every viewport width from 320px to 1200px gets a mathematically precise font size tailored to that exact width. You remove the staircase and replace it with a ramp.
Accessibility: Why rem, Not px
Browsers expose a setting that lets users define their preferred base font size. When a site uses pixel values for font sizes, that setting is ignored entirely - the developer's pixels override the user's preference. When rem values are used, the root font size scales with the user's setting, and everything defined in rem scales with it. WCAG success criterion 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() is the most reliable path to satisfying that criterion, which is why this generator always outputs rem, not px.
Beyond Font Sizes: Spacing and Layout
Because clamp() works with any CSS length property, you can apply the same technique to margin, padding, gap, border-radius, and even width. A design system built on fluid spacing scales every spatial relationship in the UI simultaneously, so the whole layout breathes proportionally rather than having only the typography respond to screen width.
Media queries create abrupt jumps: at 768px the font is 16px, at 769px it jumps to 24px. CSS clamp() performs continuous linear interpolation between your two breakpoints, so the font size grows smoothly at every viewport width. This means one line of CSS replaces multiple media query blocks, reduces code bloat, and produces a more polished, fluid reading experience across all screen sizes.
Pixels are an absolute unit that ignores a user's browser font preference. If someone sets their browser default font to 20px for readability, a pixel-based clamp() ignores that entirely. REM units scale relative to the root font size, so when a user increases their browser font size, your REM values scale up with it. WCAG 1.4.4 (Resize Text) requires text to be resizable up to 200% without loss of content or functionality, and using REM is the most reliable way to satisfy that requirement.
Browser zoom (Ctrl/Cmd +) scales the entire viewport, which effectively shrinks the viewport width as seen by CSS. Because the vw component of the preferred value inside clamp() responds to the zoomed viewport, the font size will actually decrease slightly as the user zooms in. The clamp() min and max values act as safety guardrails, preventing it from shrinking below the minimum. This is why setting your minimum value to the body copy size you need for comfortable reading is critical for accessibility.
Yes. The clamp() function works with any CSS property that accepts a length value, including margin, padding, gap, width, height, border-radius, and more. Simply treat the min/max font size fields as your min/max spacing values instead. The math is identical. Many design systems use this technique to build a fluid spacing scale alongside a fluid type scale.
The formula models a straight line between two points: (minViewport, minFontSize) and (maxViewport, maxFontSize). The slope is the rate of change in font size per pixel of viewport width: (maxFontSize - minFontSize) divided by (maxViewport - minViewport). The intercept is the y-axis crossing value: minFontSize minus (minViewport times slope). Multiplying the slope by 100 converts it to a vw percentage, and dividing the intercept by the root base size converts it to rem. The result is the preferred value of clamp().