Skip to content
UX Atlas
Plate FND·033 · UI foundationGrid C2 · Rev. 2026-08-14

Font Weight

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2A working weight set
  3. 3Rules
  4. 4Using weight as a hierarchy lever
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Defining typography tokens.
  • Creating hierarchy in constrained vertical space.
  • Tuning a dark theme.

Common mistakes

  • Adjacent weights used for emphasis.
  • Faux bold from a missing weight file.
  • Light weights on body text.
  • Adding a weight to the system for a single component, which then becomes the weight everyone reaches for.

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.

Using weight as a hierarchy lever

Do

  • Use weight where size would cost layout space, as in tables and dense lists.
  • Keep to two or three weights, and give each one a role.
  • Compensate on dark backgrounds, where type appears heavier than it is.

Do not

  • Use weights under 400 for anything small, which thins to illegibility.
  • Load six weights when three are used.
  • Rely on faux bold from the browser, which distorts the letterforms.

In practice

  1. i.

    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.

  2. ii.

    Four weights, three of them unused

    What the system actually needs

    A product loading light, regular, medium, semibold and bold used three across the whole interface. Each unused weight cost bytes on every page load and gave one more thing for a component to pick wrongly.

Local chart

FND·033 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Variable FontTERM·064 · SHORT DEFINITIONContrastFND·002 · RELATED CONCEPTDark ModeFND·027 · RELATED CONCEPTEmphasisFND·018 · RELATED CONCEPTFont SelectionFND·030 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPTTypographic HierarchyFND·032 · RELATED CONCEPTVariable FontsFND·037 · RELATED CONCEPT

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.