If you’ve ever had trouble choosing between the time-honored and the modern, you’ve come to the right place. Even though a web developer has a limited number of font choices to choose from, ill-thought font selections often cancel out all the hard work that goes into a site’s design.

The following tutorial guides you through the various font-choices available, anti-aliasing, and some general type-related tips that, I can assure, you’ll consider in your next web project. If you’re a complete virgin to typography, I suggest you flick through this one before continuing on.

Serifs & Sans-Serifs

The text on the left is in the popular sans-serif font face Verdana, the text on the bottom left’s in the ubiquitous serif face of Times New Roman. To the right we see an anti-aliased version of the texts, which I’ll be discussing shortly. The sans-serif (Verdana) paragraphs are set at a font-size of 13px, whereas for the sake of juxtaposition, Serif (Times New Roman) paragraphs are set at a font-size of 15px. They also have line-heights of 19px and 24px respectively, check back this page for a follow up article on line-height.

I want you notice the rendering of the two typefaces. If we compare the headings, they’re perfectly legible in all the scenarios. However the sans-serif paragraph texts are comparatively easier to read than their serif counterparts, even more so when you take into account anti-aliased versions.

Before we dissect anti-aliasing, here’s a darker variation to concrete my point.

Again, the sans-serif paragraphs are much easier to read that their serif brethren. Comparing the anti-aliased versions, the serif paragraph can be considered to be as good as illegible.

Anti-Aliasing

To define it in the simplest way, anti-aliasing blurs edges to make a font seem smoother. Or if you prefer a tad more technical description, it is the process of removing or reducing the jagged distortions in curves and diagonal lines so that the lines appear smooth or smoother.

So what does this mean for a font-face? Well, the more edges/projections a font has, the more it’s going to be anti-aliased. The more anti-aliased it is, the blurrier its edges will be, the smoothing of the edges often results in text that’s a strain to read, if not illegible. This being the reason for serif typefaces not being used on lower font-sizes. The above image should make it pretty obvious, click on it to see it in its full glory.

Choosing the font-families

Right, so now that you know the nitty-gritties of ‘em, the following tips should help you pick the right font-families for your designs. Also remember that though the serifs should never be used for the body text, they make for excellent heading typefaces. If your design permits it, a contrast between the various elements of your page could give your design that perfect aesthetic finish. Don’t go crazy though, restrict yourself to two or at most three font variations on the same page.

Arial

A touchy one for typographers, considered widely as being a poor emulation of Helvetica. Nonetheless, Arial’s one of the most popular fonts used on the world wide web as it comes bundled with Windows, Mac, Open Office, etc. etc. So ironically it is also one of the most clichéd. No tips for Arial, except maybe use it if none of the other fonts fit into your design.

Georgia

Georgia is a serif-font designed specifically for screens. Its rendering at lower font-sizes are very clear and is perfectly suited to be used for body text if required. Use it on a site to give it an artistic or vintage feel.

Times New Roman

If it has Times, you can bet it’s a serif right off the morning news stand. Though it was designed for screens, it renders poorly on lower font-sizes (as you witnessed above). Use it for a news site or anything related to governance or economics.

Verdana

Brilliantly legible and renders beautifully at low font-sizes. Forged by Microsoft, the font comes bundled with Internet Explorer and is available in more than 95% of the Macs. It’s one of the finest sans-serif typefaces and also one of my favorites. User Verdana for a site that wishes to communicate an image of reliability or permanence.

Tahoma

Mr. T bears a close resemblance to our friend Verdana, most designers thus choose to pick Verdana over Tahoma. It comes bundled with Microsoft Office so it’s fairly ubiquitous. Use Tahoma if for some reason you develop a disliking towards Verdana but still wish to use a close sibling.

Comic Sans MS

If your website wishes to have even an ounce of credibility, steer clear of Comic Sans. Reminiscent of websites made during Elementary school, this font is by far the worst font selection to be made for any kind of site. If you do feel compelled to use it, do it on your dog/cat’s website or your little sister’s website on fluffy unicorns.

There you go! That should have armed you with a fair bit of arsenal for your next design assignment. If you have any suggestions or criticism, do leave a comment. Also, check back for some more follow up typography articles.