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!

If I had to subtitle this post, I would probably make some sort of a silly joke like “Georgia on my mind” or “Helvetica? I barely even know you” or something like that, but instead I want to jump right into the fun stuff.

Back when the web was young and you were “likely to be eaten by a grue” (ok, maybe not that far back, but back when the term “world wide web” had just been coined”) there was one font that reigned supreme: Terminal.  After graphics invaded our desktop machines, Microsoft created the “core fonts for the web” that allowed users to get the same fonts on every machine (allowing for at least some sort of consistency when you build a website).

The project flopped because of EULA problems, but it did give us a sort of standard font set that we use for the web:

• Arial/Helvetica
• Times New Roman
• Georgia
• Verdana
• Tahoma

99% of websites have a combination of one or more of the fonts listed above.  There are others, but they are machine specific, such as Myriad Pro (Mac), but for the most part, until recently, you couldn’t branch out from those specified fonts.

Lately, however, a few services have appeared that allows you to take different fonts and use them at your will to replace boring, web-safe fonts with more exciting choices.

1. sIFR

Scalable Inman Flash Replacement was developed by web-pioneer Shaun Inman as a way to easily replace one font with another using a combination of Flash and JavaScript.  The first obvious drawback to sIFR is the word “flash”, which means that iPhones can’t view the text.  Flash blockers also have an issue with replaced text.  The other problem is a special sIFR font file must be generated/created to use with the script.  It’s a viable method, but may be outdated by other methods that have come along in recent times.

2. FLIR

FaceLift Image Replacement is meant as a JavaScript only replacement technique that takes the flaws from sIFR and removes them.  The upside is a fantastic font image that can be viewed on all devices.  It also uses real font files, not flash generations, to do its job.  The downside is that some fonts look jagged and pixilated, but most fonts look pretty good.

There’s a WordPress plug-in for FLIR you can download to make the process easier.

3. Typekit

Typekit is, by far, the easiest to set up.  You create an account, select the fonts you want to embed (and what CSS calls to use) and the one line of JavaScript takes care of the heavy lifting for you.  The downsides?  Limited font selection, and the better accounts cost money to get access to (not much mind you, and even font foundries have to get paid somehow).

4. Cufon

Cufon is my new favorite in the race to replace fonts.  Sure, it does require a generator file, like sIFR, but it’s not a flash file – it’s a JavaScript that runs.  The set up process is fairly easy: simply give the font a “font-family” attribute, generate the script, attach to a stylesheet, and then enter your CSS as normal, using the font family attribute to call the font.  Sizing, italics, weight; everything is taken care of by the JavaScript.

Also, the WordPress plug-in for Cufon makes it super easy to set things up effectively.

In conclusion…

Cufon is by far my favorite because it looks nice, is easy to use (if not a little harder to set up, but it’s a caveat I’m willing to live with), and does its job well.  Regardless, one thing to remember: only use fonts you have purchased the license to, because those guys work hard and deserve to be paid for their fantastic job.  Now, go out there and find some cool fonts to use!