Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Font Weight

The most space-efficient hierarchy lever, and the one most often limited by the typeface.

Definition

Weight is the thickness of a typeface's strokes, conventionally numbered from 100 to 900. Interfaces typically need three to four weights, and the gaps between them must be large enough to perceive.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. A working weight set
  3. Rules
  4. In practice
  5. Continue from here

A working weight set

WeightNameUse
400RegularBody text and most interface text.
500MediumLabels, table headers, subtle emphasis.
600SemiboldHeadings, primary buttons, strong emphasis.
700BoldDisplay headings. Often unnecessary if 600 is available.

Rules

  • Adjacent weights such as 400 and 500 are barely distinguishable in body text. Skip a step for real emphasis.
  • Never use faux bold, where the browser synthesises weight. It distorts letterforms and renders poorly.
  • Light weights below 300 fail on low-resolution displays and in low contrast conditions. Avoid them for anything that must be read.
  • Increase weight rather than size when vertical space is constrained.
  • Bold text should be used for emphasis within a paragraph, and marked up with strong so the emphasis is conveyed to assistive technology.

In practice

Weight instead of size in tables

Data tables

Making column headers medium weight at the same size as the data preserves row density while making the header row unmistakable.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.