1. Typography 101
Using Typography
to Enhance Content

2. R R R R Designing with Type Classifications and fonts: >Times
>Helvetica
>Brush
>Papyrus R R R R
SERIF
SANS SERIF
SCRIPT
DECORATIVE

3. R R R R Designing with Type Styles: >Italic >Thin >Roman
>Bold R R R R
THE FACES OF HELVETICA

4. Typography Designing with Type Typographic anatomy:
ASCENDER
X-HEIGHT
POINT
SIZE
DESCENDER
TYPE IS MEASURED IN POINTS

5. Designing with Type Alignment: ~ Justified ~ Align Center ~ Align Left
This text block demonstrates justified text. The margins on the left and right are even so it is called justified. Text is often justified.
This text block demonstrates align center. Each line of this text block is centered. Align center is often used for headlines.
~ Align Left
~ Align Right
This text block demonstrates align left. The left margin is aligned, but the right margin is ragged, creating a more open look.
This text block demonstrates align right. The right margin is aligned, but the left margin is ragged. This isn’t suggested for lengthy text.

6. Designing with Type This is a headline this is a headline
Case:
This is a headline
this is a headline
THIS IS A HEADLINE
~ Normal/Sentence Style
~ Lowercase
~ All-Caps
~ Small-Caps

7. Designing with Type Typographic sizes:
> primary headlines: 30 to 200+ point
> secondary headlines: 12 to 18 point
> stories: 10 point
> secondary stories/quotes: 10 to 12 point, but varies
> captions: 8 point
> folios: 10 point or larger, depending on the
treatment

8. Designing with Type Typographic tips:
~ establish a hierarchy of sizes from large to small
~ resist the urge to use a lot of fonts; vary weight, case
and color to create different looks
~ combine two contrasting fonts [serif and sans serif]
~ readers should notice the words not the lettering
itself

9. GALLERY // combining different
types for effect
TYPE | typography

10. TYPE | typography GALLERY // Type faces are similar;
sizes and spacing differ
TYPE | typography

11. GALLERY // Outlined font and bold; all caps
TYPE | typography

12. GALLERY // Different sizes; same font
TYPE | typography

13. GALLERY // Font as a design element
TYPE | typography

14. GALLERY // Strong font statement
goes with photo
TYPE | typography

15. GALLERY // Photos in font
TYPE | typography

16. GALLERY // Font integrated into the design
TYPE | typography

17. GALLERY // Font goes with what it says; “Style Defined”
TYPE | typography

18. GALLERY // Font with photo
TYPE | typography

19. GALLERY //Fancy font stands out with the squares and clean lines
TYPE | typography

20. GALLERY // Font numbers make the quick reads stand out; differing sizes
TYPE | typography

21. GALLERY // Font design element
TYPE | typography

22. GALLERY // Font makes quick reads stand out
TYPE | typography

23. GALLERY // Font use defines the spaces for the quick reads
TYPE | typography

24. GALLERY // Use of lower case letters and strong number font
TYPE | typography

25. GALLERY // Font as a design tool; graphic
TYPE | typography

26. GALLERY // Drop cap and side bar with strong complementary fonts
TYPE | typography

27. GALLERY // Using fonts and type to define the space
TYPE | typography

28. GALLERY // Contrasting fonts; headline treatment
TYPE | typography

29. GALLERY // Silhouetted font behind headline
TYPE | typography

30. Tips for Choosing Type When Using Script Never: use all caps
mix two styles of script together on a page

31. Tips for Choosing Type Contrast your type. Six ways to do so: Size
Weight
Structure
Form
Direction
Color

32. Tips for Choosing Type
There must be an exaggerated difference, or it won’t appear to contrast
Spacial contrast also works – little type in a large area of space
If type elements must be included, but they are not important, shrink them
Using upper/lower case words over all caps allows for more contrast in size
Unusually large letters or symbols work well as graphic elements

33. Tips for Choosing Type Weight refers to the thickness of the stroke
Be bold, don’t stop at a small or medium difference in weight, go for it!
If you are combining different families, emphasize the weight difference
Use weight differences for aesthetic purposes and for organization

34. Tips for Choosing Type
Each category of type is founded on differences in structure
If you are using two families of type, use two completely different structures
Avoid setting two types from the same category, especially sans serif mono weights.
Easy way to pick contrasting structure is to pick one serif and one sans serif and then emphasize contrasting weight and/or size

35. Tips for Choosing Type Form refers to a letter’s shape
All capped words are different in form but are also more difficult to read
Italic vs. Roman is another contrast of form
Use the true italic form over oblique form if it is available for more contrast
Since script fonts and italic forms are similar in many respects, never, never, never combine two script fonts, two italics, or a script and an italic

36. Tips for Choosing Type
Direction is the direction that an element of type of a body of type creates, for example, a line of type has a horizontal direction, a column of type has a vertical direction, and so on
Sometimes a strong redirection of type (for example up the side of a page) creates impact

37. GALLERY // Headline design uses direction
TYPE | typography

38. Tips for Choosing Type
On a color page, color contrasts refer to differences in color for emphasis
Warm colors come forward, cool colors recede
On a black and white page, color refers to values of gray obtained by tinting letters with percentages of black.
Or, it refers to the shade of gray a large body of text creates because of the type’s structure, form, spacing between letters and lines, and size of the type

39. GALLERY // Contrasting color makes the words stand out
TYPE | typography

40. Tips for Choosing Type Don’t just choose the default font
Think about a font that matches your theme
Then choose a contrasting font
Play with your design to make the type stand out
Have fun!