Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
CSS clamp() lets a font size grow or shrink smoothly with viewport width while keeping it between a chosen minimum and maximum. A common pattern uses rem values for the bounds and a viewport-relative value such as vw for the preferred size.
What does clamp() do for typography?
clamp() takes three comma-separated expressions: a minimum, a preferred value, and a maximum. The browser uses the preferred value while it remains within the bounds; below the minimum it uses the minimum, and above the maximum it uses the maximum. MDN defines it as a way to keep a value within a range between minimum and maximum bounds (MDN clamp() reference).
For font sizing, a viewport-relative preferred value makes the type respond to viewport width. The outer values prevent it from becoming smaller or larger than the limits you set.
How do you write a fluid font-size rule?
For example, this heading starts at a minimum of 1.5rem, uses 4vw as its preferred size, and stops growing at 3rem:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}In this rule, 4vw represents 4% of the viewport width, so the preferred font size changes as the viewport changes. The rem values set the lower and upper limits relative to the root font size. See MDN’s guide to CSS values and units for context on viewport-relative units.
MDN also documents font-size: clamp(1rem, 2.5vw, 2rem);. Treat either set of numbers as an example, not a universal preset: appropriate values depend on the typeface, the design, and the range of viewport widths you intend to support.
How should you choose the minimum, preferred value, and maximum?
- Minimum: Choose the smallest size that remains readable and fits the narrow end of your intended layout.
- Preferred value: Choose a viewport-relative expression that gives the desired gradual change as the viewport widens or narrows.
- Maximum: Set the largest size that suits the wide layout without letting the text dominate it.
Check the result at the narrow and wide ends of your intended viewport range, as well as at intermediate widths. If the type should stop changing at a particular point, or the page layout changes structurally, combine the fluid rule with other responsive CSS as needed. clamp() can simplify a fluid sizing rule; it does not remove every need for media queries.
How do you check text resizing and zoom?
MDN advises that when clamp() controls text size, the maximum should be a relative length unit no less than twice the minimum. Its example is clamp(1rem, 2.5vw, 2rem). MDN says this helps text scale to at least 200% when the page is zoomed (MDN clamp() reference).
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Use that ratio as a check, not as proof that the whole page is accessible. Test text resizing and zoom on the actual page, and confirm that text remains readable and that the layout continues to work.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Does clamp() replace media queries, and which browsers support it?
MDN notes that its fluid-typography example has the same effect in one line, without media queries. That describes the example’s fluid sizing behavior, not every responsive design need: a page may still need breakpoint rules when its layout or styling changes at specific widths.
MDN marks clamp() as widely available and reports browser availability since July 2020. Compatibility details can change, so check MDN’s current clamp() reference if browser support is central to your project. The function is documented in the CSS Values and Units Module Level 4 specification, linked from that reference.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
