Optimize for legibility.
Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. This is part seven in my monthly series on “The Principles of Design.” In this series, I share some of the basic tenets of design, and we explore how to apply them to your blog.
Last month, we talked about Choosing Fonts for your blog. Today we’re going to take things a step further and discuss best practices for getting the most out of those fonts.
For the entirity of my first typography class in college, I used just one typeface. This stuck me as odd originally, but it taught me a very important lesson.
On the first day of class, we were provided with the first paragraph of A Tale of Two Cities by Charles Dickens, and a very restrictive homework assignment:
- Create 30 different treatments of the text within a 6-inch by 6-inch white square.
- You must use Univers Medium at 12pt.
- All text must be black.
- No other fonts, weights, styles, colors, or sizes are allowed.
- No additional graphic elements are allowed.
- The text must remain in paragraph form, and it must be readable.
In class the following week, we reviewed everyone’s variations together. Though the assignment seemed daunting at first, we produced a huge variety of options. Subtle changes can have substantial effects on readability and impression of text.
We tackled that same homework assignment each week for the rest of the semester, but with a slowly expanding toolset. Week two we were allowed to use Univers Italic. Week three we were allowed to use Univers Bold. Week four we were allowed to introduce a second type size (14pt). And so on throughout the 15-week course.
By the end of the semester, we learned that typography isn’t about choosing fonts, it’s about using fonts. Fonts are a tool, and as a designer it’s very important to learn how to wield them well.
Typography on Your Blog
On your blog, you have an obvious incentive for using your fonts well: great typography makes it easier for people to read what you have to say! At its core, the key to readable typography is just ensuring that your reader’s eyes don’t have to work too hard. Below are a few standard, subtle typographic techniques that can help you present beautiful, easy-to-read text.
As noted in my accessibility post, I try to set a minimum of 14pt for body text. Also, don’t forget to ensure that your text has a color contrast against its background.
Type size is something we’re all very aware of: tiny text is difficult to read. Text scale however might be a new concept. Scale is what establishes visual hierarchy in text– it refers to the spread of different type sizes used throughout a site. On WordPress.com, you’ll notice that a text scale is already baked into your site’s theme through header styles. If you have a longer post that you want to break up into smaller chunks, sometimes it helps to implement some scale into your entry. Try using the largest header size for your main sections, the next smallest for sub-sections, and so on. This helps break up long passages of text, and will guide readers thorough your content.
When adding emphasis to your text, I always subscribe to the “less is more” mantra. As I learned in my first typography class: a small change can go a long way. If you want a word or phrase to stand out, there’s often no need to apply multiple style adjustments. In other words, don’t use big, bright, bold, italic text when just bold will do. If you integrate too many distractions, you’ll risk breaking the flow of the paragraph.
The structure of your paragraphs can massively impact readability as well. Take alignment for example: for languages that read left-to-right, right aligning or centering your text can reduce readability. It’s usually fine for small bits of text (think headers or captions), but you usually wouldn’t want to do it for an entire paragraph. Also, jumping back and forth between left- and right-aligned text can be tiresome for readers, so try to keep your alignment consistent.
Leading (also known as “line-spacing”) is a term that dates back to typesetting for a printing press. To achieve optimal readability, typographers would place a carefully-chosen piece of lead to place in between lines of metal or wooden type. Lines with too much (or too little) spacing are hard to read, so this was meant to strike a visual balance. This fine-tuning is still important today. Usually your theme will have good leading by default, but bloggers with the WordPress.com Premium plan can perform their own adjustments using the
line-height CSS property.
The tips above are really just the tip of the iceberg. If you’d like to go more in-depth with typography, here are a few resources that might be helpful:
- First of all, great typography is everywhere! Take note of sites that you love to read, and also take inspiration from tried-and-true newspaper design: The New York Times for instance. Online, Discover.typography and Fontsinuse are great places to browse through excellent typography.
- Fontshop’s Glossary can help introduce you to common typographic terms.
- Matthew Butterick’s “Summary of Key Rules” outlines a few more typographic suggestions.
- If you’d like to go really in-depth, The Elements of Typographic Style by Robert Bringhurst is the de-facto book on typography. There’s a related project you can check out for free online at webtypography.org.
Since so many of these guidelines rely on a fine-tuned awareness of visual balance, there’s really no better way to learn than experimentation. Try tweaking the way your text looks slightly, and then ask yourself (or a friend) if the change helps or hinders readability.
Do you have other ideas for enhancing readability on your blog? Feel free to share in the comments.