Course Directory
0 / 7 completed
Lesson 4

Typography System

Establishing clear text hierarchy

A typography system defines font families, size scales, line heights, and font weights. Using a modular scale creates visually rhythmic text hierarchy.

Key Points
  • Font Families — Primary font (body), display font (headings), monospace font (code)
  • Scale Ratios — Common ratios: 1.125 (Major Second), 1.25 (Major Third), 1.333 (Perfect Fourth)
  • Line Height — Body 1.5-1.7, Headings 1.1-1.3
  • Font Weights — At minimum: Regular (400), Medium (500), Bold (700)
Modular Type Scale
/* Base: 16px, Ratio: 1.25 (Major Third) */
--text-xs:   10px;  /* 16 / 1.25 / 1.25 */
--text-sm:   13px;  /* 16 / 1.25 */
--text-base: 16px;  /* Base */
--text-lg:   20px;  /* 16 * 1.25 */
--text-xl:   25px;  /* 16 * 1.25 * 1.25 */
--text-2xl:  31px;  /* 16 * 1.25^3 */
--text-3xl:  39px;  /* 16 * 1.25^4 */

Choose variable fonts with multiple weights to reduce requests while precisely controlling font weight.

PreviousComplete & Continue