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.
SIZE
Free PX to REM & EM Converter
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.
Browser-local calculations & previewsYour conversion
Good type starts here.
TRY IT WITH A REAL TASK
Example: 24px at a 16px root
With a 16px root, 24 ÷ 16 = 1.5rem. If the parent is 20px, the same 24px is 1.2em. Changing the parent affects EM; changing the root affects REM.
font-size: 1.5rem; /* 24px at a 16px root */
How to use it
- Enter a size and choose PX, REM or EM.
- Set the root size for REM and the parent size for EM.
- Compare the values and copy the CSS.
A few useful answers.
How is PX converted to REM?
Divide the pixel value by the root font size. At a 16px root, 24px is 1.5rem. Change the root value here to match your website.
What is the difference between REM and EM?
For font-size, REM refers to the root element’s font size; EM refers to the parent element’s font size. Other EM-based properties can refer to the current element’s size.
Does this calculator resize my font file?
No. It calculates CSS sizes and changes the preview. It does not modify a font file.
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 → SCALEResponsive 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.
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 →