Font Weights & Semantic Role Assignment

Many web fonts offer up to 9 weights (from Thin 100 to Black 900). Downloading all 9 weights adds massive performance bloat (hundreds of kilobytes of font files).

High-performing design systems standardize on 3 to 4 core weights and assign each a clear semantic role:

1. Regular (400): The baseline. Used for all multi-line body paragraphs, form inputs, and descriptive captions.
2. Medium (500): Subtle emphasis. Ideal for interactive controls, secondary button labels, and table headers.
3. Semibold (600): Strong emphasis. Card titles, modal headers, primary button labels, and selected navigation tabs.
4. Bold (700): High-level display titles (h1, h2) and critical statistical metrics.

Avoid using weights below 400 (Light/Thin) on digital screens: thin fonts look frail on low-DPI displays and fail accessibility contrast standards.