Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Introduction to Design Systems/Typography Systems: Hierarchy & Scale/
Exercise #3

Line Height (Leading) & The Inverse Proportion Rule

Line height (known in print as leading) is the vertical space between lines of text. Incorrect line height ruins legibility.

The Inverse Proportion Rule:

As font size increases, relative line height must decrease.

  • Body Copy (14px–18px): Requires generous relative line height (140% to 160% / 1.4 to 1.6). When users read multi-line paragraphs, ample line height prevents the eye from accidentally skipping lines when returning to the left margin.
  • Display & Headings (32px–64px): Requires tight relative line height (110% to 125% / 1.1 to 1.25). At large sizes, a 150% line height spreads words so far apart that multi-line headings look like disconnected sentences.

Topics

The Role of Typography in Product UX
Modular Type Scales & Mathematical Ratios
Line Height (Leading) & The Inverse Proportion Rule
Letter Spacing (Tracking): Optical Adjustments
Measure & Line Length: The 45–75 Character Rule
Font Weights & Semantic Role Assignment
Tabular Figures: Aligning Numbers in Data Tables
System Fonts vs Custom Web Fonts: Performance Tradeoffs
Fluid Typography with CSS `clamp()`
Challenge: Architecting a Production Typography Scale

From lesson

4

Typography Systems: Hierarchy & Scale

Level 3 · Design Tokens & Foundations

Top contributors

Community contribution details will appear here once real learner activity is available.

Share