Typographic Principles

Ways to shift typographic emphasis

screen & print

  • point size
  • weight
  • color
  • position
  • rhythm

screen specific

  • motion
  • interaction

Typographic Anatomy

baseline –  an invisible line that the bottom of your letters sit on. Adjust or make changes to the baseline to create whimsical or quirky effects with their lettering

cap height – a line that marks the  height of the capital, uppercase letters

x-height – the distance between the baseline and the top of the main body of a lowercase letter. (Imagine a lowercase x sitting on your baseline — the distance from the bottom of that letter to the top is your x-height.)

ascender height – the farthest point that the ascenders raise to 

descender height – the farthest point that the descenders dip to

mean line – the imaginary line at the top of the x-height.

median – where most of your lower case letters should reach their maximum height. This is also called the x-height

leading – the vertical spacing between letters and words that reside on multiple baselines. The farther the lines are vertically spaced apart, the greater the leading

line height –  the specific distance from baseline to baseline in multi-line text

kerning – the horizontal spacing between two characters

tracking – similar to kerning in that it refers to the horizontal spacing between letters, but it is applied across multiple letters uniformly

Type Classifications

Most typefaces can be classified into one of four basic groups:

  • serifs
  • san-serifs
  • scripts
  • decorative styles

Typographers and scholars of typography have created systems to categorize typefaces – some of these systems have many sub-categories.

A classification system can be helpful in identifying, choosing and combining typefaces. Below are 15 styles based on the historical time periods and descriptive names. They were first published in 1954 as the Vox system – and are widely accepted as a standard today.


Serif Type Styles

  • Old Style
  • Transitional
  • Neoclassical & Didone
  • Slab
  • Clarendon
  • Glyphic

Sans Serif Type Styles

  • Grotesque
  • Square
  • Humanistic
  • Geometric

Script Type Styles

  • Formal
  • Casual
  • Calligraphic
  • Blackletter & Lombardic


  • Grunge
  • Psychedelic
  • Graffiti

A guide for screen-based typography

Typography exists to honor content. It is critical that it be readable, understandable and legible. It will not add to the cognitive load of the user

  1. Keep the number of fonts used to a minimum
  2. Good typography draws the reader to the content, not to the type itself
  3. use flexible grids that consider line length
    • 30 – 40 characters per line for mobile
    • 45 – 60 characters for desktop, (& most printed books)
  4. Find a typeface that works well at multiple sizes & weights. The typeface maintains readability and usability in every size
  5. Distinguishable letters
  6. AVOID all calls unless it is your goal to alert
  7. A good balance of leading and weight until you achieve an appropriate density
    • 50% value when you squint
  8.  Sufficient color contrast, test with users on multiple devices
  9. Avoid green or red text due to color blindness
  10. Avoid blinking text