50 Days to a Better WordPress Blog–Day 1: Font Readability
This post is the start of an ongoing series entitled “50 Days to a Better WordPress Blog”. Over the next 50 days, Mitch will be providing small snippits of code, plugins, and things you can do to make your blog more attractive, attain new readers, and keep old ones coming back time and time again.
To kick things off in this series, I wanted to start with a small tip that makes a big difference. Time and time again I go to a site and (while attempting to read an article) end up seeing something that looks like this:
I had to squint just to make out what most of that text is saying. When it comes to the web, people are already staring at their screens; let’s not make it harder for them. There are a few simple ideas you can remember to help your users read your articles time and time again and always be begging for more, without them having to get new glasses every time.
An Intro to Web Typography
There are two types of fonts you’ll use more often than not on the Internet: sans-serif fonts, and serif fonts. If you want an easy way to remember which one is which, just remember that sans means “without” and serif is a technical term for “the feet” on a letter. So, serif fonts have “feet”; sans-serif fonts do not.
The most common web fonts (that is, fonts that anyone can see or use) that ALL systems have access to are:
- Arial (or Helvetica)
- Times New Roman (or Times)
- Georgia
- Garamond
- Verdana
- Trebuchet
- Tahoma
There are others, but 9 times out of 10 you’ll see one of these fonts on your site. If the fonts above all look similar (or some of them do) that means you don’t have that font on your system… that’s OK, though! There are ways around just picking one font to fill your needs.
The “Rules”
There are no set in stone rules when it comes to use, so (as long as some guidelines are followed) you can have fun with the fonts you have access to. Some simple ideas to follow:
- Don’t mix two fonts of the same type (two serif fonts for example)
- Don’t mix more than two or three different fonts in the same document (and three is pushing it for continuity).
Other than that, you’re pretty much limited to your imagination when it comes to using fonts.
Best Practices
Typically people will tell you that “Serif fonts are good for headlines and sans-serif fonts are good for body copy (paragraph text)”. But, in reality, the biggest problem with serif fonts being used as body copy is that people tend to go too small on the font size, which makes it unreadable. Therefore, paragraph text should be no smaller than 10pt (on both types) and no larger than 14pt (for sans-serif) or 16pt (for serif). For reference, this blog’s font size is 16pt.
Also, when it comes to headlines, you want to make sure they stand out from the rest of the site. Make sure there’s plenty of separation between the headlines and your normal body text; otherwise the text just runs together.
Finally, make sure that as you increase the size of the font that you increase the space between the lines, or the “line-height”.
The Code
If you’re using a premium theme, chances are a lot of these options can be set in your options panel. If not, then you can use a small bit of CSS code to chnage your site’s fonts. Typically the paragraph text falls into an “entry” div, so I’ll use that as the basis:
.entry p{
font-size: 16px;
font-family: “Georgia”, “Times New Roman”, serif;
line-height: 21px;
}
To break that down: First, I set the font-size to 16px (pretty standard size for serif text). Then, I used “font degradation” to make sure that Georgia was checked first. If it is, that’s the font that is used. If Georgia doesn’t exist, it checks for Times New Roman. If that doesn’t exist, it goes for the system-specified default serif font. This ensures that I control which font it is, even if it’s only to a small degree. Finally, I set the line-height to make sure the lines had a bit of “breathing room” between them.
Play around with the values to see what results work best for you (those values are similar to what I use on my site).
I could go on for hours and hours on web typography, but I wanted to give just the basics so that you’d have an understanding on the best ways to make your blog as easy to read as possible. We’re only on day 1 of this 50 day journey, and every journey begins with a single step, so take that first step and give your readers something worth coming back for!