Monospace, Firefox and braindeath

I just added the following to my stylesheet:
bc. samp, kbd, pre, code {
font-family: “Monospace font handling in Firefox is braindead”, monospace;
font-size: 1em;
}
Why?


When it comes to monospaced fonts, I’m near-religious, in the sense that I don’t want to see someone else’s idea of what a good monospace font is. I can tolerate, but not like Courier New, I edit all my documents with Andale Mono, and I regard most other monospace fonts on Windows as “nonsense” or “garbage”. Which is why I don’t want to force a particular monospace font on my users either.
Imagine the following stylesheet:
bc.. body {
font-family: Arial, sans-serif;
font-size: 0.83em;
line-height: 1.5;
}
pre {
font-family: monospace;
font-size: 1em;
}
p. Further, suppose that the default font size in your browser is 16px. What font size do you think you will get for preformatted text? If you assumed that Firefox would actually inherit the font size from the body element, giving you 16×0.83 ~= 13×1 ~= 13px, you’re wrong. Other browsers give you that.
In Firefox (at least on Windows), the default font-size for monospaced fonts is set at 13px 13×0.83 ~= 11×1 = 11. However, Firefox will only use this 13px default _if, and only if the only suggested font alternative is “monospace”._ Welcome fix:
bc. pre {
font-family: “Monospace font handling in Firefox is braindead”, monospace;
font-size: 1em;
}
This will work well until someone has the Monospace font handling in Firefox is braindead font installed.

9 Comments

  1. Lars Kleinschmidt

     /  2005-02-02

    You should have a look at the Bitstream fonts. Monospace one is really nice.

  2. I already have the Bitstream fonts installed. Ironically, the monospace variant is the only one I don’t like 🙂

  3. The 13px default for monospaced fonts is a configuration option, which I for one finds pretty useful. I have 15px as the standard size on this computer, though.
    With your new stylesheet, all of the monospaced fonts looks much bigger than the rest of the text. Why do you feel you have to override my settings?

  4. Actually, Lasse, you are getting the font at the same size as the other fonts here, which is about equal to the specified 13px default in Firefox. With just the “monospace”, you would have been seeing 11px monospace fonts.
    (Or actually, since I did a minor tweak with the font-size on @body@ to get around a Firefox rounding error, it would have been 10px. 10px Courier New does not qualify as readable.

  5. For what it’s worth, Safari also has problems with monospaced fonts when “monospace” is specified. I wrote a little about it a while ago: Sizing monospaced fonts.

  6. You need these extra monospace fonts for IE also. This browser goes wild, if use a skinned Windows XP *and* ‘monospace’ is the only value for ‘font-family’. See my screenshot. Black on black.

  7. Opera suffers from a different problem. If you turn off styles, monospaced fonts appear in a really light colour, making them hard to read. I came up with a user stylesheet (below) to override this, which is useful to mention here as it has a wider range of HTML tags you need to cover. (Arve – add these too to your stylesheet.)
    bc. code,tt,kbd,samp,var,pre {color:inherit;}

  8. Thanks. Added (seems that I’d also forgotten to add a color on body, which I also added while I was at it).

  9. David

     /  2005-11-18

    Arve and anyone else reading this,
    Testing this, for me:
    (1) Fx doesn’t always exhibit this problem. When the font-size of the containing block has been modified is one case in which it does (though I haven’t messed around with a bunch of different values for the font-size to see if that makes any difference).
    (2) You can put the placeholder font after monospace, so there’s no need to worry about the user possibly having it.