Design Principles - Font Theory

I am watching the Design course provided by Code School. Here are my notes from watching the course.

Whenever designing something new you need to take into account 3 things:

  1. Audience. Age? Race? Gender? Culture?
  2. Tone. Casual? Formal? Scary?
  3. Purpose. Informational? Conversions?

Font Theory

The designer first provides a style guide. Create a page with the fonts you want to use for the various sections of your page.

Headline Text - size - 300% of body copy
Subhead Text - size - 150% of body copy
Navigation Text - size - 100% of body copy
Body Copy
Byline Text - size - 75% of body copy

You must know the classes of types.

  • Serif - a small line tailing from edges of font
    • Humanist - emulates classical calligraphy, good for journalism or historical applications, e.g. Palatino, Garamond, and Sorts Mill Goudy
    • Transitional - more contrast in thick and think strokes, Academia and Legal Apps, e.g. Times New Roman, Droid Serif
    • Modern - thin horizontal serif, Arts and Cultures Apps
    • Egyption(Slab) - authoritative feel, Marketing and Promotional Applications, e.g. Rockwell
  • Sans Serif - a font without a serif
    • Humanist - emulates calligraphy. Government, finance, and educational apps, e.g. Verdana, Droid Sans
    • Transitional - technology and transportation applications, e.g. Helvetica, Lato
    • Geometric - based on circles, and triangles, Science or Arch application, e.g. Century Gothic, Futura, Roboto
  • Script - great for adding human feel to website, Comic Sans is actually a script font but don't use it

Rules of Thumb for Fonts

  • Serif for title and sans serif for body.
  • Single font face is okay.
  • Don't choose 2 fonts from the same style.
  • Don't choose 2 fonts from same class.
  • Find fonts with similar traits.
  • Keep fonts similar or very different, go for contrast
  • Use 16px body copy.
  • Bold the heading of a body copy.
  • Avoid widows and orphans, especially in headings and titles. Use font size, weight, and style to avoid widows in headings.
  • Use a line height of 1.5 in your css for body copy.

Examples of Good Font Pairings

Context Title Body
Technology Lato or Source Sans Pro (Transitional Sans Serif) Droid Serif (Transitonal Serif)
Finance Droid Sans (Humanist Sans Serif) Palatino (Humanist Serif)
Education Palatino (Humanist Serif) Lato (Sans Serif)