Wolf’s Little Store

While playing around with the beta version Firefox 3 I noticed my headings were a bit thin and started editing this blogs’ stylesheet to find out what was wrong. Apparently the newest version of Firefox supports font weights a bit better than browsers did before.

A little bit of testing and here’s the results (the font is Gill Sans):

Font weights	Rendering
100 to 300
400 to 500
600 to 900

The CSS2 recommendation says:

100 to 900

These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor.

normal

Same as ‘400′.

bold

Same as ‘700′.

bolder

Specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was ‘900′, in which case the resulting weight is also ‘900′.

lighter

Specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was ‘100′, in which case the resulting weight is also ‘100′.

I had my font weights set to 300, which caused the ‘light’ rendering (in other words, 400 is normal so 300 is lighter). So, remember to set 400 or 500 instead of 300 if you don’t want your sites to look different in the future. That’s all!

• Category: webdesign
• Back to the overview