Web Type 101: Serif/Sans-Serif etc

This article should answer questions like:

• What fonts will make my text easy to read?
• How should I size and space things, at least in order to get a good starting point?
• What makes text legible?

The most basic thing you can learn about fonts is that most of them are either Serif or Sans-Serif.

Serif fonts have serifs. Sans-serif fonts don't have them. If you look at enough examples, you can tell for yourself what the difference is:

Common Serif Fonts: Georgia, Times.

Common Sans-serif Fonts: Arial, Helvetica, Verdana, Trebuchet.

Which is more legible? It depends on two things:

1. Whether text is subject to Antialiasing at small font sizes.
• This is when the computer uses shades of gray, and not just black and white pixels, to present more accurate shapes.
• Windows XP was the last major operating system to come with this option off by default, but it is easy for the user to turn it on.
• Antialiasing in itself makes text more legible.
2. Whether you're reading a heading or a paragraph.
• Serif fonts read better in long bits, so they're better for paragraphs.
• Sans-serif fonts read better in short bits, so they're better for headings, short lists, and lone phrases.

There not a lot of consensus on this matter on the 'net, and it's mostly because of studies that were done before antialiasing, which show that, essentially, aliasing is more cruel to small serif fonts.

Also, did you know there was such a thing as screen fonts vs. print fonts? It's true - some fonts, like Times New Roman, were developed to look more similar to the print versions of the fonts they're based on (in this case, Times), onscreen, than the original font itself. So, basically, a cleaned-up version of the font. These screen versions were made to deal with the problem of aliasing at small sizes in computer type. They wanted people to still be able to read serif fonts.

At this point, screen resolutions are getting so high, and the detail is getting so dense, that even aliased type can look smooth, and that's the way it should be. Antialiasing was a way to make the best of the disagreeable low-res period we're finally starting to leave behind.

About typesetting:

Here are the questions you'll need to answer in order to make the most legible document possible out of your text:

• How widely do you want your text spaced?
• As in, single- or double-spaced, or somewhere in between?
• It should be somewhere in between single and double.
• It should be 1.4 - 1.6em, depending on the individual font's height.
• How spaced-out or squeezed-in do you want your letters to be?
• You know what? Don't bother messing with your character spacing in paragraphs, unless the text is really big.
• If you want to squeeze or expand headlines, it works well.
• You want something between .6 and 1.6 spacing (2/3 - 3/2).
• How much larger should the headlines be than the paragraphs?
• They should be about 1.6 times (3/2) the text size of the paragraphs.
• How wide should my paragraphs be?
• Somewhere between the way novels are, and the way newspaper columns are, depending on the kind of text you're writing.
• The more succinct and short your paragraphs are, the closer to newspaper-width they should be.
• The wider your paragraphs are, the longer your line spacing should be.
• Somewhere between 22 and 80em.

This is just the beginning of typography and typesetting, but it's all that most people will ever need to know on the subject.

I don't feel like I have much in the way of credible authority on type, but there seems to be a bit of a vacuum in the availability of primer material on the basics of type on the internet. So I'm stepping in. Any corrections would be welcome.

Apart from my own observations about text that I find exceptionally easy or difficult to read, and the settings I've found to be good starting points, I've also done some studying. I gleaned the above instructions from old typography books, research articles on type and legibility through the '80s, '90s and '00s, a few graphic design books, and some recent articles on web typography which are much more daunting bits of text than I feel the average designer or site owner should have to deal with.

A few important thoughts:

• Typography and typesetting shouldn't be an afterthought, it should be part of the foundation of any information project, and be refined through the whole development of the project.
• It's an especially easy thing for designers and content creators to neglect web type, because of the way that they see words. It's hard for people working on a project to actually have a realistic experience of reading the text, because they're charged with styling it. So they have to keep their own lack of perspective in mind.