Part III: Typography

• The Hierarchy of Typography

• Anatomy of Type

• A Brief History of Type
• Choosing Appropriate type
• Tools for emphasis and legibility

• TRY IT: 10 minute Headline
Back to Contents



The 'body' of type

  • Legibility of text is affected by the parts of the anatomy. A higher x-height, relative to the cap height, generally means greater legibility.

  • Multiple lines of text are measured from baseline to baseline - see leading

  • Watch out for ascenders of one line touching the descenders of another.


Type sizes

  • Traditional text is measured in points, the standard unit of measure in software programs for creating printed documents. There are 72 points to an inch and 12 points to a pica (picas are typically used to measure text widths, images, etc.)

  • Typical body copy sizes are 8 to 12 points, headlines from 14 points and up.

  • Web type doesn't use these traditional units of measure within the HTML tags: <H> (headline), <P> (paragraph) and <FONT>. This is changing, however, with Cascading Style Sheets (CSS). The suggested unit of measure for most consistent display across platforms and browsers is pixels. Check out the Web Design Group's CSS Reference for more information.

Leading (line spacing)

  • Leading is space between lines of text. Extra leading aids body copy a great deal by making type look more open and friendly, less daunting. Too much leading makes it hard to 'jump' from line to line.

  • Leading is expressed in a ratio of size to leading, e.g., '10 on 12.'

  • Typical leading, or 'auto' settings in most page layout programs, is around 20% more than the size of the type, such as 10 on 12.

  • HTML type typically doesn't typically give control over line spacing. This is changing, however, with Cascading Style Sheets (CSS). This example shows CSS linespacing.

    Check out the great CSS tutorial at http://www.w3schools.com/css/ for more information.

Spacing between letters

  • Tracking or letterspacing applies to whole lines of text. Add or subract tracking to give text a looser or tighter feel. Letterspacing is not possible with HTML, but this example shows how letterspacing is done with CSS (Cascading Style Sheets). Letterspacing may be controlled in all graphics programs.

  • Kerning applies to the space between individual letters. Certain combinations of letters typically leave too much space between the characters, such as capital "A" and "W." These examples have already been kerned, bringing the letters closer together:

 

next: A brief history of type