fri, 22-apr-2011, 07:06

I’m trying out a standing desk at work and I discovered that when I went to my blog (and our internal wiki) that for some reason, Chrome on the laptop I’m using wasn’t displaying monospace fonts the way I expected. In Chrome’s preferences I could set the font size for all the other fonts, but it only let me choose the monospace font, not it’s default size. I’d never noticed this before.

A quick Internet search revealed this very helpful page: http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/

It turns out that monospace sizing is a common problem, and even worse, how they’re sized is browser dependent. The hack is to define the tt, pre, and code elements in your CSS as follows:

1
2
3
4
pre, tt, code {
    font-family: monospace, sans-serif;
    font-size: 1em;
}

It seems wrong to have monospace and then sans-serif, but including sans-serif (or any other font-family category besides monospace) causes browsers to respect the following font-size declaration. Without it, the browser assumes that the 1em sizing is relative to the default monospace font size (which is too large and unchangable) rather than relative to the size of the rest of the content on the page.

Anyway, it works. For now.

Update: Actually, it doesn't work. Firefox, Safari and Chrome on a Mac let you choose the monospace font size, and tweak it until it matches the body text size. When this hack is applied, the monospace fonts become the same size as the body font, which is typically too large.

Meta Photolog Archives