Web typography in under a minute

I have a friend who just introduced me to Clarksworld Magazine, an online fantasy and science fiction magazine. Bless her, because after a few paragraphs1 of Left Behind by Cat Rambo and I had it bookmarked. Of course I had an immediate problem - the page looked like this:

This isn't unbearable on my 13" Macbook, if a little cramped, but now let's display it on a bigger screen:

Our story is now adrift in a sea of Sears portrait studio backdrops. And on a smaller screen?

Yikes – now you've pretty much guaranteed I'm only reading half of your story.

If publishing textual content on the web, you owe it to yourself and your readers to make your content marginally readable. What does that mean? Margins, for one, but broadly speaking you're going to need:

  • Whitespace
    • Margins
    • Line height
    • Minimum width
    • Maximum width
  • Legibility
    • Fontface
    • Contrast

Here's the CSS I load in for Clarksworld, in particular check out the story-text block as that's where most of the fun happens. The first four blocks are layout related, so that we can let the story-text div do it's thing.

div.bodyframe2 {  
    width: auto;
}

div.interior_body_1 {  
    width: auto;
    float: inherit;
    margin-right: auto;
}

div.story-frame {  
    width: auto;
}

div.story-text hr {  
    margin-left: 50%;
}

div.story-text {  
    /* let your lines breathe, 1.4 is a good starting point */
    line-height: 1.4;
    /* reading on an LCD sucks: give your eyes a break */
    font-size: 18pt;
    /* serif fonts *generally* are better for body text */
    font-family: serif;
    /* name a book that doesn't have margins and I'll buy you a beer */
    padding: 2em;
    /* when scanning text, ~60-80 characters is a good amount */
    max-width: 35em;
    width: auto;
}

And what did all this buy us?

Not bad for ~12 lines of CSS. If this sort of thing interests you and you want one of the best books on the topic, check out Robert Bringhurst's magnum opus Elements of Typographic Style.

  1. Short stories have this great quality about them: even a recovering completionist like myself can simply begin reading, and lay any worries about getting suckered into slogging through 100+ pages to rest.