Itsy-bitsy teensy-weensy type

I found myself annoyed the other day by the Washington Post's unusually small, hard to read body type, so I installed the very nice CSSViewer Chrome extension and took a look at several sites to see what's popular these days.

When activated, CSSViewer pops up a display of the active CSS rules for whatever element you're pointing at. Here's what I found.

On my blog, I'm currently using 15px Baskerville with a 22px line height.

I don't have good data over time, but I think there's a general trend toward larger body type on story pages. Some of our very old site designs are using 12px Arial with no extra line height, which is terrible for readability.

Designers coming from the print world may trip over the fact that points and pixels are not the same thing.

Points are a printing measure roughly equivalent to 1/72nd of an inch. Pixels are relative to screen resolution. Mixing them in a document can lead to unexpected results depending on the computer you're using, but in general, 12px is roughly equivalent to 9 point type. That's a common size for newspaper body type, but not very Web-friendly.

A bit of history:

Before computers took over print composition, type was made of physical objects and sizes had names like agate, minion and brevier. Agate came to mean any local standard for sports results and stock listings. Minion came to mean body type, regardless of whether it was 8pt (brevier) or 7pt (real minion) or even 9pt (bourgeois). The actual size of the type might even be in half-point increments. Metal type was placed in a frame called a "chase" and shims ("ledding") were manually inserted to make it square up properly.

Around 1970, the Minneapolis Tribune underwent a major redesign that was intended to pave the way for computer layout. Even though there weren't any computers back then capable of such a task, the design visually simplified the pages. (The design rule is "reduce the number of vertical and horizontal axes.")

To make the math easier, the design was built around a grid system of 9.5pt units. The headline schedule was exact multiples of grids.

When I worked at the newspaper in the 1980s, it was electronically paginated on a wireframe system, and depths -- including photo sizes -- were all measured in grid units. Somewhere I probably still have a grid stick.

Computers got smarter, and the idea of simplifying the grid to make it easier to calculate seems silly today. Unfortunately, that's led to an abandonment of the mathematical principles behind classical headline schedules and body type sizing. Copy too long? Cheat by shrinking it a little. Headline short? Warp it into place. We can do this on the Web and in print with equal flexibility.

The cost of this is an open door to the visual clutter of arbitrary sizes and shapes, and at the Web implementation level, CSS files that are long nightmares of special-case tweaks instead of short expressions of sound planning.

Fortunately, there's a counter-movement in the 960 grid system and its multiple implementations. I endorse its goals, as I also endorse body type big enough to read.