Make headings feel related
A type scale keeps display text, headings, body copy and small labels in one visual family instead of seven unrelated font sizes.
Free type scale generator for web designers
Create a balanced typography scale.
Choose a base font size and ratio, preview headings and body sizes, then copy clean CSS variables for your website or design system.
Copy usable variables
Generate rem-based CSS variables you can paste into a stylesheet, design system or prototype.
Build with proportion
Use gentle ratios for calm interfaces or larger ratios for editorial websites, landing pages and strong typographic contrast.
What is a type scale?
A type scale is a structured set of font sizes based on a mathematical ratio. It helps designers choose sizes for headings, body text, captions and UI labels with intention.
Instead of choosing each size by eye, you define a base size and a ratio. The scale then grows upward for headings and downward for smaller text. This creates a typography system that feels coherent across a page.
Why designers use type scales
- To create clear visual hierarchy.
- To keep websites and apps consistent.
- To make CSS easier to maintain.
- To avoid random font-size decisions.
Frequently asked questions
What is the best type scale ratio?
For most websites, 1.2 or 1.25 is a safe start. Larger ratios such as 1.333 or 1.5 create more dramatic heading contrast.
What base font size should I use?
16px is a reliable default for body text. Editorial layouts can often use 18px for a calmer, more spacious reading rhythm.
Can I use the generated scale in CSS?
Yes. Copy the CSS variables and use them for headings, body text, labels and design tokens.