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:
- Audience. Age? Race? Gender? Culture?
- Tone. Casual? Formal? Scary?
- Purpose. Informational? Conversions?
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
|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)|