I am told that www.jwz.org looks wrong in both Firefox and MSIE on Windows, because the text that should be bold is showing up in a font of a completely different size than the non-bold text.
Can someone explain to me what's going on and how to fix it?
I mean, come on, MICROS~1, what part of
- body,pre,b { font: 10pt Courier,monospace; }
b { font-weight: bold; }
did you not understand?
I don't have a Windows machine to test this on, but I think you want:
body,pre,b { font: 10pt Courier,Courier New,monospace; }
Because that's how Microsoft spell Courier.
I'm fairly sure "monospace" degrades to "Courier New" on a factory IE or Firefox install on Windows.
You want Courier New in front of Courier in that font stack. Windows comes with both, but only Courier New is readable.
Looks fine to me under Windows XP, Fire Fox 3.6.8
Some reports seem to say that Courier doesn't handle well scaling of bold characters. You can try to use Courier new instead and not feel as bold as it should be.
And then, there's IE handling of negative margins (used on the links), but that's another story.
What's wrong with the margins?
body,pre,b { font: 10pt Courier New,Courier,monospace; }
You can compare the look in different browsers using Google Chrome and Browserling.
The problem seems to be that the font-weight:bold version of Courier is wider than both the regular and plain <b> versions, or so it appears from empirical testing on my end.
Using Courier New rather than Courier obviates the need for font-weight:bold in IE8.
I am not a font pro, but I don't think you should rely on a font being the same width in normal as in bold (maybe it is true for monospaced fonts).
I would just make the .b bits brighter instead.
The idea that you can't rely on a monospace font remaining monospace just because you made it bold or italic is not just absurd, it is sick!
What happens if you spec 'courier new' instead of courier?
use:
body,pre,b { font: 10pt WingDings, Courier New, Courier, monospace; }fwiw, it looks like Safari and Chrome get it right, and Opera and Firefox get it wrong, regardless of the system's ClearType setting, or forcing Quirks mode on Firefox. http://imgur.com/a/fcDQA/jwzorg
Using a locally saved copy of the HTML, changing Courier to Courier New makes Opera and Firefox get it right.
On a tangential note - the WordPress OpenID "Authenticate..." checkbox pops up with its text mixed with the content behind it ( http://i.imgur.com/AhzMz.png )
...and further, it appears to choke on authenticating OpenIDs from Livejournal with hyphens in them ... specifying the OpenID url with an underscore appears to fix it.
"Courier" is a bitmap font. Most browsers probably would be just as happy with "font: 10pt monospace;". Why is it wider when bold? Because it's Windows-386-old. ©1987-old. EGA.sys old.
Technically, firefox and chrome are doing The Wrong Thing and substituting Courier New.
Also, all the cool kids are quoting font names that aren't keywords these days.
I promise you that the "Courier" that was burned into the ROM of PostScript laser printers in 1985 was not a bitmap font. And that's 286-old. Parallel-port old. PostScript-RedBook-Level-1 old.
Your theory also does nothing to explain why A) Courier on a Mac is the same width when bold, and B) why supposedly-more-modern fonts like Andale Mono and Lucida Console are not the same width when boldified, on a Mac.
The real answer, I can only assume, is incompetence. Whose, I don't know, but it appears to be pervasive.
Sorry for not being clear, but, "Courier" on Windows means "coure.fon", a pre-cooperation-with-Apple-gets-you-TrueType bitmap font, by which I meant the root cause is--as you said--"incompetence".
Now, The thing with other fonts is that when there's no actual "bold" typeface for that font family. So the font system has to fake it by making the glyphs themselves wider. Lucida Console doesn't technically have a bold face.
Which is--again--the result of incompetence.
Actually, to clarify the exact problem, and expand upon what I just said:
"Courier New" works only because there exists a Courier New bold. Any font without a bold face included will have the same problem. This means Courier, Lucida Console, etc., will all have "Broken" bold widths.
And, finally, for modern monospace fonts, Consolas has the proper faces to support bold, italic, and bold-italic.
Currently I'm going with:
"Bitstream Vera Sans Mono", Menlo, "Courier New", Courier, monospace
because those are the ones I've been able to personally verify do not change size when boldified on a Mac. I expect I'll find that that's not true on some platforms... (No Consolas on Mac.)
Bitstream Vera Mono doesn't change size when boldified on my system (Xubuntu Karmic). And jwz.org looks well here.
Actually, I have Consolas on my Mac. It's a nice font.
The fact that it's not installed by default makes it irrelevant for my purposes...