Why does bold monoface shift vertically on Windows?

Question

In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.

Why is that? How can I fix it?

ЯegDwight · Accepted Answer · 2010-03-12T13:04:17.800

1

Why is that?

Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.

How can I fix it?

The only solution that has worked so far for me is this:

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.

edited Mar 12 '10 at 13:04

answered Mar 12 '10 at 12:10

ЯegDwight

24,821
10
45
52

For "monospace bold", span.offsetTop is 9 where the other spans have offsetTop == 8. Odd. – Aaron Digulla Mar 12 '10 at 12:41
Is there a way to find out which font the browser is using for monospace? – Aaron Digulla Mar 12 '10 at 12:58
Okay, found it. The problem is "Courier New". My guess is that for the bold variant, the baseline is at a different offset. – Aaron Digulla Mar 12 '10 at 13:00
@Aaron: interesting question. Googling got me these stats: http://www.codestyle.org/css/font-family/sampler-Monospace.shtml No idea where they've got them from or whether they can be trusted. – ЯegDwight Mar 12 '10 at 13:03
@Aaron: great find. I'm removing "Courier New" from my answer. – ЯegDwight Mar 12 '10 at 13:05

Álvaro González · Answer 2 · 2010-03-12T13:08:28.817

1

It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.

It should fix itself if you choose a different colour contrast.

Update

alt text http://img690.imageshack.us/img690/421/opticaleffect.png

edited Mar 12 '10 at 13:08

answered Mar 12 '10 at 12:52

Álvaro González

142,137
41
261
360

I think that the shift happens because the baseline for the bold variant is one pixel above the baseline of the normal font. My problem right now is that the bounding box for the whole line is one pixel bigger than that of other lines. – Aaron Digulla Mar 12 '10 at 12:57
I suppose you didn't test my suggestion so I enclose a screenshot. Open the image in a new window; StackOverflow seems to resize pics. – Álvaro González Mar 12 '10 at 13:09
On my screen, the baseline is correctly aligned but the green background of the middle text is shifted down by one pixel. Which version of Windows is that? Which browser? Which font? – Aaron Digulla Mar 12 '10 at 16:00
Windows XP SP3, Firefox 3.6, Courier New – Álvaro González Mar 15 '10 at 10:26

score 0 · Answer 3 · answered Mar 12 '10 at 13:07

The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.

The solution is to request "Courier" as a font and to avoid "Courier New".

Why does bold monoface shift vertically on Windows?

3 Answers3

Update