(A True Typographic Tale) Monospace braindeath and the non-existent font
I just added the following to my stylesheet:
samp, kbd, pre, code { font-family: "Monospace font handling in Firefox is braindead", monospace; font-size: 1em; } /* Non-existent font used to avoid scaling the specified font size by 13/16 in Firefox and other browsers. See http://virtuelvis.com/archives/2005/02/monospace-firefox-braindeath */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:
body { font-family: Arial, sans-serif; font-size: 0.83em; line-height: 1.5; } pre { font-family: monospace; font-size: 1em; }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:
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.
Comments
Comment from Lars Kleinschmidt on 2005-02-02 20:41
You should have a look at the Bitstream fonts. Monospace one is really nice.
Comment from Arve on 2005-02-02 20:45
I already have the Bitstream fonts installed. Ironically, the monospace variant is the only one I don’t like :-)
Comment from Lasse G. Dahl on 2005-02-02 22:16
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?
Comment from Arve on 2005-02-03 22:25
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.
Comment from Roger Johansson on 2005-02-04 11:37
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.
Comment from Thomas Scholz on 2005-02-05 05:52
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.
Comment from Chris Hester on 2005-02-10 14:21
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.)
code,tt,kbd,samp,var,pre {color:inherit;}Comment from Arve on 2005-02-10 14:41
Thanks. Added (seems that I’d also forgotten to add a color on body, which I also added while I was at it).
Comment from David on 2005-11-18 11:24
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.
This discussion has been closed. No further comments may be added.
ಠ_ಠSizing monospaced fonts
Something that’s been bothering me for a while is how difficult it seems to be to make text set in a monospaced font be of reasonably similar size across browsers and platforms, unless you resort to using pixels as the unit.
Regardless of size or font used, Safari always seems to show monospaced fonts much smaller than other browsers (except for OmniWeb, which is based on Safari, so no big surprise there). Not sure if it was a bug or not, I started to experiment a little.
I created four paragraphs of text and assigned a different class to each paragraph, each with a different font-family, plus “monospace” as a generic backup font.
As expected, all paragraphs were rendered smaller in Safari than in other browsers.
Then I accidentally removed “monospace” from one of the declarations, and bang! – Safari increased the text size of the corresponding paragraph to match the size of the other browsers. Huh? Why should that affect the text size? Considering that all of the fonts I have specified are available on my system, that seems like a very strange behaviour.
I can’t see anything wrong with the XHTML or CSS in my test case, so I’m guessing it is a bug in Safari.
Is this a known problem I just haven’t heard about? And if so, does anyone know of a better workaround than not specifying a generic font?
Update: Well, that was a whole lot of feedback ;-). Just in case nobody else has seen this odd behaviour, I have sent Apple a bug report.
Update 2: I asked about this on the css-discuss mailing list, and from the responses I got, it looks like Safari isn’t the only browser where predictably sizing monospaced fonts can be a problem. Felix Miata provided a bug report and a test case, and Philippe Wittenbergh sent a link to a test case for a related problem with Japanese text.
