7 Simple Rules for Formatting Text on the Web

by Megan McDermott, 28 February 2007 - 7:35pm

There are many things to keep in mind when formatting the text on your web site. This article will introduce you to some basic terms and techniques and then outline 7 simple rules that will help you make the most of the text on your site.

In most cases, most your web site is made up of text. It is the most common way of conveying information to the visitor. For that reason, it makes sense to pay some attention to how it is formatted. How your format your text has a huge influence on how your page looks and, more importantly, how easily people can read it.

This article will begin by defining some basic font terminology and some things to keep in mind when coding your website. Following that, seven key rules for formatting text will be discussed. At the end you will find some additional resources with more information and advice, including some sample stylesheets that you can work with on your own site.

Types of Fonts

First, we need to learn about the basic types of fonts. If you read a book on typography you’ll likely find many categories, but for the purposes of this article we’ll just use three: serif, sans-serif, and decorative. Here are the main differences:

• Serif fonts have little flags at the ends of each stroke. Sans serifs don’t, and decorative fonts may or may not have them.
• Serif fonts generally look traditional, while sans serif fonts look modern.
• Serif fonts are normally easiest to read on a printed page, while sans serif fonts work best on a screen.
• Decorative fonts sometimes look crazy – use them sparingly!

Serif	Sans Serif	Decorative

Specifying fonts for your web pages

Keep in mind that the only fonts available to you are the ones your visitors have installed on their computers. There are some basic fonts that you can count on being available for pretty much everyone. Most decorative fonts are not available on most machines and therefore cannot be used direclty in your code. If you want to use them, you will need to put them into a graphic.

It is always a good idea to specify a list of alternate fonts just in case they don't have the one you want. The code looks like this:

body {font-family: verdana, arial, helvetica, sans-serif;}

If verdana is available on the user's computer, the body text will be displayed in verdana. If verdana is not available, the browser will look to see if arial is available, and so on. It's always good to finish with a generic keyword - this means that if the browser can't find any of the other fonts it will use the default sans-serif font specified on the user's computer. The generic keywords are "serif", "sans-serif", "cursive", "fantasy", and "monospace".

7 simple rules

Rule #1: Don’t use more than one font from the same family.

Two fonts from the same category have what is called a conflicting relationship. This basically means that they look a little odd when used in the same design. For example:

Verdana with Bitstream Vera Sans	Verdana with Georgia

This rule goes double for decorative fonts, and triple for very dramatic decorative fonts such as the ones used below:

Rule #2: Don’t use Times New Roman, ever

In fact, as a beginner, you might want to avoid using serif fonts on the web altogether. As I mentioned earlier, serif fonts are best for reading on a printed page. On a web, they don’t usually look as good. Sometimes a font like Georgia or Garamond could work for your design, but Times New Roman (or Times) almost always looks bad.

Rule #3: Don’t overformat

Many beginners are tempted to use every formatting option available. When they want to make text stand out, they’ll use bold, italics, different fonts, sizes, and colours – sometimes all at once! This tends to result in a lot of visual clutter on the page. It’s hard to pick out the most important text because everything is styled to look like it’s important. The eye doesn’t know what to settle on because every piece of text is competing for attention.

To avoid this, choose one style for emphasis. Mark up your key text with <em> or <strong> tags. It's probably best to keep the default formatting for those elements, but you may choose to use CSS to style them a little differently.

Rules #4: That goes double for links

Once you learn a bit of CSS it may be tempting to apply all sorts of different formatting to your links. You can give them backgrounds and borders, and make them all change on mouseover! Isn't that a good thing? Well, no it's not. Links should stand out from the main text, but they should not be distracting. Applying too much formatting to the links may make them difficult to read, or distract the user from reading the rest of the text.

Links firstly need to be easily identified as links. When you remove the bottom underline you are taking a risk that people won't recognize them. At the same time, they need to blend in with the rest of the text. They shouldn't stand out so much that it's impossible for the reader to focus on other parts of the page. The formatting should also not interfere with the text itself – adding things like dashed borders or bright background colours can do that.

Rule #5: Don’t center text

Centered text sometimes works well in print but it rarely looks good on a screen. This is especially bad for paragraphs when they eye has to jump back and forth to read each line. This puts stress on the reader and makes it more difficult to read your text. For example:

Centered	Not Centered
This an example of a centered paragraph of text. You can see that it is a little more difficult to read this text. This way the eye has to jump back and forth to find the start of the next line before it can start reading.	This is an example of an uncentered paragraph of text. It is easier to read because the lines all start at the same spot. This way, the eye automatically knows where to go to find the start of the next line.

Centering headlines might work occasionally but also tends to have an unprofessional look. It gives the impression that you weren’t sure how else to format your text, so you used the most obvious option. This is the sort of thing you might have done on your first typed homework assignment – not on a website.

Rule #6: Make sure text is easy to read

This rule relates to all of the above points: centering, overformatting, and using the wrong font categories can combine to make it difficult for a visitor to read the text on your page. Another common problem is using text that doesn’t contrast enough with the background or text that is just plain too small.

Make sure that your text is easy for people to read. And that doesn't just mean that they can make out the letters and understand what the word says. It should be easy and comfortable to read your text, not difficult and straining to the eyes. Nobody wants to read text that gives them a headache!

Rule #7: Don’t use <font> tags!

Unfortunately, there are still many HTML tutorials on the web that were written many years ago. Since then, <font> tags have been replaced with Cascading Stylesheets, known as CSS or stylesheets. CSS will allow you to keep all of the font formatting for your site in one central location. Instead of wrapping font tags around every piece of text, you’ll just make a few simple declarations in your CSS file and viola! Attractive fonts for your site that are consistent and easy to maintain. To learn more about CSS, visit the HTML Dog.

Summary

There are many things you need to consider when formatting text for your website. The best thing to do when starting out is to keep things as simple as possible. Use a plain sans serif for body text, use the default <strong> and <em> tags for emphasis, and use your CSS to make the headers a little bit bigger than body text. If your formatting is clean and simple, it will be easy for people to read your text – which is exactly what you want them to do!

References:

• Text font readability study
• Wikipedia article on Serif
• Colour contrast accessibility checker
• Sample stylesheet with basic text formatting: sans serif, serif with sans serif headers

Attachment	Size
sample_sans.css	974 bytes
sample_serif.css	1.16 KB