Typography Basics

This chapter includes information about:

  • Introductory typography vocabulary
  • Readability and effectiveness of text
  • Resources for obtaining fonts and learning more

Along with images, text is an important visual element for communicating a particular message. Typography is the visual display and arrangement of text, and typography choices greatly influence the way viewers perceive a message.

Classifications and History

Typefaces, commonly known as fonts, can be categorized as serif, sans serif or script. Serifs are the the smaller lines or wedges attached the main strokes of letters. Sans serif fonts are more modern and do not have these flourishes. Script fonts mimic styles of handwritten, connected letters.

serifs

Serif fonts (left), sans serif fonts (center), and script fonts (right)
Serif fonts (left), sans serif fonts (center), and script fonts (right)

Some other fonts are known as novelty or display fonts, and they are designed to be used for decorative purposes rather than readability.

Watch this illustrated video about the history of typography and how different styles evolved. Choosing a type style appropriate for your content gives that message credibility and creates intellectual unity.


Principles for Readability

Text used to communicate a message must be readable to be effective. Factors like size, color and contrast affect readability.

1. Maintain contrast between the text and the background. Text that is similar in color tone to the background is difficult to read. Because of this, colored text is typically more difficult to read than high-contrast black or white text. To test for enough contrast, view a composition in grayscale.

Although it may seem that red text would contrast well against a green background, viewing the image in grayscale shows that the colors are too similar in tone. Instead, white text with a subtle drop shadow is far more readable.

2. Avoid using more than two fonts. Except for very specific effects, type consistency is best for readability and professionalism. Designers often pair two fonts of different styles, such as a serif font and a sans serif font.

3. Use font styles such as bold, italic and all caps only for specific purposes. These font styles can be used for emphasis, but lose their power and hurt readability when used for long passages of text. Avoid underlined text in graphic design.

4. Respect left-to-right, top-to-bottom reading flow. When using text in different parts of a visual composition, keep the text placement logical so readers know the order in which the words should be read.


Resources & Supplementary Readings

Google Web Fonts: Hundreds of free-to-use fonts that can be used online or downloaded

Fonts.com Fontology: Overview of typography concepts and vocabulary

Butterick’s Practical Typography: A thorough and well-organized online book from introductory to more advanced topics