What Is Typography?

Font Book showing the All Fonts library

Screenshot courtesy of Coyote Moon, Inc.

To use 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 goes back much further than that. This branch of design actually has its roots in handwritten letterforms.

Typography encompasses everything from calligraphy through the digital type that we see today on web pages of all kinds. The art of typography also includes type designers who create new letterforms which are then turned into font files that other designs can use in their work, from printed works to those aforementioned websites. As different as those works may be, the basics of typography underpin them all.

The Elements of Typography

If you've ever spoken to a web designer who uses typography in his work, you likely have heard the terms "typeface" and/or "font." Many people use these two terms interchangeably, but there are actually some differences between these two items.

Typeface is the term given 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 complete typeface.

Font is the term used when someone is referring to only one weight or style within that family (such as Helvetica Bold). So many typefaces are comprised of a number of individual fonts, all of which are similar and related but different in some way. Some typefaces may only include a single font, while others could include numerous variations of the letterforms that make up the fonts.

If this seems confusing, do not worry, if someone is not a typography expert they will likely use the term "font" regardless of which one of these terms they truly mean, and even many professional designers use these two terms interchangeably. Unless you are speaking to a pure type designer about the mechanics of the craft, you are probably pretty safe using whichever of these two terms you'd prefer. That being said, if you do understand the distinction and can properly use the correct terms, that is never a bad thing!

Typeface Classifications 

Sometimes called "generic font families," these are large groupings of typefaces based on a number of generic classifications that different fonts fall under. On web pages, there are six types of font classifications that you are likely to see:

There are also a number of other font classifications that are offshoots of these. For example, "slab serif" fonts are similar to serifs, but they all feature a recognizable design with thick, chunky serifs on the letterforms. Serif and sans-serif are the two most common font classifications that are used on most websites.

Typeface Anatomy

Each typeface is made up of different elements that distinguish it from other typefaces, which is referred to as typeface anatomy. Unless you are specifically going to go into type design and looking to create brand new fonts, web designers generally just need to know the basics of typeface terminology.

At a basic level, the elements of typeface anatomy that you should be aware of are "cap" and "x-height," and "descenders" and "ascenders."

Cap and x-height 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. All fonts are sized based on these two characteristics. 

Descenders and ascenders are the portions of letters that go below and above the x-height line. This is typically referring to lowercase letters. For instance, the letter "b" has an ascender (the piece that sticks "up" from the letter) while the letter "p" has a descender (the parts that dip "down" from the letter).

Spacing Around Letters

There are several adjustments that can be made between and around letters that affect typography. Digital fonts are created with many of these characteristics in place, and on websites, we have limited ability to change these aspects of the font. This is often a good thing since the default way that fonts are displayed is usually preferable. 

  • Kerning: The horizontal space between individual letters
  • Tracking: The space between groups of letters
  • Leading: Vertical space between lines of type (this is known as line-height in website terms)
  • Measure: The length of lines of text
  • Alignment: Visually placing text to the left, right, centered, or justified
  • Ligatures: Letters moved so close together 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 for any design:

"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 and do not use it in their work because it is not something that is handled well automatically by web browsers.

"Rag" is the uneven vertical edge of a block of text. 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. This is something that is automatically handled by the browser in terms of how it wraps type from line to line.

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. Your goal should be to minimize these aspects of a type's design, while also being realistic in the fact that you cannot achieve perfection for every screen size and display.

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, such as hyphens and dashes.
  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.