Question 1

What is a modular type scale?

Accepted Answer

A modular type scale is a sequence of font sizes built by multiplying a base size by a fixed ratio. For example, with a base of 16px and a Perfect Fourth ratio (1.333), the scale is: 16, 21.3, 28.4, 37.9, 50.5px... Each step is 1.333× larger than the previous. This creates a mathematically harmonious typographic hierarchy — headings feel proportionally right relative to each other and to body text.

Question 2

Which type scale ratio should I choose?

Accepted Answer

Minor Second (1.067) — very subtle, almost invisible steps. Minor Third (1.2) — gentle, compact hierarchy, great for apps with dense UIs. Major Third (1.25) — balanced, works for most websites. Perfect Fourth (1.333) — clear hierarchy, commonly used in marketing sites. Perfect Fifth (1.5) — dramatic contrast, best for editorial/magazine. Golden Ratio (1.618) — very dramatic, best for large displays or hero-heavy layouts.

Question 3

What base font size should I use?

Accepted Answer

16px is the browser default and a common standard for body text. 18px is recommended for text-heavy content (articles, docs) — more comfortable to read at length. 14px works for dense UI elements like tables and sidebar nav. Avoid going below 14px for any readable text. Use rem units (1rem = 16px by default) so users can override the base size through browser settings — an accessibility requirement.

Question 4

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

Accepted Answer

Define the scale in :root and reference variables throughout your CSS: :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 use: h1 { font-size: var(--text-3xl); }. This makes the entire scale adjustable from one place — change --text-base and every relative size adjusts proportionally.

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

Typography Scale Generator

Available type scale ratios

Frequently asked questions

Related design tools

Build harmonious type hierarchies in seconds