CSS Clamp / Responsive Font Size Generator
Last updated:
Generate fluid typography and spacing with CSS clamp(). Set a min and max size and your viewport range, then copy a clamp() value that scales smoothly across every screen, no media queries needed.
The quick brown fox jumps over the lazy dog.
Runs in your browser. Nothing is uploaded.
For freelancers & agencies
Have a client who needs a better website or help getting found?
Introduce them to Web Aloha. We handle the proposal, delivery and support directly with your client.
Have a client who needs a better website or help getting found?
Introduce them to Web Aloha. We handle the proposal, delivery and support directly with your client.
One-off projects: 10%, with a $100 minimum.
Monthly retainers: 10% each month for the first six months.
More options Send us this result or get a copy by email
Refer a Client, Earn a Reward
Introduce a client who needs a website or help getting found. We handle the proposal, delivery and support directly with your client. One-off projects pay 10%, with a $100 minimum. Monthly retainers pay 10% each month for the first six months.
How Fluid Type Is Calculated
- Two anchor points, your min size at the min viewport and max size at the max viewport.
- Find the slope, the change in size divided by the change in viewport width gives a vw value.
- Find the intercept, a fixed rem term keeps text zoomable and accurate.
- Wrap in clamp(), the min and max bounds stop the size going too small or too large.
Why Fluid Type Helps
- Fewer media queries, one clamp() replaces several breakpoint rules.
- Looks right everywhere, type scales continuously instead of jumping.
- Accessible, a rem component keeps text zoomable for users who need it.
- Cleaner CSS, less code to maintain and fewer edge cases to test.
Fluid typography is one of the techniques we lean on in our web design services to build sites that look sharp on every screen without a pile of breakpoints to maintain.
CSS clamp() Reference
The clamp() function takes three arguments in the form clamp(MIN, PREFERRED, MAX). The browser uses the preferred value but never lets it fall below the minimum or rise above the maximum.
| Part | Role | Example |
|---|---|---|
| MIN | The smallest value allowed. The result never goes below this on small screens. | 1rem |
| PREFERRED | The target value, usually a rem plus vw formula so it scales with the viewport. | 0.5rem + 2vw |
| MAX | The largest value allowed. The result never goes above this on wide screens. | 2rem |
Put together, that example reads clamp(1rem, 0.5rem + 2vw, 2rem): it stays at 1rem on narrow screens, scales fluidly in the middle, and locks at 2rem once it gets large.
Fluid Typography Examples
Starting points for a fluid type scale between a roughly 360px and 1280px viewport. Tune the numbers in the generator above to fit your design.
| Use case | clamp() value |
|---|---|
| Hero heading (H1) | clamp(2rem, 1.2rem + 3.6vw, 4rem) |
| Section heading (H2) | clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem) |
| Subheading (H3) | clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem) |
| Body text | clamp(1rem, 0.95rem + 0.25vw, 1.125rem) |
| Lead paragraph | clamp(1.125rem, 1rem + 0.6vw, 1.5rem) |
| Section padding | clamp(2rem, 1rem + 5vw, 6rem) |
| Grid gap | clamp(1rem, 0.5rem + 1.5vw, 2.5rem) |
Building a consistent fluid type scale by hand is fiddly. If you would rather hand it off, our web design services ship responsive, accessible design systems that look sharp on every device.
Next steps
CSS Clamp Generator related tools and articles
Continue with the closest follow-up checks and guides based on this tool's topic, crawl intent, and optimization workflow.
