Clamp CSS Font-Size Calculator
Make type responsive the easy way: pick min/max font sizes and viewport widths, and get a ready-to-paste clamp() for smooth scaling.
Live preview:
The quick brown fox jumps over the lazy dog.
Frequently Asked Questions
Frequently Asked Questions
What does a font size clamp do?
Clamp sets a font size that grows and shrinks with the screen but never gets too tiny or too huge. Think of it as a smart minimum, a comfy middle, and a safe maximum—all in one line.
How to use the clamp function?
Use it like this: font-size: clamp(min, preferred, max); The browser picks a size between your min and max, based on the screen. Example: font-size: clamp(16px, 2vw + 8px, 28px);
What is the golden rule for font size?
Keep it readable first: start body text around 16px, give headings some scale, and make sure lines aren’t too long. If it’s easy to read without zooming, you’re doing it right.
Why not just set the font sizes in pixels?
Pixels don’t adapt well. On small screens they can feel cramped; on big screens they can look tiny. Clamp (and relative units) lets type adjust gracefully while respecting your limits.
Shamelessly copied and modified from an excellent original source.