No Login Data Private Local Save

Typography Scale Generator - Online Perfect Header Sizes

31
0
0
0

📐 Typography Scale Generator

Generate perfectly balanced heading sizes for your web projects — instantly.

px
Common: 14–18px. Browser default is 16px.
Major Third — Great for content-rich sites
Quick Pick a Ratio

Heading 1 — The Quick Fox

Heading 2 — Jumps Over

Heading 3 — The Lazy Dog

Heading 4 — Typography Matters

Heading 5 — Design Is Details
Heading 6 — Every Pixel Counts

Body text — This is your paragraph text at the base font size. Good typography establishes a clear visual hierarchy, guiding readers effortlessly through your content.

📏 Visual Scale Comparison
LevelPXREM× Body
📋 Generated CSS
Loading...

❓ Frequently Asked Questions

A typography scale is a system of font sizes that follow a consistent mathematical ratio. Instead of picking heading sizes arbitrarily, you multiply (or divide) by a fixed ratio — such as 1.250 (Major Third) or 1.618 (Golden Ratio) — to create a harmonious, visually pleasing hierarchy. This technique has roots in classical typesetting and music theory, and it ensures your headings feel naturally proportional.

1.250 (Major Third) — Subtle, ideal for blogs and content-heavy sites with many heading levels.
1.333 (Perfect Fourth) — Balanced, great for SaaS products and modern web apps.
1.414 (Augmented Fourth) — Noticeable contrast, suits editorial and magazine layouts.
1.500 (Perfect Fifth) — Bold hierarchy, good for landing pages and marketing sites.
1.618 (Golden Ratio) — Dramatic, perfect for luxury brands, portfolios, and creative showcases.
Tip: The more heading levels you use, the smaller your ratio should be to avoid extreme jumps.

rem is strongly recommended for web typography. rem units are relative to the root <html> font size, making them accessible — users who increase their browser's default font size will see your headings scale proportionally. Set html { font-size: 16px; } (or your chosen base) and use rem everywhere else. Pixels (px) are absolute and don't respect user preferences, which can harm accessibility.

HTML provides H1 through H6, but most websites only use 3–4 heading levels in practice. H1 is your main title (one per page), H2 for major sections, H3 for subsections, and occasionally H4 for deeper nesting. Using all six levels can create too much visual complexity. Choose a ratio that keeps your most-used headings (H2–H3) comfortably distinct without being overwhelming.

16px is the browser default and the most common choice. It provides excellent readability for body text on desktop. For mobile-first designs, 16px also works well. Some designers prefer 18px for a more spacious, modern feel — especially on content-heavy sites. Avoid going below 14px for body text, as smaller sizes strain readability and may violate accessibility guidelines (WCAG recommends at least 16px equivalent).

Yes! Many designers apply the same ratio to line-height and spacing for consistent vertical rhythm. For example, if your base line-height is 1.5, you might set H1 line-height to 1.1, H2 to 1.2, etc. — decreasing as the font size increases. Combined with a typography scale, this creates a beautifully cohesive reading experience across all screen sizes.
🔧 Related Tools