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.

Site Base Size Face Line Height
WaPo 12px Arial 21px
NYT 15px Georgia 22px
LAT 14px Georgia 20px
Guardian 14px Arial 18px
Le Monde 15px Arial 20px
El Pais 16px Georgia 22px
Juneau Empire (new) 14px Georgia 21px
Juneau Empire (old) 13px Arial 15px
Brainerd Dispatch 14px Georgia 21px
Lubbock Avalanche-Journal 14px Helvetica 21px
Augusta Chronicle 16px Georgia 21px
Wikipedia 13px Sans-Serif --
Google 13px Arial 15px
Forbes blogs 18px Georgia 24px

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.


Readability strips the CSS styling and gives you a nice, bright white, highly readable text version of what's on a page. I guess it's a fact that people don't know about Ctrl+ (or Apple Button +) which generally makes things bigger in most modern browsers? I feel like being able to change the type size widgets used to be more prominent/prevalent too. This is a good argument for usability stuff baked into CMSes. I think a lot of people are just too busy to get around to accessibility/usability add-ons for their site.

So if you find the NYT more readable than WaPo, it looks like that has less to do with whether the font is serifed or not. Serifed fonts are supposed to be more readable, since they exaggerate the forms of the letter, and letters are less uniform.

To me, small type can be bearable if the column is fairly narrow. Many news sites set text on a measure that is way to wide for comfortable reading. I'd suggest you should always judge text font size relative to column width. There ought to be a Web equivalent of an old print rule of thumb: The column in picas must be no more than twice the font size in points. So 9-point type should not be set any wider than 18 picas. What could a rule like that for the Web be?

Steve - your own text is very readable. Many print publications and sites sacrifice readability to an excess of words (everyone needs an editor!). For word processing I used to use WordPerfect - still do sometimes - because it was modeled on typesetting rules; MS Word took years to catch up to that important distinction.