A simple demonstration of how influential typography can be is to look at the same text with different typefaces. Notice how different typography defines and alters the same message.



Two varieties of type elements can be displayed on a web page, HTML-based or image-based (bitmapped). HTML-based type is created by your content manager. It is easier to edit, is smaller, and can be searched. Image-based text is created in an image editor like Photoshop or Illustrator. It is larger and harder to edit, but can have more decorative flourish.

Most web pages are still dominated by HTML-based text content. Body text is the base or default style for your entire site. Since there is more, way more, of this text than anything else, start your typography work by making your body text look good, then worry about the rest.

The typographic quality of your document is determined largely by how your body text looks. In turn, the appearance of the body text will be determined primarily by the following five typographic choices:

1.    Point size
2.    Leading (line height)
3.    Line length
4.    Word and letter spacing
5.    Typeface and font

Let’s review each in more detail.

Point size is the size of your letters. On web pages, the most comfort-able range for body text is 12–14 pts, depending on the typeface used. Titles and headers should be a minimum size of H2 or H3 (about 16–18 pts). The best way to check for legibility is to field test your type on a variety of browsers and platforms.

Leading, also called “line-height,” is the vertical distance between lines. With your CMS template, this measurement will be modified with CSS, using the line-height property.

Leading is powerful tool that can affect how readable long blocks of text are. Here are a few leading guidelines:

•    Leading should be 120–145% of the point size. Leading can affect text blocks in different ways. A short block of text (such as a subtitle) versus a long block of text (such as an article or blog) will be affected by leading in different ways. Just because it works well in one, doesn’t mean it will work equally well in the other.
•    The more words you have in a line, the more leading you will need to maintain the readability of the text.

Line length is the horizontal width of the text block. Studies have shown that text is easier to read when it is formatted into narrow columns which reduces eye fatigue and increases white space. Line length should be an average of 45–60 characters per line (use your word-count function) or no more than about two lowercase alpha¬bets, like so:


Wider columns require more leading to maintain readability. On a web page, this translates to formatting text into several narrow columns.

Tracking (also called letter-spacing) is simply the space between groups of characters. Letter-spacing can be described as being loose or tight. Loose tracking means the letters have more space between them. Tight tracking means the letters are closer.

Tracking has similar guidelines as leading, and all of these best practices are tied to readability. The wider your text column, the looser your letter-spacing should be. This rule is not set in stone; however, as variables such as typeface, color, number of columns, and the surrounding design can also influence readability.

If you increase word-spacing (the space between each word), you’ll have to increase letter-spacing.

Kerning describes the amount of space between two characters. Kerning can easily be confused with letter-spacing. While letter-spacing is a global setting that affects how close all the characters are, kerning is more specifically about the space between two specific individual letters. Some character combinations might require more kerning than others to avoid collisions (for example Wd versus ll). Other characters fit together tightly and need less space. For example, the lower-caselin Helvetica (i.e., lllll).

Text aligned to the left complements the natural way we read text in western culture, and is the easiest way to improve the readability of your text. Centered text may look better but makes your text harder to read and should be used only in special circumstances (large titles) or never.

Many people use the terms font and typeface interchangeably but they are technically different, so let’s clear this up here. A typeface is a family of fonts, such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, with Helvetica being the common Typeface for all these fonts. A font is one weight or style within a typeface family, such as Helvetica Regular. The font makes up the typeface similar to the way a collection of songs makes up an album.

The typeface you choose gives your website its character, pace, and style and has an impact on the experience of your visitors.

There are many different classifications and subclassifications of typefaces, but they are most commonly grouped into two families: serif and sans serif. A serif is the flag or “foot” at the end of a letter stroke. Fonts either have this serif or they don’t. Of the standard system supplied fonts, Times, New York, and Century are examples of serif fonts. Helvetica, Arial, and Geneva are examples of sans serif fonts. Sans serif fonts only became popular in the nineteenth century, so are considered modern. Generally speaking, sans serif fonts are easier to read on computer screens and serif fonts on printed media.

Sans Serif & Serif Fonts

The fastest, easiest, and most visible improvement you can make to your typography is to explore beyond the system fonts that came with your computer and experiment with some of the many typefaces available in online libraries maintained by Google or Adobe and others.

