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.
HIERARCHY
Free Typography & Type 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.
Browser-local calculations & previewsYour type hierarchy
| Style | PX | REM |
|---|
TRY IT WITH A REAL TASK
Example: a 16px body with a 1.2 ratio
A 16px base gives a 19.2px H6 and a 23.04px H5. Six steps place H1 at about 47.78px. Use the preview to decide whether long headings need a smaller size on mobile.
H6 = 16 × 1.2 = 19.2px H1 = 16 × 1.2⁶ ≈ 47.78px
How to use it
- Choose a body size, scale ratio and root font size.
- Review headings, body text and captions together.
- Copy the CSS custom properties into your stylesheet.
A few useful answers.
How are the heading sizes calculated?
Each heading is one ratio step above the next smaller size. H6 is one step above body text, H1 is six steps above it, and the caption is one step below body text.
Which typography ratio should I use?
There is no universal best ratio. Compare the preview against your content, available space and intended hierarchy, then test on small screens.
Does this tool install a global typography kit?
No. It exports CSS variables for you to review and apply. Font installation and Elementor global typography settings are separate tasks.
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.
Responsive 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 → 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 → WORD STUDIOTypography Lorem Ipsum Generator
Generate free placeholder text for website mockups and font testing. Choose lorem ipsum, prepared English samples or pangrams, then copy text or HTML or download TXT.
Open tool →