The question has bothered me for a while.
In CSS, the font-weight can only be a value that is a multiple of 100, from 100 to 900
Example : https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans
So why it is so? What is the origin that its reffered as 100, 200, 300... etc. instead of, for instance, 1,2,3, etc?
Meaning of relative weights Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900).
Measured by ratio of stem thickness to x-height, the minimum step for a noticeably bold weight is a factor around 1.5 times the normal stem/x-height. That is, if the normal weight stem is a unit of 1.0, then the bold is around 1.5 units.
the default (aka "Regular") font weight is 400. the "bold" font weight is 700. the "light" font weight is 300.
font-weight: 400 is supposed to be equal to normal , while 700 is equal to bold . Finally there are the relative values bolder and lighter that make a bit of text one step bolder or lighter than the default weight (which in turn depends on the absolute font-weight value you defined).
Apparently it derives from the Linotype typeface classification system (Linotype). Where a 3-number system is used, first numeral describes font weight, second numeral describes font width, third numeral describes position.
There's an interesting article here on some of the history of specifying font weights in print.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With