What is the difference between rem and px?

rem (root em) is relative to the browser root font size (usually 16px). Using rem makes your typography scale with user preferences and accessibility settings. px is an absolute unit that ignores user preferences.

Which ratio should I use for a web app?

Minor Third (1.200) or Major Third (1.250) work well for most web apps — they provide enough contrast between sizes without the dramatic jumps of larger ratios. Perfect Fourth (1.333) works well for content-heavy sites.

Is my data uploaded to a server?

No. Everything runs locally in your browser using JavaScript. Your data never leaves your device.

How do I add sub-base sizes (xs, 2xs)?

Divide the base by the ratio for each smaller step. For example, with a 16px base and 1.25 ratio: xs = 16/1.25 = 12.8px. This tool shows sizes above base; for sub-base sizes, divide instead of multiply.

🔤

Typography Scale Generator

Generate a modular typography scale in rem and px. Choose a base size, scale ratio and preview all steps. Export CSS custom properties instantly. Free.

🎨 Design & Color Tools Free Browser-based

Tool

Base size (px)

Scale ratio

Steps above base

NamerempxPreview

What Is a Modular Type Scale?

A modular scale generates font sizes by multiplying a base size by a consistent ratio. This creates visual harmony — each size is mathematically related to the next, producing a natural rhythm throughout the typography of a design.

Popular Scale Ratios

Ratio	Name	Feel
1.125	Major Second	Subtle, compact (body text)
1.200	Minor Third	Balanced (most UIs)
1.250	Major Third	Comfortable contrast
1.333	Perfect Fourth	Classic editorial
1.618	Golden Ratio	Bold, dramatic headings

Using in CSS

Paste the exported :root block into your stylesheet. Reference sizes with font-size: var(--text-xl). The step names (sm, base, lg, xl, 2xl…) follow common Tailwind-inspired naming conventions.

Typography Scale Generator

What Is a Modular Type Scale?

Popular Scale Ratios

Using in CSS

Frequently Asked Questions