Web Typography is more than just choosing the font family. By avoiding these common mistakes you can create a better website.
Typography is More than Just Font Families and Line-Height
Many people, when they think of Web typography, think all they need to do is specify a series of font families for the text and they're done. People with a little more aesthetic might adjust the leading or line-height as well.
But good typography is more than just fonts and leading. There are lots of little details you can adjust, as well as major issues like font sizes, leading, and styles.
Don't Change Font Families at Random
It is tempting, once you know how to change the font of your text, to change it all the time. There is no minimum or maximum number of fonts that look good on a Web page, but the more fonts you have the more confusing and ugly your page will look.
I recommend finding one font for your headlines and at most one other for your body text. Yes, that's two fonts. Remember that if you have any ads on your pages, you instantly have a new place where fonts will be. And you won't have control over those. So if you stick with the minimum number of fonts you need for your content, your site will be better off.
Don't Change Font Sizes (and line-spacing) at Random
Font sizes and spacing around them should stay consistent on the page. Some rules of thumb for the size and spacing of your typography:
- Larger fonts attach more importance. Even if you don't have them surrounded in <h1> tags, browsers and your readers will assume a 30px text block is more important than the 10px one next to it.
- Smaller fonts attach less importance. It might seem obvious, but the smaller the text is the more likely it will be overlooked or ignored.
- Text that is too close or too far away from the surrounding text is hard to read. In other words, don't set your line-spacing more than 200% or less than 75% of the current font size.
Stay Consistent in Font Usage Across the Whole Site
In other words, assign standard fonts, font sizes, and line-heights to basic HTML tags like:
- <h1> - <h6>
Avoid Smart Quotes - Use Special Characters Instead
I'm not suggesting that you avoid curly quotes. But you should be aware that when you receive copy from Word chances are it has characters, like smart quotes, that many browsers can't display. If you simply copy and paste that content into your editor, it will still look fine to you. But when it gets up on the website it can end up with strange characters where you least expect them.
If you get into the habit of searching out the quotation marks and converting them to curly quote special characters, you'll have a better looking site. There are lots of little details you can adjust with special characters to help improve your site's typography.
Standard Fonts are Standard for a Reason
One of my favorite fonts is Charlemagne Std. But even though I love the look of this font, I would never rely on it as the only font in a font stack for my website. Why? Because it's not a standard or common font on Windows or Macintosh.
You don't have to limit yourself to the common fonts, but if you're using them in CSS, you should always have at least one of the common fonts in your stack so that your pages don't end up in some strange unexpected font. Arial may be boring, but at least you know that your site won't be in Comic Sans if you specify it in your list.
Don't Be Afraid to Mix Serifs with Sans-Serifs
With the size and resolution of monitors these days, it doesn't really matter whether you use serif or sans-serif fonts for your body text. But don't switch between them, especially within one paragraph or sentence.
In fact, many sites use a mixture of serif and sans-serif fonts for headlines and body text. Serif fonts for headlines and sans-serif for body text can provide good contrast between the two.
Be Aware that Readers Can Easily Change the Font Size
Most Web browsers make it very easy to change the font size of Web pages. In Firefox, it's just a keyboard click (Alt-+ and Alt-- to increase and decrease sizes). So even if you test your entire site using 10px as your standard body text font size, you should then look at it again in 12px or even 20px. What does changing the font size do to the rest of the design?
Think of Your Typography as a Hierarchy
When you're assigning your fonts, sizes, and colors to your text, the more hierarchical you are the more effective your pages will be. By using a hierarchy of typography, you make it easier for your readers to find exactly what they are looking for on the page.
Spare Some Time for Web Typography
The number 1 mistake you can make in Web typography is to ignore it. It is certainly possible to spend hours working on typography, but while hours aren't usually necessary, you should commit some of your design time to it. By just looking at a few simple things, you can make a better website.