Typography Tips

Typography tips for body text:

  • Try to keep your line length to about 60 characters. Not only will comprehension begin to drop when lines are too long, people will actually stop reading your text.
  • If you must use long lines, double-spacing will help legibility.
  • The opposite is also true: a short line length of around 20 characters will also hamper comprehension. Short line lengths should be reserved for accent text.
  • In conventional English, it is thought paragraphs should be at least three or four sentences long. On the Web, long paragraphs are discouraged, as it’s believed that short paragraphs that get to the point are more appropriate for the fast click-and-go environment.
  • Avoid very wide or very narrow leading (line height). A paragraph that is too close or too far away from the text that comes before or after it can cause a problem with comprehension.
  • Fonts that are too light or too heavy may be difficult to read, especially in smaller sizes.
  • Typefaces with too much thick/thin contrast may be difficult to read if they are set too small – the thin strokes may seem to disappear.
  • Condensed or expanded letters (in letterspacing) are more difficult to read because the forms of the letters change.
  • Larger sizes require tighter spaces than smaller sizes. If the type is a display size, you will have to space it differently than a text size.
  • In both display and text sizes, type set in all capitals is generally more difficult to read. A combination of capitals and lowercase letters provides maximum readability.
  • In general, type that is flush left, ragged right is easiest to read. That does not mean you should not use any other type alignment. Base your decision on several factors: the type size, the leading, the meaning, the audience, and the amount of type. Reading a short message in flush right, ragged left is not too difficult.
  • Where you break the lines of type depends on two basic factors: aesthetics (appearance) and editorial meaning. Line breaks should be aesthetically pleasing. Break lines in natural places to enhance meaning. Indentations and leading between paragraphs also enhance legibility. Paragraphs that are too long are difficult to read. The use of initial capitals also can enhance readability.
  • Italics are best used for emphasis, rather than for large blocks of text, which may be difficult to read.
  • Carefully consider your audience and what limitations they may have when reading text on your Web site. Make sure your text is easy to read.
  • Design type in a visual hierarchy (that makes the order of material they choose to read through your page self evident). People who tend to read the biggest elements first; they tend to read headlines or titles first, subtitles or pull (large) quotes second, then captions, and finally the text type. When you look at other Web pages, observe the order in which you are attracted to the information and how you read through the various text displayed.
  • Type arrangement or alignment should enhance readability, not hinder it.
  • Letterspacing, word spacing, and line spacing all factor into readability, communication and expression.
  • Consider letterforms as pure forms; think about them as positive/negative space relationships.
  • Color should enhance the message and expression and not hinder readability.
  • Word spacing and line spacing establish a rhythm, a pace at which the viewer reads the message.
  • The typography should be appropriate for the message and audience
  • Typography should enhance the a message, not detract from it.
  • When mixing typefaces, think about appropriateness to the message, contrast, weights, visual hierarchy, and scale.
  • Become very familiar with, and learn to use, at least five classic typefaces, for example, Bodini, Caslon, Futura, Univers, and Times Roman
  • Avoid novelty or decorative typefaces.

(Landa, 1996)

(Shea and Holzschlag, 2005)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s