What is Typography?

Typography Basics

Wooden type letters
Wooden type letters.

At the most basic explanation - typography is the design and use of typefaces as a means of communication. Many people consider typography 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 the digital type that we see today on web pages. The art of typography also includes type designers who create new letterforms (which in turn make us font files) as well as designers and calligraphers who use the letters as part of their designs.

Elements of Typography

Typefaces and Fonts: Many people use the terms "typeface" and "font" interchangeably, but there are actually some differences between these two item.

"Typeface" is the terms give to a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold). All of the various versions of Helvetica make up the typeface.

"Font" is the term used when someone is referring to only one weight or style within that family (such as Helvetica Bold). 

In practice, if someone is not a typography expert, they will likely use the term "font" regardless of which one of these terms they truly mean.

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

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

Serif and sans-serif are the two most common font classifications used on websites/

Typeface Anatomy: Each typeface is made up of different elements that distinguish it from other typefaces. Unless you are specially going to go into type design, web designers don't generally need to know the specifics of typeface anatomy. If you're interested in learning more about these building blocks of typefaces and letterforms, there is a great article on typeface anatomy on the About.com desktop publishing site.

At a basica level, 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, as well as 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. For instance, the letter "b" has an ascender while the letter "p" has a descender.

Spacing Around Letters

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

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

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. While commonly found in printed documents, 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.

Getting your lines of text to display perfectly in a web browser is a grueling proposition, especially when you have a responsive website and different displays for different screen sizes.Your goal should be to review the site at different sizes to try to create the best look possible, while accepting that in certain cases your content will have windows, orphans, or other less-than-ideal displays.

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. If you build the design using placeholder text, 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.