Is this font tool free to use?
Yes. This FontReady tool is free to use and does not require a FontReady account. A free tool does not grant a licence to the font you choose; your original font licence still applies.
SCALE
Free CSS Clamp & Fluid Font Size Generator
Build responsive typography with a free CSS clamp generator. Choose minimum and maximum font sizes, preview the values between them and copy the CSS.
Browser-local calculations & previewsType that grows with the screen.
Make room for good ideas.
This simulates the calculated font size. It does not resize your browser or reproduce a whole page layout.
TRY IT WITH A REAL TASK
Example: 16px to 24px across 320–1280px
At a 16px root, these settings produce a preferred size of 0.833333rem + 0.833333vw, bounded by 1rem and 1.5rem. The midpoint, 800px, gives 20px. Test the resulting rule with your actual layout and zoom settings.
font-size: clamp(1rem, calc(0.833333rem + 0.833333vw), 1.5rem);
How to use it
- Set minimum and maximum viewport widths.
- Choose the font size at each width and your root size.
- Move the preview-width slider, then copy the clamp declaration.
A few useful answers.
What does CSS clamp() do?
It bounds a preferred fluid value between a minimum and a maximum. This generator combines REM and viewport width units to interpolate between your chosen sizes.
Can I use this with Elementor?
You can copy the generated declaration into an appropriate custom CSS rule in your website. Where supported, paste only the clamp() value into a compatible sizing control. This tool does not change Elementor settings automatically.
Does fluid typography establish accessibility compliance?
No. Check your actual page with browser zoom, enlarged text and different viewport sizes. A generated formula alone does not establish accessibility compliance.
FROM PREVIEW TO YOUR WEBSITE
Ready to put your font to work?
Convert your original font into a CSS kit, or publish fonts to Elementor Pro after connecting your website.
FROM TOOL TO WEBSITE
A little guidance for your next step.
WOFF vs WOFF2 vs TTF vs OTF: choose your font format ↗
Choose a webfont format, convert TTF or OTF to WOFF2 for free, understand outline conversion and download a CSS kit with FontReady.
How to convert and add custom fonts to Elementor Pro ↗
Convert fonts for Elementor with FontReady’s free tool. Follow the upload, WordPress approval and Custom Fonts workflow, with clear Elementor Pro requirements.
Self-host custom fonts with a free webfont CSS kit ↗
Generate a free webfont kit, upload WOFF2 files and use @font-face CSS. Match font families, weights and paths, then test your published website.
Typography Scale Calculator
Create a type scale for your website for free. Compare heading and body sizes, adjust the modular scale ratio and export reusable typography CSS variables.
Open tool → SIZEPX, REM & EM Calculator
Use this free PX to REM and EM calculator to convert CSS font sizes. Set the root and parent sizes for your project, then copy the result.
Open tool → PREVIEWFont Tester & Text Resizer
Preview your own TTF, OTF, WOFF or WOFF2 with this free online font tester. Try headings and paragraphs, adjust font size and spacing, and copy your typography CSS.
Open tool →