The days are long gone when web designers needed to limit their use of fonts in the worry that their audience would not have the font resident on their system. These days there are many excellent, free font libraries that make a spectacular range of typefaces available to both designer and audience. Just about any typeface you could want is available as a link from online libraries maintained by Google, Adobe, and others.

When you do take advantage of wealth of typefaces available from these libraries make sure you choose carefully. A common typeface mistake is use too many (two is recommended) or to set up concordant or conflicting relationships with type. Instead, choose typeface combinations that create contrasting relationships. I explain more below.

•    A concordant relationship occurs when you use only one type family without much font variety. Your fonts are similar in style, size, or weight. In the concordant example below, the only difference between the two fonts is that the latter one is in bold, italic.

When using concordant type, it is easier to keep pages harmonious, quiet, or formal. But these compositions can also be downright dull.

Concordant Typefaces

•    A conflicting relationship occurs when you combine typefaces that are similar, but not quite the same, in style, size, weight, and so on. Notice that something is not quite right with the image below. The type inside the quotes is different from the other type but not noticeably different. The similarities are disturbing because the visual attractions are not the same (concordant), but neither are they different (contrasting), so they conflict.

Remember that the design principle of contrast works only when the contrast is STRONG. Half-measures won’t work here, so avoid using conflicting typefaces.

Conflicting Type

•    A contrasting relationship occurs when you combine separate typefaces that are clearly different from each other. In the example below, the two typefaces are unmistakably different, creating a strong contrast and a more visually appealing composition.

Contrasting Type

Many of the most eye-catching designs have strong contrast built right into the composition.

Contasting Design

1.    Use plenty of white space. It is easier to read text that is surrounded by blank space.
2.    Use larger font sizes. Titles and headers should be H2 or H3 (about 16–18 pts). Body text should be 12–14 points depending on the typeface.
3.    Use narrow columns of text of about 40–60 characters, or 8–12 words, per line.
4.    Keep paragraphs short.
5.    Set leading to 125%–150% of body type size (12 pt text is 14–15 points). Headlines require even more leading.
6.    Always align body text to the left.
7.    Mix typefaces that are clearly different from each other.
8.    Cheap tricks. Adding a sprinkling of the techniques below can improve legibility by increasing clarity or adding emphasis.

These are common and very useful. They are used throughout this manual. There are few reasons not to include these.

Side heads
Use these instead of headlines.

Pull quotes
Include these where appropriate. Pull quotes are one of the best ways to grab the readers’ attention and get them to read your work. Quotes should be profound, interesting, or otherwise attention grabbing.

 Drop Shadow
Drop shadows.
Experiment with these; they can increase legibility and create greater impact.

 Text formatting tricks

Text formatted using many of the techniques covered above - narrow columns, larger fonts, increased leading, headings, side heads, pull quote, bullet lists, and bold text.


Lots of books and websites cover the subject of typography. They are fantastic references to have with you while you work with type. Here are a handful of my favorites.


•    Stop Stealing Sheep and Find Out How Type Works: By Erik Spiekermann and E.M. Ginger. This is a great introduction to the subject.
•    The Elements of Typographic Style: By Robert Bringhurst. This seems to be the bible of typography. It seems every typographer already owns a copy.
•    The New Typography: By Jan Tschichold. First published in 1928, but the lessons and information in this book are still relevant today.


•    FontShop Education: The resources here are formatted for easy downloading and printing. Perfect for the classroom or studio.
•    Typophile: Great place to identify a typeface. Look through the forums; there are many generous people there who share their own knowledge of the subject.
•    Typographica: This is a review site of typefaces and type books, with occasional commentary on fonts and typographic design.

Have a look around on the web and you will start to notice a lot of great typography. Not only will you find a good variety of styles, but you can also see what other people consider good type. Here are some good places to start:

•    We Love Typography
•    FormFiftyFive
•    Resources for Inspirational Typography
•    Typeneu.com
•    Typographer.org
•    Type Directors Club
•    Typography Served
•    David Airey’s list of typographic Flickr groups
•    Typography on Behance

If you want to find out more about typographic terminology or just want to look up a word, these are useful websites:

•    Fonts.com glossary
•    Paratype.com

If you are interested in reading about using typography in websites, try these useful resources:

•    Websites with beautiful typography
•    Usetypography.com
•    8 detailed typography tips for the web
•    Web Design is 95% Typography
•    A practical guide to web typography
•    The 100% Easy-2-Read Standard