Those not too hip with typography might at one point wonder, “Why are the font weights on a ranking scale from 100 to 900?” Where are those numbers coming from? It was actually an interesting questions brought up to me recently that I hadn’t thought much of. After all, no one’s breaking the internet over not knowing why font-weight can take a numerical value from 0 to 900 and why anyone would want to use the numerical scale over the (arguably) more intuitive, lighter, normal, bold, bolder scale.
There are a surprising, delightful and numerous amount of things about CSS that harkens back to design theory and borrows from typography principles and font-weight’s number system is a pale echo of a type family’s numbering system. Before I get to explaining the numbers, we have to explore a few terms related to typography first.
A type family (or font-family as far as CSS properties go) is a typeface and all of its total variants. Where you might have Helvetica identified as a type family. Inside that family you’ll have members like Helvetica Roman, Helvetica Italic, Helvetica Bold.
Variants within a type family are different styles of that same typeface. For example, the Italics for a typeface is an example of a variant. Small caps style within a type family is another example of a variant. Within CSS, we declare different variants for our font-families by using font-variant.
Weights within a type family are generally considered how thick or thin a typeface appears. On the lowest end of the scale, you have the thinnest of thin characters. On the other side, you have big, bold and thick characters. As you’ve probably guessed by now, font-weight is what you generally use to affect the weight of your web typefaces. And it is with font-weight that we’re going to dive into the numbering system.
The Typography Numbering System
Most large type families have a numbering system that dates back to some of the earliest examples of variant and weight-rich typefaces such as Univers and Helvetica. These typefaces typically have family members that run the gamut of thick, thin, condensed, wide, and so on. So a type numbering system was devised to easily catalog and describe the various members of–let’s say, Univers. Where you could say, Univers Normal, you could also say Universe 430. Why does 430 mean normal?
- The first digit identifies the weight of a typeface.
- The second digit identifies its amount of compression (ex. condensed, ultrawide, etc).
- The third digit signifies the stance (roman or italic).
Typically in the numbering system, 400 is identified as “normal” weight, 30 signifies normal compression, and 0 would mean that the typeface is roman or upright. So that is what we mean by Univers 430. It is of the type family, Universe. It is normal in weight, normal in compression and upright roman in stance.
Another example might be Times New Roman 631. This would mean a Bold and Italic Times New Roman. 600 typically represents bold, 30 would indicate normal compression and the 1 identifies it as an italic variant.
Last example, Helvetica 620. This is Helvetica bold, upright and condensed. The 600 indicates Bold, the 2 is meant to represent condensed, and the 0 identifies this as an upright variant.
So that’s the typography numbering system in a nutshell. Many designers typically prefer to identify the typefaces by name–because many of us are not creatures particularly fond of nondescript numbering systems. I don’t blame you, I’m not hip on it most of the time either. But even I have to admit to its simplified, condensed elegance. However, it should be more obvious now how and where font-weight gets its numbers and considering how many web fonts have large swaths of weights, why not keep in mind what the numbers mean?
100 – The lightest of the light.
200 – Light.
300 – Book.
400 – Normal.
500 – Semibold.
600 – Bold.
700 – Extra Bold.
800 – Ultra Bold.
900 – Black.
Maybe some day CSS spec will catch up to the type family numbering system and we’ll be declaring our font-families as Proxima Nova 431. For more fabulous insights on typography as well as a quick and useful read about typefaces, check out Erik Spiekermann and E.M. Ginger’s, Stop Stealing Sheep & Find Out How Type Works (2nd Edition).
Resources
Fontfeed, It’s All in the (Type) Family
Great resource that showcases a more visual chart of the original font numbering system with Univers’ two digit example. Also takes a jab at Helvetica and I’m always for a bit of that.
