Introduction: The Problem We All Face
Have you ever designed a heading that looked perfect on desktop, only to find it shrinks into unreadable text on mobile?
Or maybe your perfectly sized mobile text turns into a giant billboard on a large monitor?
That’s exactly where clamp() comes to the rescue. 🎯
What is CSS clamp()?
In simple terms, clamp() lets you say: “Never go smaller than this, ideally be this, but don’t go bigger than that.”
The formula looks like this:
clamp(minimum, ideal, maximum)
- minimum: The smallest size your text can be (px, rem, etc.)
- ideal: A flexible size based on screen width (often
vw) - maximum: The largest size your text can reach
📌 The Big Advantage: You can make text responsive without writing a single media query.
A Simple Example
h1 {
font-size: clamp(1rem, 2.5vw, 2rem);
}
Here’s what it means:
- On mobile: Never smaller than 16px
- On medium screens: Adjust flexibly based on screen width
- On large screens: Never larger than 32px
The result? A heading that looks balanced on every device.
A More Practical Example
Let’s style both headings and paragraphs:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
p {
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
This way, your headings stay bold and readable on large screens, while paragraphs remain comfortable to read on smaller ones.
Browser Support
- Supported: Chrome, Firefox, Edge, Safari
- Not supported: Old Internet Explorer
