Responsive Typography Calculator
Generate fluid responsive font-size CSS with clamp(). Enter min/max sizes and viewport widths — the calculator produces the correct slope-based formula and copy-ready CSS.
How to use
- Enter the smallest font-size you want on mobile.
- Enter the largest font-size on desktop.
- Set the viewport range where the scaling occurs.
- Copy the clamp() formula directly into your CSS.
Frequently asked questions
How does clamp() work?
clamp(min, preferred, max) picks the preferred value but bounds it between min and max. Preferred can include vw units to scale fluidly.
What is the slope in the clamp formula?
The slope is the linear rate at which font-size grows per viewport unit. This calculator computes it from your min/max values using the line equation between two points.
Does clamp() hurt accessibility?
Not if you use rem for the min and max. Pure vw-based font-size ignores zoom. Always include rem boundaries.