What is Typography?

Wooden type letters
Wooden type letters.

What is typography and, by extension, typographic design? 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

Typefaces and Fonts: If you've ever spoken to a design who use typography in their works, 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 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 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.

Does this sound a bit confusing?  If so, do not worry.

In reality, 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:

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

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.

One websites today, serif and sans-serif are the two most common font classifications that are used.

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 and looking to create brand new fonts, 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 basic level, the elements of typeface anatomy thatyou 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. Fonts are sized based on these two characteristics. 
  • 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 (the piece that sticks "up" from the letter) while the letter "p" has a descender (the parts that dips "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 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 for any design:

    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 and do not use it in their work because 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. This is something that is automatically handled by the browser in terms of how it raps type from line to line.

    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.

     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.
    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.

    Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/5/17