Responsive type often jumps between fixed sizes at media-query breakpoints. CSS clamp() offers another approach: let a value grow fluidly with the viewport while enforcing a readable minimum and a controlled maximum. It works for font sizes, spacing, gaps, widths, and many other properties that accept compatible numeric values.
Clamp is not a universal replacement for media queries. It is especially good at continuous sizing; media queries remain useful when the layout or component behavior needs a discrete change.
What is CSS clamp()?
The function accepts three values:
clamp(minimum, preferred, maximum)- Minimum: the smallest allowed computed value.
- Preferred: the fluid or ideal value CSS tries to use.
- Maximum: the largest allowed computed value.
If the preferred value is below the minimum, the minimum wins. If it is above the maximum, the maximum wins. Between those limits, the preferred value applies.
A simple CSS clamp example
.page-title {
font-size: clamp(2rem, 5vw, 4rem);
}The heading cannot become smaller than 2rem or larger than 4rem. Inside that range, 5vw equals five percent of the viewport width, so the text scales as the viewport changes.
This shorthand is easy to read, but a pure viewport preferred value does not let you define exact sizes at exact viewport widths. A calculated linear expression gives more predictable control.
How fluid typography works
Fluid typography connects a small-screen font size to a large-screen font size. For example, you might want body text to be 16px at a 320px viewport and grow gradually to 20px at 1200px. Below 320px it stays at the minimum; above 1200px it stays at the maximum.
The preferred expression usually combines a fixed component with a viewport-width component:
font-size: clamp(16px, calc(14.55px + 0.45vw), 20px);At intermediate widths, the browser evaluates the calculation and produces a value between 16px and 20px. Clamp then guards the endpoints.
Want the calculation generated for you?
Enter minimum and maximum values plus the viewport range in the free WPToolix tool. It uses linear interpolation and returns a ready-to-copy declaration for your chosen CSS property.
How the CSS clamp formula works
The calculation draws a straight line between two design points: a minimum value at a minimum viewport and a maximum value at a maximum viewport. The slope describes how quickly the value changes as the viewport widens. The fixed part positions that line so it passes through both points.
You do not need to calculate this every time by hand. The important choices are design choices: the smallest readable value, the largest sensible value, and the viewport range over which growth should occur. Test the result between the endpoints rather than checking only mobile and desktop.
Keep units compatible. CSS can combine lengths such as pixels, rems, and viewport units in calc(), but the minimum and maximum must make sense for the property. Avoid unitless values where the property requires a length.
Generate CSS clamp values automatically
The WPToolix CSS Clamp Generator supports pixel and rem values and can produce fluid declarations for font size, margin, padding, gap, width, and related properties. Set the value range and viewport range, copy the generated CSS, and test it in the context of your layout.
A generated formula is a starting point, not a substitute for visual review. Long headings, translated text, user zoom, narrow containers, and unusual component widths can expose issues that a viewport calculation alone cannot predict.
Using CSS clamp() for responsive font sizes
:root {
--text-body: clamp(1rem, calc(0.955rem + 0.227vw), 1.125rem);
--text-heading: clamp(2rem, calc(1.455rem + 2.727vw), 3.5rem);
}
body {
font-size: var(--text-body);
}
h1 {
font-size: var(--text-heading);
line-height: 1.1;
}CSS custom properties make a fluid type scale reusable. Keep the range modest for body text and check line height separately. A unitless line height generally scales with the font size, but headings may need their own value.
Viewport-based text can raise accessibility concerns when it does not respond adequately to zoom. Including a rem component in the preferred calculation, retaining sensible bounds, and testing browser zoom helps preserve usability.
Using clamp() for padding and margins
.section {
padding-block: clamp(2rem, calc(1.273rem + 3.636vw), 4rem);
padding-inline: clamp(1rem, 4vw, 3rem);
}Fluid spacing can keep a section comfortable on mobile without leaving excessive empty space on wide screens. Separate block and inline axes when they need different ranges. Negative margins require extra care because the ordering of minimum and maximum values can become unintuitive.
Using clamp() for gaps and widths
.card-grid {
gap: clamp(1rem, 3vw, 2rem);
}
.article {
width: min(100% - 2rem, 70rem);
margin-inline: auto;
}
.sidebar {
width: clamp(16rem, 25vw, 22rem);
}Clamp works well for grid and flex gaps or components that may grow within boundaries. For overall content width, min(), max(), percentages, grid functions, and container queries may express the constraint more clearly. Use the function that matches the relationship.
CSS clamp() vs media queries
Use clamp() when one numeric value should change smoothly. Use a media query when something should switch: a grid changes columns, navigation becomes a menu, content order changes, or an element appears or disappears.
The techniques work together. A component might use fluid padding at all widths and a media query to change from one column to three. Container queries can be a better trigger than viewport queries when behavior depends on the space available to the component.
Common CSS clamp mistakes
- Putting the intended maximum before the minimum.
- Using a preferred value that never crosses the useful range.
- Choosing extreme endpoints that hurt readability.
- Applying viewport-based sizing without testing browser zoom.
- Assuming viewport width equals a component’s available width.
- Mixing incompatible units or omitting
calc()where older syntax support matters. - Using clamp for layout changes that require a real breakpoint.
- Testing only at the two endpoint widths.
Frequently asked questions
Can CSS clamp() use rem values?
Yes. Rem values are useful for user-scalable typography and spacing. A preferred expression can combine rem and viewport units when the property accepts lengths.
Is clamp supported in modern browsers?
Current versions of the major browsers support clamp(). If you support an unusually old browser, check your project’s compatibility requirements and provide a fixed declaration before the clamp declaration as a fallback.
Does clamp replace media queries?
No. It can remove some breakpoint-based sizing rules, but media queries remain appropriate for structural and behavioral changes.
Can I use clamp for spacing?
Yes. Padding, margin, gap, width, and other length-based properties are common uses. Check that the result remains sensible within its container.
Why are minimum and maximum viewport widths needed?
They define the design points for a generated linear formula. Outside that viewport range, the clamped value stays at the chosen minimum or maximum.