As the practice of Web design ages, some common rules and "best practices" inevitably embed themselves in the craft. Among these are the processes for using specific types of semantics when coding your site, like using divs as hooks in your X/HTML for your CSS, and

Typography in your Web design is undoubtedly important. For some time now, it's been taught and practiced that using a sans-serif font is the best choice for page content and large blocks of text in Web design, while serif fonts should be reserved for use in small doses or as the style of choice for your headings. WPDFD even has a very recent article that states this. Some other places you can find this teaching:

• About.com
• Urban Fonts

In a nutshell, here are some of the key points in using sans-serif fonts.

• Sans-serif fonts look good at most sizes.
• They tend to have a more contemporary or business feel.
• Most operating systems render them neatly.
• Serif fonts tend to lose readability at smaller sizes.
• Serif fonts, when viewed on a Windows computer, may look terrible. This is because Windows has a ClearType ability that smoothes the edges of screen fonts, which would make the serif fonts look good, but many Windows computers don't have this option turned on by default.
• Sans-serif fonts, on the other hand, can look good with or without Windows' ClearType turned on.

Overall, designing with sans-serif fonts for your main content is a good general typography rule for your Web design. Many often-visited sites use sans-serif fonts for viewing on the web, and it certainly works well for them. Google is an obvious example. Also, Microsoft and Yahoo follow this convention. Especially prominent sites in our own field, like A List Apart use it to very good effect. And if you'll take a quick look around, you'll notice WPDFD sticks mainly to sans-serif fonts, as well.

But. (You knew that was coming, didn't you?)

I fired up my RSS reader recently and came across a fairly attractive page with an entry about designing with type characters. This particular page doesn't touch directly on using serifs in Web design, but I found it easy to read.

It was also fairly refreshing. Seeing so many sans-serif fonts used in only so many ways on the Web isn't exactly tiresome, but it certainly does lend a certain charm to serif fonts when you seem them executed well in Web design.

That same page above also has links to a few other pages that use serif fonts well. For your convenience, I'll link them here, too, and include my thoughts:

• Twisted Intellect
  I like this page. It reads well and it's a very elegant design. The typography here is very nice.
• The 3rd SEED Conference
  While Twisted Intellect uses serif fonts, it doesn't use them for lots of content. The 3rd SEED Conference does exactly the opposite: the entire design is serif fonts; no images. It's just layout, placement, and typography. This is executed beautifully and I really like what's been done here.

There are some other sites I've come across while just browsing leisurely, too, that caught my eye with their use of serifs.

• Jens Meiert: Why Reset Style Sheets are Bad
  This is a good-looking, minimalistic blog that uses serif fonts to good effect. And hey, the page even touches on an interesting topic.
• Fun With Fonts
  This is not only a cute short story about a robot; it's also a good use of typography. The serif font here accomplishes its job very well.

The examples of good-looking pages above were all delightful to look at and to read. As opposed to sans-serif fonts, it seems that serif fonts do take a bit more skill for a Web designer to wield effectively, but the payoffs can be quite impressive.

Things to keep in mind

From what I can see, there are numerous advantages and disadvantages to using a serif font.

Benefits of using a serif font:

• Thanks to the vast majority of web sites using sans-serif fonts, using a serif font can lend your page a refreshing, personal, warmer, and more visually attractive appeal. Any or all of these effects can be accomplished with the right styling.
• A page using serif fonts is different, and helps you stand out.
• Serif fonts tend to give a web designer more to "work with." Their shapes can range from rigid and stoic to elegant and understated.
• I think serif fonts benefit more from color and experimenting with color, though this is just personal opinion on this one.

Things to watch out for when designing with serif fonts:

• This is one of the biggest points against using a serif font, so pay close attention: Serif fonts, especially when italicized, usually look terrible in Windows! The ClearType preference must be turned on for the fonts to look nice, and many Windows users do not know where to turn ClearType on or what ClearType even is.
• Serif fonts lose readability at smaller font sizes. A medium to large font size works best.
• See here for an example of how serifs can break down and make the eye struggle at too small a size.
• Serif fonts tend not to have a "business" feel about them, so it's probably still best to avoid them when designing a commercial site. They lend themselves better to "personal" or "informative" content.

When you really look at the points against serif fonts, though, you can see that generally they break down into two main problems: readability in Windows and text size concerns. Both of these problems aren't as big a trouble as you might think.

For one, Internet Explorer 7, while not the best browser around, uses its own ClearType rendering, whether or not ClearType is turned on in a user's Windows settings. Most Windows users still use Internet Explorer to browse, so serifs for these users will seamlessly look as you, the designer, intend them. The widespread use of Internet Explorer 7 alone significantly reduces the concern for how serif fonts will look in Windows.

Secondly, if a user does use Firefox or another browser in Windows, your concern for how your serifs will look can drop a bit more. It's safe to think that most (or at least some) users who have another browser installed also have enough knowledge of Windows preferences that they'll have ClearType turned on, or have the knowledge of how to do so.

As far as text size is concerned: that's totally up to you. This is a non-concern as far as many Web designers consider it, since you are the designer and can choose to use a decent-sized serif font. This leads to a third point against serifs that is focused more on you than on technicality: serifs are a bit tougher to use in Web design than sans-serifs.

That's not a terribly large issue, though, because it's one that you can get around with your design. In fact, as is the case with the sites I've listed above, it may not even be something to "get around," but instead an intentional tool to work with in your design.

Keeping the "design" in Web design

I would like to see more modern Web designs using serif fonts for their content. They look really nice when used well, and it's a scary thought to think that we may be running into design clichés with the whole sans-serif-for-content "rule." The Web is a great canvas, and I hope designers can continue to do great and beautiful things with it, especially when those beautiful things step outside the lines and manage to remain functional.