what mad future is this where one cannot rely on the sanctity of Courier?

Dear Lazyweb,

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?

Tags: , ,

24 Responses:

  1. Giles says:

    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.

    • Jon says:

      I'm fairly sure "monospace" degrades to "Courier New" on a factory IE or Firefox install on Windows.

    • Adam says:

      You want Courier New in front of Courier in that font stack. Windows comes with both, but only Courier New is readable.

  2. Shatter says:

    Looks fine to me under Windows XP, Fire Fox 3.6.8

  3. seb says:

    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.

  4. vbvb.livejournal.com says:

    body,pre,b { font: 10pt Courier New,Courier,monospace; }

  5. You can compare the look in different browsers using Google Chrome and Browserling.

  6. Kiyoshi Aman says:

    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.

  7. Christof says:

    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.

    • jwz says:

      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!

  8. What happens if you spec 'courier new' instead of courier?

  9. kj says:

    use: body,pre,b { font: 10pt WingDings, Courier New, Courier, monospace; }

  10. 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 )

  11. ...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.

  12. Ian Young says:

    "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.

    • jwz says:

      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.

      • Ian Young says:

        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.

        • Ian Young says:

          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.

          • Ian Young says:

            And, finally, for modern monospace fonts, Consolas has the proper faces to support bold, italic, and bold-italic.

            • jwz says:

              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.)