Font Weight

Font weight in CSS is set via the font-weight property using numeric values from 100 to 900. Most design systems use four to six weights: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), and Black (900). The same numeric value produces different visual results in different fonts because each typeface is drawn at its own proportions. A Bold in one font may look lighter than a Bold in another. Variable fonts give you continuous weight control across the full range.

Guessing what a weight looks like. A Bold at 700 in one font looks different from a Bold at 700 in another because each typeface has its own stroke weight at each nominal weight. Always preview weights in context rather than relying on the number.

Using too many weights. Four to six weights give a complete hierarchy. Nine weights create decision paralysis and visual noise. Choose four weights and use them consistently.

The numeric scale runs 100 to 900, and the naming convention is fixed: 400 Regular, 500 Medium, 600 Semibold, 700 Bold, up to 900 Black. Most interface type works with two or three of these, not all nine. A workable system uses 400 for body, 500 or 600 for labels and emphasized terms, and 700 for headings, with 800 and 900 reserved for display moments where heavy strokes read as deliberate.

CSS accepts the numeric value and the old keywords, but a number is safer because it maps to the file you loaded instead of a browser guess. Below 400, body text at 14px loses the weight it needs; above 700, headings gain drama but can blur on low-density screens. If the family is variable, the font-weight property covers the whole range. The weight tester lays the steps out side by side so you can see where your chosen family stops being legible.