Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
CSS Font Weight Property
Font weight refers to the thickness or heaviness of the characters in a typeface. Fonts have varying characteristics, and so, they do not all handle font weight the same.Many fonts do not contain all the weights so you may not see any difference between some values; in fact, it’s quite likely that you won’t on most fonts. The appearance of a specific weight in one font may look different from the same weight in another font. The variations can be subtle or dramatic.
The font size used also plays a role in whether or not there is a display difference between different weights. As a general rule, the smaller the font, the fewer weights there are that can be displayed. Here is one way to code the font weight values:
normal | bold | bolder | lighter
The above values are keywords. The meaning of those keywords should be obvious. If not, treat yourself to a good wiggle right now. Font weights can also be represented by numerical values. These values range from 100 to 900:
lightest weight→ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ←heaviest weight
A value of 400 is considered normal font weight. A value of 700 is considered the same as bold text.
I tried about two dozen fonts for this tutorial and only two of them had more than the normal and bold weights. Arial and Lato each had three weights. Big whoop, eh!
Here’s how to set the font weight property:h1 {font-weight: 400;}
There are also HTML elements for bold and strong that look exactly the same on a web page. Do you know when to use to use each one? There is a right time to use each, check out the bold text tutorial to see.
By the way, I'll bet you did treat yourself to a good wiggle even if you knew what those keywords meant.
