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.

Posted on August 13, 2004 in Browsers, CSS

Comments

  1. August 25, 2004 by Small Paul

    Um… just thinking aloud here, and I’m not by my Mac so I can’t check, but doesn’t Safari (1.0, haven’t used 1.2) allow you to set defaults for variable and monospace fonts?

    Maybe if you set the size of your default monospace font a little bigger, you’ll get better results?

    (This is a bit like Opera: if you set its default font size to 12pt, lots of websites will look small, as Mozilla and IE have their default font size set to 16pt.)

  2. August 25, 2004 by Roger (Author comment)

    Well, yeah, but that doesn’t change everybody else’s settings, so it would only make Safari display the “correct” size on my machine ;-)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.