Monospace fonts workaround

September 02, 2009

Earlier I wrote about why WebKit has tiny monospaced fonts. The "fix" has now been landed, and WebKit now behaves like Firefox. (There's not really a behavior in this area to describe for IE, because effectively its monospaced font size is the same as the other font sizes and there's no trickiness.)

So now, to make your monospaced fonts the same size as the user's normal font without any CSS hacks like setting your monospace font size to 120%, I give you a different CSS hack:

tt, code, pre {
    font-family: WorkAroundWebKitAndMozilla, monospace;

The extra nonexistent font name triggers the "don't make my monospace tiny" workaround, without forcing the user to use Courier New or whatever font you were considering hardcoding.

You will now notice (if you're using Chrome) that the monospaced fonts on this blog are now more or less the same size as the surrounding text.