Font Weight

Font weight describes the thickness of the strokes that make up a typeface's characters. In CSS, font-weight is expressed on a numeric scale from 100 to 900, in increments of 100, where 100 is the thinnest (hairline or thin) and 900 is the heaviest (black or ultra-heavy). The traditional named weights — light, regular, medium, bold — map to specific points on this scale.

The numeric scale is not arbitrary. It was standardized to provide a consistent vocabulary across typefaces with different naming conventions. A typeface designer might label their weights "Book", "Demi", "Heavy", and "Display" — the numeric system creates a universal mapping so CSS can find the closest available weight regardless of naming.

/* The standard weight scale */
.thin      { font-weight: 100; } /* Hairline, Thin */
.extralight{ font-weight: 200; } /* ExtraLight, Ultra Light */
.light     { font-weight: 300; } /* Light */
.regular   { font-weight: 400; } /* Regular, Normal, Book */
.medium    { font-weight: 500; } /* Medium */
.semibold  { font-weight: 600; } /* SemiBold, DemiBold */
.bold      { font-weight: 700; } /* Bold */
.extrabold { font-weight: 800; } /* ExtraBold, Ultra Bold */
.black     { font-weight: 900; } /* Black, Heavy */

/* CSS also accepts keyword values */
.bold-keyword {
  font-weight: bold; /* Equivalent to 700 */
}

.normal-keyword {
  font-weight: normal; /* Equivalent to 400 */
}

/* Relative keywords */
.bolder {
  font-weight: bolder; /* One step heavier than parent */
}

/* Loading specific weights from Google Fonts */
/* Only request what you'll actually use — each weight adds ~20-30KB */

/* In HTML for Inter with three weights: */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> */

/* Optical sizing consideration */
.headline {
  font-weight: 700;
  /* Bold at large sizes often needs tracking adjustment */
  letter-spacing: -0.02em;
}

.body-text {
  font-weight: 400;
  /* Regular weight needs no tracking intervention at body sizes */
}

When the browser can't find the exact requested weight, it performs weight matching — finding the closest available weight using a defined algorithm. Requesting font-weight: 500 from a font that only has 400 and 700 will give you 400 (the browser first looks lighter before going heavier for weights at or below 500). Understanding this prevents unexpected visual results.

Variable fonts (increasingly common on Google Fonts for typefaces like Inter, Nunito, and Source Sans 3) change the picture entirely — a single variable font file contains the full weight range, so any value from 100 to 900 is available without multiple requests. When using variable fonts, you can use any weight value, not just the traditional increments of 100.