Question

I noticed that in Chrome and Safari, my Courier text is tiny. In Internet Explorer and Firefox, the Courier text is comparable in size to the rest of my text. Is there something wrong with my CSS?

#article pre,
#article code {
    display: block;
    font-family: courier, monospace;
    background: #f7f7f7;
    padding: 0.6em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ddd;
    margin: 0 0 1em 0;
}

Answer 1

Yeah, WebKit has separate default font size preferences for normal and monospaced fonts. When you use a font size derived from a relative font size (ie none of the text’s ancestor elements have an absolute font size), you get different sizes for monospaced and normal fonts.

(This wouldn’t necessarily be a bad thing, except that the default preference of much smaller monospaced fonts isn’t really sensible and most users won’t have changed it.)

I think this has changed over different versions; originally IIRC the different base font size for monospaced fonts was applied to any element whose font-family list had monospace in it. Now this behaviour only seems to happen when the font-family property is set to exactly monospace. Your example of courier, monospace doesn’t trigger it for me; weirdly, neither does it happen with monospace, sans-serif, even though then the font will always be monospace and sans-serif will never be used. This behaviour matches Firefox.