Font size inconsistencies with font-family: monospace

Just over two years ago I posted Sizing monospaced fonts. It is a short article accompanied by a test case that demonstrates the (to me) strange things that happen to font size in Safari when you use the monospace generic font family in CSS. In summary, specifying monospace as a font-family alternative will make Safari render text smaller than other browsers.

The article received very little response, so since then I have avoided specifying a generic font family as a backup for monospace fonts (Courier being the most widely used) in order to get similar font size across browsers. The other options would be to have monospace text be either unreadably small in Safari or oversized in other browsers.

I was a little surprised when I recently noticed that Apple's Dave Hyatt had linked to my old article from his post Strange Medium at Surfin' Safari. In the article Dave explains what is going on with monospace font sizing as well as why. And it sort of makes sense since the reason is to honor the user's settings for monospace text.

What I'm wondering, and this is also mentioned in a comments on the article, is why the default setting (in most browsers, not just in Safari) is to make monospace fonts smaller.

It seems like we will have to continue avoiding the monospace generic font family if we want consistent and readable monospace text, but at least now it's understandable why Safari behaves the way it does.

Posted on September 27, 2006 in Quicklinks, Browsers, CSS