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.

Classifications

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

Decorative

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

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