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