Why is the default font weight 400?

Issue

So, when working with fonts :

  • the default (aka “Regular”) font weight is 400
  • the “bold” font weight is 700
  • the “light” font weight is 300

But… why ? 400 what ? Is this a sort of unit ? Is there a historical reason behind that ?

Solution

Not “400 what”, just 400. As per the CSS specification, first formalized in https://www.w3.org/TR/CSS1/#font-weight. there are nine levels of font weight, represented as unitless numbers, starting at 100 and ending at 900, in 100 increments.

In addition to this, the spec defines two mappings between numerical value and string value:

  • the numerical value 400 and the string value normal are the same thing, and
  • the numerical value 700 and string value bold are the same thing

(Note that while CSS4 will change this to allow for the numbers 1-1000 in increments of 1, it will still only officially recognise the string values normal and bold, still mapping to 400 and 700 respectively. See https://drafts.csswg.org/css-fonts-4/#font-weight-prop for more information)

The only formal rules around these weights is that if you’re using a font family in CSS context, a font weight of 400/normal should get you whatever is that font family’s Regular typeface, and a font weight of 700/bold should get you whatever is the font family’s Bold typeface. Anything else is left entirely undefined, and all you know is that 100, 200, and 300 are probably lighter than 400, 500 and 600 are probably in between regular and bold, and 800 and 900 are probably heavier than 700.

All of those are qualified as “probably” because @font-face gets to completely invalidate everything about this. If you use @font-face, you overrule CSS’s rules for what those numerical values mean entirely. For example: this rule will effect an ultra-thin font when you set font-weight to 900, because that’s what we’re telling the browser it must do:

@font-face {
  font-family: MyFont;
  font-weight: 900;
  src: url("./fonts/ultra-thin.woff2") format("WOFF2");
}

Also important to know is that these are the only two official number/string mappings. Officially there are no other mappings, and the table of numerical values in https://drafts.csswg.org/css-fonts-3/#font-weight-prop is there purely to illustrate which real CSS values map to which rough names people tend to use for them.

The most important part is that this only applies to CSS. It has nothing to do with actual font-stored values, or things you see in word processing software, etc.

Answered By – Mike 'Pomax' Kamermans

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.