What is Type Scale?

Type Scale creates systematic relationships between font sizes using mathematical ratios. Common scales: minor third (1.2), major third (1.25), perfect fourth (1.333), golden ratio (1.618). Ensures visual harmony and consistent hierarchy across all text sizes.

When Should You Use This?

Use type scale for all digital products as foundation of design system. Essential for maintaining consistency across components and screens. Design tokens should include complete type scale (body, h6, h5, h4, h3, h2, h1, display).

Common Mistakes to Avoid

• •Random sizes—arbitrary font sizes (14px, 17px, 23px) lack harmony; use systematic scale
• •Too many sizes—stick to 6-8 sizes in scale; more creates inconsistency
• •Ignoring ratio—type scale needs underlying mathematical relationship; pick a ratio and stick to it
• •Poor mobile adaptation—scale may need adjustment for mobile; large display text can overwhelm small screens
• •Forgetting line height—type scale should include line heights that scale proportionally

Real-World Examples

• •Material Design—uses 13 predefined type styles with systematic scale
• •Tailwind CSS—provides type scale from xs to 9xl with consistent ratios
• •Type-scale.com—interactive tool for generating harmonious type scales
• •Apple Human Interface Guidelines—defines type scales for iOS/macOS