Font Weight for Visual Hierarchy — Beyond Bold and Regular

Font Weight as a Hierarchy Tool

Most developers only use two weights: 400 (regular) and 700 (bold). But modern variable fonts offer a continuous weight spectrum from 100 to 900, enabling much more nuanced hierarchy.

The Weight Spectrum

Weight	Name	Common Use
100	Thin	Decorative display text
200	Extra Light	Large hero headings
300	Light	Secondary info, captions
400	Regular	Body text
500	Medium	Emphasized body, labels
600	Semi Bold	Sub-headings, buttons
700	Bold	Primary headings
800	Extra Bold	Hero headlines
900	Black	Impact statements

Building a Weight System

Define a clear weight hierarchy for your project:

:root {
  --font-weight-heading: 700;
  --font-weight-subheading: 600;
  --font-weight-body: 400;
  --font-weight-label: 500;
  --font-weight-caption: 300;
}

Weight and Size Relationship

An important principle: as size increases, weight can decrease. A 72px heading at weight 300 can have as much visual impact as a 24px heading at weight 700. This creates elegant, sophisticated typography.

.hero-title {
  font-size: 4rem;
  font-weight: 300;  /* Light weight at large size */
}
.section-title {
  font-size: 1.5rem;
  font-weight: 700;  /* Bold at smaller size */
}

Variable Font Advantage

Variable fonts allow you to use any weight value (e.g., 450, 550), not just the standard increments. This gives you fine-grained control over hierarchy.