Best Practices for Font Usage on the Web
The best practices for font usage on the web are a little different than for print. Although controlling fonts in a web page or blog is more limited and involved than in a page layout program, there’s a lot you can do to make your text layout look good.
For most purposes on the web, you’ll use sans-serif fonts. Sans-serif fonts for the body of your articles is probably the best way to go, since these are the easiest to read, especially those like Verdana which were designed for the screen.
Serif fonts can be used in the right size and color. The Washington Post uses a serif font to good effect for their main articles, giving the site a classy, serious look, but notice how everything else on the page is sans-serif. This keeps the page looking clean. Another use of serifs is to turn the print design maxim: ‘Serif for body text, Sans-serif for headers’ on it’s head. Since we’re already using sans-serif for body text, try a tasteful use of serif for headers, subheaders, or pull quotes.
Capitalization, small caps or title case can help make headers stand out when using the same font for both headers and text. Define the capitalization and font-weight in your Cascading Style Sheet (CSS.) Other cool font tricks include bolding a smaller font size for mini sub-headers and captions, and highlighting key words and phrases within an article to help the reader – just create a span class in CSS using font-weight or color. If you want spacing between paragraphs, don’t just add an extra return, define a top-margin in the paragraph tag in the style sheet. Alternating line-spacing for different sections, different information types and for navigation can make things clearer too, as can plenty of white space.
Avoid using too many text graphics for headers just to get to use a fancy fonts – search engines can’t see them. This goes for navigation, too. Those sexy roll-over nav-items with changing color graphics aren’t really helping anything, and there are some cool effects in CSS to achieve a similar purpose. Just be careful, don’t overdo it. Remember, keep it appropriate to the subject. If you’re a realtor you might not need to get too fancy with fonts, but if you’re a rock band, go for it.
Click here to learn more about using Cascading Style Sheets to control fonts in web pages.




Bardic Media has long been active in Web Design and helping business owners succeed online. Through Search Engine Optimization & Good Design we can help you tell your story.
March 14th, 2008 at 1:20 pm
[…] Click here to learn more about best practices for font usage in web design. […]
March 30th, 2008 at 2:07 am
Great tips, i found all information i was looking for, i will use some of them.
October 6th, 2008 at 9:51 pm
?????????? ?????????? ??? Wordpress 2.6.2, ????? ??? ????? ?? ??? bardicmedia.com.
??????? ?????????)