Fungible Convictions

Or as someone who isn’t Yogi Berra would say, when you’re publishing longer readings—like short stories or feature articles—online, take care to design your text for easy reading on a screen.

We still don’t have a generation of lit buffs who prefer to read literature on a screen rather than on a page. But the Internet offers low production costs, free distribution, and instantaneous sharing, so until technology like Sony’s Reader becomes commonplace, we all need to follow design standards that aid readability:

1. Use a sans serif typeface for blocks of text.

Serifs (the small additions to the lines of certain letters) help your eyes quickly identify similarly shaped letters and make blocks of text easier to read—but only on paper! Even the best computer screens don’t have resolutions fine enough to render serifs in a clean way; thus, at smaller type sizes, text with serifs looks noisy and strains the eye. Sans serif types—Trebuchet, Verdana, Arial, and others—are rendered on a screen with much more fluidity, and are thus easier to read.

Here’s an example . . .

The website for new literary journal A Public Space just posted a piece by Charles D’Ambrosio as a preview of their first issue. Compare the legibility of the original piece (using the serif type Times) vs. my change (using the sans serif type Verdana):

Less legible original, using Times (serif typeface)

More legible modification, using Verdana (sans serif typeface)

Certainly you’ve seen respected online publications, such as NYTimes.com and Salon, use serif typefaces, but they happen to know that you should . . .

2. Always set a comfortable font size and leading (line-height).

Though the Times and Salon choose to use serif types, they greatly increase readability by using good-sized fonts and giving each line of text some room to breathe. Again, let’s play with A Public Space:

Less legible original

More legible modification

Of course if you’re going to take font size and line height seriously, you must . . .

3. Try to use relative units of measurement, like percentages, ems, and pixels, but never absolute ones like centimeters or picas.

Why? Because when people don’t think you’ve used a comfortable text size, they can and will resize it:

Using sizes that are relative to what came before guarantees that all text elements resize in proportion to one another—and in proportion to any elastic layout elements you may have used. Press Command+ or Crtl+ to see how that can affect static-column sites like Fungible Convictions.

Having text—and, if possible, a site—that resizes seamlessly is important to all users, but it is especially important to anyone with failing vision. Hopefully if we all design our text well online, that will include fewer of us.

Subscribe to A Public Space.

Want to change how sites are rendered in your browser too? Download the Web Developer extension for Firefox. Anyone know of something similar for Safari, let me know at andrew.whitacre [at] fungibleconvictions.com.