All tools
Design tools

Typography Scale Generator

Generate a modular type scale from 12 classical ratios — Perfect Fourth, Golden Ratio and more. Get CSS custom properties and a Tailwind config snippet ready to copy.

12 ratios CSS variables Tailwind config rem output Base size control Live preview
Get started free Sign in

Free · No credit card · 50 credits/day

Available type scale ratios

Scale name Ratio Best for
Minor Second 1.067 Very subtle — dense UI, data tables, admin panels
Major Second 1.125 Subtle — documentation, technical writing
Minor Third 1.200 Compact hierarchy — apps, SaaS products
Major Third 1.250 Balanced — most websites, landing pages
Perfect Fourth 1.333 Clear — marketing sites, portfolios
Perfect Fifth 1.500 Dramatic — editorial, magazine layouts
Golden Ratio 1.618 Very dramatic — hero-heavy, large displays

Frequently asked questions

What is a modular type scale?

A sequence of font sizes built by multiplying a base size by a fixed ratio. Example: base 16px × Perfect Fourth (1.333) gives 16, 21.3, 28.4, 37.9, 50.5px... Each step is 1.333× the previous. This creates a mathematically harmonious hierarchy where headings feel proportionally right relative to each other and to body text.

Which type scale ratio should I choose?

Minor Third (1.2): compact, great for dense app UIs. Major Third (1.25): balanced, works for most websites. Perfect Fourth (1.333): clear hierarchy, common for marketing. Perfect Fifth (1.5): dramatic, editorial/magazine. Golden Ratio (1.618): very dramatic, best for hero-heavy layouts. Start with Perfect Fourth if unsure.

What base font size should I use?

16px: browser default, common standard. 18px: recommended for text-heavy content (articles, docs). 14px: dense UI elements, tables, sidebars. Never below 14px for readable text. Use rem units so browser font size settings (accessibility feature) work correctly.

How do I implement a type scale with CSS custom properties?

:root { --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; } Then: h1 { font-size: var(--text-3xl); }. Change one base value and the whole scale adjusts proportionally.

Related design tools

More tools for typography and design systems.

Font Pairing Suggester

Choose the heading and body fonts to pair with your new type scale.

Contrast Checker (WCAG)

Check text at each scale size against your background colors.

Color Palette Generator

Build the color system to complete your design tokens.

Build harmonious type hierarchies in seconds

Free account. 50 credits per day. Access to 75+ tools instantly.

Create free account →