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

Posted on August 13, 2004 in CSS, Browsers