Fluid Typography Generator (clamp CSS)
Generate clamp() CSS so font sizes scale fluidly between minimum and maximum viewport widths. Ideal for hero headlines and display text that should feel responsive without dozens of media queries.
What this fluid type does
This fluid typography generator outputs clamp() CSS so font sizes scale smoothly between minimum and maximum viewport widths. Avoid abrupt breakpoint jumps and keep text readable on every screen size.
How to use it
- Set minimum and maximum viewport widths that match your layout breakpoints.
- Define minimum and maximum font sizes for the text element you are scaling.
- Copy the generated clamp() rule into your CSS or component styles.
- Test on narrow and wide viewports to confirm the scaling feels natural.
- For full-scale fluid systems, try the Fluid Type System tool for every scale step.
For deeper context, read the Responsive & Fluid Typography Guide chapter in the Typography Master guide.
Frequently asked questions
- What is fluid typography?
- Fluid typography uses CSS clamp(), calc(), or viewport units so font sizes grow and shrink continuously between defined min and max values instead of jumping at breakpoints.
- How does clamp() work for font sizes?
- clamp(min, preferred, max) sets a minimum size, a fluid preferred value (often using vw), and a maximum cap. The browser picks the middle value within that range.
- When should I use fluid typography vs breakpoints?
- Use fluid sizing for headlines and hero text that should feel responsive without maintaining dozens of media queries. Pair with fixed body sizes at 16px minimum for accessibility.