🔡Typography Scale Generator

Generate modular typography scales for design systems.

🆓 Free🔒 Secure⚡ Instant📱 Mobile-friendly🚫 No signup

Generate typography scales online for free. Get CSS custom properties for responsive font sizing.

Base Size (px)

Scale Ratio

Steps Above Base

xsAa10.2px / 0.640rem

smAa12.8px / 0.800rem

baseAa16.0px / 1.000rem

lgAa20.0px / 1.250rem

xlAa25.0px / 1.563rem

2xlAa31.3px / 1.953rem

3xlAa39.1px / 2.441rem

4xlAa48.8px / 3.052rem

5xlAa61.0px / 3.815rem

6xlAa76.3px / 4.768rem

CSS Custom Properties

--text-xs: 0.640rem; /* 10.2px */
--text-sm: 0.800rem; /* 12.8px */
--text-base: 1.000rem; /* 16.0px */
--text-lg: 1.250rem; /* 20.0px */
--text-xl: 1.563rem; /* 25.0px */
--text-2xl: 1.953rem; /* 31.3px */
--text-3xl: 2.441rem; /* 39.1px */
--text-4xl: 3.052rem; /* 48.8px */
--text-5xl: 3.815rem; /* 61.0px */
--text-6xl: 4.768rem; /* 76.3px */

How to Use Typography Scale Generator — Step by Step

1Set the base font size and scale ratio (e.g. 1.25 Major Third, 1.618 Golden Ratio)
2The type scale generates 6-8 sizes from h1 to body text
3Preview the scale with real text to see proportions
4Copy the CSS custom properties or font-size values

Frequently Asked Questions

Is this tool completely free?

Yes. All ToolNest tools are 100% free with no signup required, no account, and no watermarks added to output files.

Are my uploaded files secure and private?

All uploads use HTTPS encryption during transfer. Files are processed on secure isolated servers and automatically deleted within 2 hours of upload.

Does this tool work on mobile phones?

Yes. ToolNest works on any modern browser on iPhone, Android, tablet, or desktop — no app download or plugin needed.

Do I need to create an account?

No. Just open the tool, upload your file, and download the result. No email, no signup, no password.