Web Typography That People Will Read

If you’re not a graphic designer, you may not realize that graphic designers pay attention to every detail of every word- right down to the space between each letter and the space between each word- striving to make content as easily digestible as possible. On the web, however, where it’s especially important to display your content well, designers tend to fall short.

Of all the reasons to pay for a degree in graphic design, I consider typesetting the most important. I’ve seen plenty of “amateur” designers who master Photoshop, Illustrator and InDesign, but fall short of creating professional layouts because the nuances of type are insanely difficult to just pick up.

On the web, huge numbers of “amateur” designers take that difficult task and make it more difficult by appealing to a fleeting, click-happy audience. The web reader is much more finicky and typically holds the attention span of a gnat. (Plus they’re tweeting on their phone while reading your website.) Without proper typesetting, you’re going to lose potential audience, readership or business.

So here are some factors to consider when typesetting for print or the web. I’ll start with some traditional rules that are overarching type rules, no matter where your type appears, then I’ll get into web-specific rules.

• Watch the Line Length
  Believe it or not, there is an optimal amount of characters per line where a reader’s brain stays interested, and their eyes don’t get fatigued. The perfect balance of reading and breaking (“breaking” being the mental pause you get as you go from the end of one line to the beginning of the next) will make your text easy to read, and a shorter line length will make your text initially feel accessible instead of overwhelming.

  How long is too long? The entire width of a webpage is ridiculously too long. Think of books and newspapers and how they break large blocks of text into columns. The typical, optimal line length is somewhere around 70-80 characters (including spaces), but really it’s a judgement call based on actually reading the text and seeing how easy or hard it is to read and digest.

• Pay Attention to Space (Between the Letters, the Words, and the Lines)
  Graphic designers pay attention to every detail about their typography. By controlling the space between each letter overall (called “tracking”), we can make text more digestible and easier to skim. By adjusting the space between each line of text (called “leading”), we can help the reader move quickly up and down long blocks of text. Even manually adjusting each letter’s relationship to the letters around it (called “kerning”), can create a surprisingly more solid message.

• Create Hierarchy
  Probably the most important factor when initially setting type is to create hierarchy. A designer needs his or her reader to know in less than one second what’s important to read first, where to look next, where to look after that, etc. Or maybe the reader knows what she’s looking for and needs to quickly find only that. Changing sizes, weights, placement, white space, line rules and color are just a few ways to start distinguishing one piece of content from another and controlling how your reader sees your information.

• Be Generous with White Space
  The final traditional typesetting “tip” I’ll go over is white space. White space is the space around blocks of text, images or any object on your page. It’s very important to frame your content with white space so that it feels easy to dive into and doesn’t overwhelm your reader.

Now let’s get into a few web-specific typesetting rules. This is the “new breed” of typography, and once you start looking around the Internet with this stuff in mind, you’ll see that not many web designers are doing this right.

• Plan for Skimmers
  On the web, a typical reader has a much shorter attention span than someone reading print material. Usually people are trying to quickly find the information they want amongst the sea of junk that is the Internet. So they skim.

  If we read every word of text as we search for the information we wanted, we’d never find anything. Therefore, when typesetting for the web, keep an F-shaped reading pattern in mind. Users read left to right and top to bottom (at least in the US). This means that skimmers will read the first couple words of a paragraph, and if it doesn’t look like it’s going to have the info they want, they’ll skip right down to the first couple words of the next paragraph.

  Keep your text short and broken up. I like to follow two simple guidelines. No more than two or three sentences per paragraph, and every paragraph gets a title. Of course, I can’t always stick to that exactly, but I certainly try.

• Typeset for Interaction
  Web readers know that the information they need isn’t necessarily on the page they’re currently looking at. Moving page to page in a non-linear fashion is one of the hugest advantages of the Internet in general. So readers are not only skimming your actual content, they’re skimming your links, too, in case there’s a better place for them to land.

  Make your hyperlinks stand out well, and make the copy count. Web readers skim by reading the first 11 characters of headlines and hyperlinks.

Next time you’re reading something online and it’s subconsciously slowing you down or tiring you out, think about factors like letter spacing, line spacing, and line length. When you look at your own website’s content and wonder who’s actually reading it, consider how easy it is to scan the information so your reader knows exactly what she’s going to read before she reads it.

Graphic designers train in typography for years, but most web designers don’t. I don’t think we need to get too snobby or artsy with our type on the web, because after all, it’s ever-changing, dynamically generated, and largely utilitarian. But, what good is your website if no one wants to read it? You might as well put your logo and a picture of your product over a couple paragraphs of Mandarin Chinese.