Fluid type calculator
Give the font size you want on a small phone and on a wide screen; get one clamp() value that scales smoothly in between.
Value: clamp(…)
Build pages that hold together
The sample above uses the value at this window's width.
How it works
CSS clamp(min, preferred, max) picks the preferred value but never goes below the minimum or above the maximum. The preferred value here is a straight line through your two points: a fixed part in rem plus a part that grows with the viewport width (vw). Below the "from" width the size stays at the minimum; above the "to" width it stays at the maximum.
The rem part keeps the text responsive to the visitor's own browser text size, which matters for accessibility. A value made only of vw would ignore zoom settings.
Using it in Elementor
- Open the Typography settings of a heading (or a global font in Site Settings → Typography).
- In the size field, switch the unit to custom (the pencil / "custom" unit option in recent versions).
- Paste the clamp() value. Leave tablet and mobile empty: one value now covers all screens.
If your version has no custom unit, add the value in custom CSS: selector .elementor-heading-title { font-size: clamp(…); } (Pro), or in your theme's additional CSS with your own class.
Suggested ranges
| Text | Phone | Wide screen |
|---|---|---|
| Page title (H1) | 30–36 px | 48–64 px |
| Section heading (H2) | 24–28 px | 34–42 px |
| Sub-heading (H3) | 19–21 px | 22–26 px |
| Body text | 16–17 px | 17–19 px |