1. Technology

What is Typography?

Typography Basics


Typography is the design and use of typefaces as a means of communication. It is considered to have begun with Gutenberg and the development of moveable type. But typography has its roots in handwritten letterforms. Typography encompasses everything from calligraphy through digital type and type on Web pages. It also includes type designers who create new letterforms as well as designers and calligraphers who use the letters as part of their designs.

Typography uses typefaces and the whitespace around and through them to create a whole design.

Elements of Typography

Typefaces and Fonts: Typefaces are a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold). Fonts are one weight or style within that family (such as Helvetica Bold).

Typeface Classifications: These are sometimes called "font families". They are large groupings of typefaces based on generic classifications. On Web pages, there are six types:

  • serif
  • sans-serif
  • monospaced
  • cursive
  • fantasy
  • script

Typeface Anatomy: Each typeface is made up of different elements that distinguish it from other typefaces. Unless you are going to go into type design, Web designers don't generally need to know the specifics of typeface anatomy. But if you're interested, there is a great article on typeface anatomy on the About.com desktop publishing site. The elements you should be aware of are:

  • Cap and x-height: This is the height of the capital letters in the typeface and the height of the letter x. It tells you how tall the largest letters will be, and how big most lowercase letters will be.
  • Decenders and ascenders: These are the portions of letters that go below and above the x-height line. These typically refer to lowercase letters.

Spacing Around Letters

There are several adjustments that can be made between and around letters that affect typography.

  • kerning - space between individual letters
  • tracking - space between groups of letters
  • leading - space between lines of type
  • measure - the length of lines of text
  • alignment - placing text to the left, right, centered or justified
  • ligatures - letters moved close together so that their anatomies are combined

More Typography Elements

Typography is more than just the typefaces that are used and the whitespace around them. There are also some other things you should keep in mind when creating a good typographic system:

Hyphenation: Hyphenation is the addition of a hyphen (-) at the end of lines to help prevent problems in readability or make justification look better. Most Web designers ignore hyphenation, as it is not something that is handled well automatically by Web browsers.

Rag: The uneven vertical edge of a block of text is called the rag. When paying attention to typography, you should look at your text blocks as a whole to make sure that the rag is not impacting the design. If the rag is too jagged or uneven it can affect the readability of the text block and make it distracting.

Widows and Orphans: A single word at the end of a column is a widow and if it's at the top of a new column it's an orphan. Widows and orphans look bad and can be hard to read.

Steps to Checking Your Typography

  1. Choose the typefaces carefully, looking at the anatomy of the type as well as what family of type it is in.
  2. Build the design using placeholder text, but don't approve the final design until you've seen the real text in the design.
  3. Pay attention to the little details of the typography.
  4. Look at each block of text as though it had no words in it. What shapes does the text make on the page? Make sure those shapes carry the entire page design forward.
See More About

©2014 About.com. All rights reserved.