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.

fri, 11-apr-2008, 13:22

fi ligature

firefox screenshot, fi ligature

I’ve been trying out the latest firefox beta (3.0b5) on my Mac, which is supposed to be the final beta before the release candidates. Mozilla expects that firefox 3.0 will be out in June. While looking over my blog post about The Wind-Up Bird Chronicle I noticed that the browser was automatically selecting the ‘fi’ glyph whenever it encountered these two characters together. The image on the right is a screenshot showing the actual rendering using Adobe Minion as the browser font. Notice that the third letter ‘i’ in the word ‘identified’ has no dot on it because the dot would collide with the ball at the tip of the ‘f’ letter preceding it. As far as I know, not even Microsoft Word can do this. Pretty sad when a supposedly fully functional word processor from the world’s largest and most powerful software company can’t even incorporate a feature that’s built into an open-source web browser (and which has been part of TeX since it's beginnings in 1978).

Admittedly, this feature looks a little strange when implemented on a font that doesn’t do it very well (like Geneva, which had been the default for my browser until I switched to Adobe Myriad), but at least the ability is there now. I looked on the about:config page to see if there was a way to turn it off for those situations where you’re stuck with a lame font, but I didn’t find any options related to ligatures.

tags: fi  firefox  fonts  ligatures  typography 
Meta Photolog Archives