It’s no secret that I’m a bit of a typography nerd. It think that it comes from my love of words; it makes sense that I like to see words presented well. That, in short, is what typography is: the art and science of displaying words well. This can be broken up into two parts: legibility and aesthetics.
Typography and writing has changed a lot since its early days. We used to write in as condensed a form as possible, dropping spaces and even vowels. This was because paper was expensive and writing was extremely time-consuming. The goal was to save space and time in writing. This made reading far more difficult; it was almost like decoding. Now we have all kinds of divisions and white space: spaces, punctuation, paragraph breaks, headers, and more. Paper is plentiful these days and real estate on digital displays is essentially infinite. The goal now is to provide as smooth a reading experience as possible. This makes reading easy: the average person can read upwards of 250 words per minute on well set text.
What we want to do is set type so that it can be consumed quickly and smoothly. This process is not unlike sanding furniture. You’re trying to remove all the bumps so that the way the text looks and feels doesn’t at any point become a distraction from what the text says. A lot goes into this, but you should do well if you remember the following points:
- Font size: This needs to be big enough so that the letters can be easily discerned, but not so big that the reader feels overwhelmed. Take into account the age of your audience when deciding this. On the web, certain fonts need to be displayed bigger because of the limitations of display technology (as compared to print).
- Contrast: I’m speaking here primarily of contrasting colors: your background with your text color. You’ll need to make sure that your colors are different enough so that they can be easily distinguished. You also don’t want to assault your readers with overmuch colorization or poor color coordination.
- Line Width: This is how many letters (or characters) end up on a line. When text is set too wide, it becomes difficult for a person to remember what line he was on when he comes to the end of one line and must look back to the left to start the next. This number can vary a little based on font size, but generally 80 characters (counting spaces) is too many and 40 is too few.
- Line height: This is how much space is between each line of text. If this is too high or too low, your readers may have the same difficulty above when reading from one line to the next. The height of a line should generally be set at 1.5x the font size (so a 12pt font would have an 18pt line height).
- Rhythm: You’re looking here to make sure your paragraphs, headings, and other elements are spaced in an even way. That way the eye doesn’t stop abruptly when it hits an header or a new paragraph. This is challenging, but there are tools that can help.
- Hierarchy: Here you’re looking to make sure the reader knows what’s most important. Use headings, but try not to have more than three levels of headings sine people have a hard time keeping track of where they are past that. It’s also a bad idea to mix things like bold and italics since it’s unclear what such mixing means. Everyone knows what bold means, but what does bold and italic mean?
- Consistency: This is key. If the fonts and sizes are changing all over the place, the reader will be confused. Consistency helps to communicate what the reader is reading without having to use words. Breaking that consistency will make him have to second guess himself. If you use italics for emphasis, don’t switch to bold for no reason. If your level one headings are 36pt, don’t make one that’s 33pt. If you use underlines for links, don’t use them for anything else. Stick to one or two fonts: one for headings and one for body text. Or use the same font for both like I do on this website. Dropping consistency in your typography can sometimes be as confusing as a public speaker constantly switching accents in the middle of his oration.
If you follow these rules, you’ll find that your whatever you’re typesetting will not be distracting. That’s the first step and it’s often ignored by people who want to skip straight to aesthetics. But legibility is about keeping the way the content looks from interfering with the content itself. Aesthetics is the second step: making the way the content looks actually add to the message. However you can’t take the second step apart from having taken the first.
When it comes to aesthetics, there are far fewer set rules. There aren’t number guidelines to follow when picking a font or color for your headings. You’ll need to understand your content well and then pick a font that fits the content well. Just make sure you remember the above legibility rules while you work on aesthetics.
This is not unlike choosing attire. You wouldn’t wear sports gear to a funeral and you wouldn’t wear a tuxedo to the grocery store. Of corse, regardless of how informal an event you attend, wearing plaid with stripes (or your socks on your ears) is generally a bad idea. Likewise, regardless of how informal your content, you oughtn’t violate the rules that I’ve listed above. When in doubt, Google your font or color choices to see how other people are using it. Sites like Behance and Dribbble help a lot since users who upload designs to those sites often tag their designs with the names of fonts and colors they’re using. Look at how other people use styles you want to use; they needn’t be a rigid rule, but they can help point out when you’ve gone off the beaten path (or the deep end).
There’s a lot more that goes into typography and it really is a vast subject. And I sincerely doubt this will be my last post on the subject. If you’re wanting to learn more in the meantime, The Elements of Typographic Style is a great resource.
This article was posted on 07/21/2014 . It relates to these topics: