Monospaced fonts size

April 14, 2009

Ever since I started using Chrome it's bugged me that the monospaced fonts are too small. Here, take a look at a screenshot of Google Groups from the bug report on

The unstoppable Tony finally tired of my bitching about this to track down why, and the answer is interesting in a sad sort of way.

See, Firefox and WebKit provide for a default font size and then a monospaced font size, which are set by default (maybe for historical reasons?) to 16 and 13 pixels. Here's a lengthy post from the WebKit blog in the area. This is all well enough, but there's a corner case: what to do in the presence of font fallback? Say you are Gecko or WebKit, your monospaced font is Courier New, and you're given the following:

<span style='font-family: monospace'>A</span>
<span style='font-family: "Courier New", monospace'>B</span>
<span style='font-family: Arial, monospace'>C</span>
<span style='font-family: nonexistent-font, monospace'>D</span>

Option A uses the monospaced size in all browsers. For B through D, Firefox uses your standard font size, while WebKit uses your monospaced font size. (Even for Arial!) Firefox effectively keys on the exact font list specified, while WebKit looks for any monospace in the list and infers that you want the monospaced font for them all. Both surely do something more complicated than that — for example, I believe when you request via CSS a larger monospace font out of WebKit it actually uses a multiplier based on the ratio between the two settings — but I've captured the net effect.

And now you have enough keywords to Google for info on the problem, and you can find plenty of web developers gnashing their teeth about it, cursing at whichever behavior they like less. Both seem pretty weird to me, though I guess there's some other technical complexity in that the engines doesn't want to go through the font search and fallback algorithms when calculating the computed CSS style.

After some more poking around today, though, it turns out IE doesn't even allow for configuring these font sizes differently. So to sum up, there's no size difference for the majority of market share, and the #2 and #3 engines glitch in different ways. Ah, web development.

The easy fix is to just set your monospaced size to the same size as the rest of your fonts. Sweet relief! Groups is now readable again. (Hopefully Tony's patch to change this will be uncontroversial, though there is always web compat to consider — how many developers do you expect to have worked around this and keyed off of webkit in the user-agent?)

PS: While we're on the subject of font sizes, the comments on the WebKit blog have always been unreadably small for me...