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>
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!
