Fluid Typography Calculator
Calculate heading and paragraph scales and CSS clamp values between two screen widths.
Start from
The text stays at the minimum size up to the phone width, grows evenly, and stops at the maximum size from the wide width on.
Your result
Type the smallest and largest size to get the CSS.
| Screen | Text size | Sample |
|---|
The CSS uses rem and assumes the browser default of 16 px. If a visitor raises their default text size, the text grows with it.
How to use it
- Pick a preset or type the smallest and largest text size in px.
- Type the phone and wide screen widths.
- Copy the CSS and check the sizes in the table.
Examples
- Body text16 to 20 px, 320 to 1200 px wide clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem)
- Large title16 to 64 px, 320 to 1200 px wide clamp(1rem, 5.4545vw - 0.0909rem, 4rem)
Tool details and privacy
Get a CSS clamp() font size that grows smoothly from a phone screen to a wide screen, and see the size at common widths.
One line of CSS replaces several media queries for text size.
Options
- Whole pixels from 1 to 4,000. The maximum must not be below the minimum, and the wide width must be larger than the phone width.
Limits
- rem assumes the browser default of 16 px.
- It sets one size, not a whole type scale.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
What does 16 to 20 px between 320 and 1200 give?
clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem).
Does the text grow if a visitor zooms?
Yes, because the sizes are in rem.
Can both widths be equal?
No.
Is anything uploaded?
No.