Are all CSS font-weight property's values useful?

Question

font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:200
font-weight:300
font-weight:400
font-weight:500
font-weight:600
font-weight:700
font-weight:800
font-weight:900

I've only used font-weight:bold and sometimes font-weight:normal to override bold so far. What are the usages of the others?

I created this example page with all the values for the property, but there's not much difference in many of them.

http://jsbin.com/omaha3

Answer 1

If the font you are displaying has more weights like semi-bold, light, etc. the browser may be able to render those weights if you use one of the numeric values. Most end-user fonts come with two or three styles only, though, so I don't think this is much applicable to the real world. I would rely on normal (=400 I think) and bold (=700) only.

There's good additional info in the W3C reference on font-weight: bold as well.

Update: Here is an in-depth blog post on how the styles are rendered in modern browsers. It is titled "Font-weight is still broken in all but one browser" :)
2nd Update: As clagnut.com suffered a catastrophic dataloss here is the archived post

Answer 2

It depends on the browser/OS too. Firefox on the Mac tends to support more graduations (5 different weights for Myarid pro) and Firefox 3 on Windows will sometimes display a light font. The other browsers on Windoows or Mac only display two weights - bold or normal.

When I want cross-browser control of font-weight, I set my text color to a grey - say #777 and then my bold colors can be #444 and #000 and my lighter colors can be #aaa and #ddd. It doesn't change the thickness like font-weight does but it still gives the visual impact.

---

edited to add the IE6 craziness with font-weight

font-weight:600 in a print stylesheet causes IE6 to print out bold and italic but print preview shows only bold.