Font Weight Bug: IE9 vs Firefox

IE9 vs Firefox

Above is a comparision of IE9 and Firefox. As you can see, IE9 was bolding the font much larger than Firefox and other browsers and causing it to misrender on the page. View a demo of this effect >>

Note: Remember to view demo in IE9.

Re-Education

Before jumping to the solution, we should first re-review the font-weight CSS property. Historically speaking, we've used font-weight: bold; and occasionally font-weight: normal; to reset an element's font-weight. Eventually numeric values were added that allow us to pick font-weights ranging from 100 to 900.

Numeric font-weights definition from Mozilla's development network is as follow:

Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Font-Weight Keyword Values

Like other property values in CSS, there are also keywords that can be used for font-weight. Historically, we've all been using bold as the de-facto font-weight, but each keyword behind the scenes maps to a numeric value.

font-weight: lighter

One font weight lighter than the parent element (among the available weights of the font).

font-weight: normal

The normal keyword corresponds to the numeric value of 400

font-weight: bold

The bold keyword corresponds to the numeric value of 700

font-weight: bolder

One font weight darker than the parent element (among the available weights of the font).

The Solution: Reseting Element's Default Font Weight

Historically, there have been a handful of elements in HTML that are rendered as bold by default. In IE9, if you happen to nest any of these elements within another bold element, the double-bold font effect occurs.

Below we have a TH element with a H3 nested inside of it. This will trigger the double bold effect in IE9:

<table> <tr> <th><h3>Table Column Heading</h3></th> </tr> </table>

View Example of This In IE9 »

What appears to be happening in IE9 when nesting bold elements, is it's changing their font-weight from bold/700 to bolder/900.

To overcome this undesired effect, simply reset all of the standard bold elements back to font-weight: bold:

th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: bold; }

Voila! Problem solved!

Further Reading

....Read More >>