1. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO TYPOGRAPHY DESIGN Vocabulary and Guidelines

2. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 2 Agenda  Why Typography?  Letterform Anatomy  Typeface classifications  Design Principles  Font, Case, Style, Size  Letterspacing  Linespacing  Alignment  Hierarchy  Examples

3. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3 Goals of typographic design  Typography plays an important role in how audiences perceive your document and its information.  Good design is about  capturing your audience’s interest and  helping your audience gather information quickly and accurately.  Typography creates relationships between different types of information, both organizing this information and keeping it interesting.

4. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 4 Letterform Anatomy

5. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 5 Letterform Anatomy

6. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 6 Letterform Anatomy

7. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 7 Letterform Anatomy

8. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Typeface Classification 8 There are five: Oldstyle Modern Sans serif Slab serif Graphic

9. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Typeface Classification: Oldstyle 9

10. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Oldstyle 10

11. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Type Classifications: Modern 11

12. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Modern 12

13. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Typeface Classifications: Sans Serif 13

14. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Slab Serif 14

15. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Slab Serif Examples… 15

16. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Type Classifications: Graphic 16

17. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Type Classifications: Graphic 17

18. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 18 Design principles for typography  Legibility: Making sure the audience can read and understand your text.  Similarity, alignment: Using typography to create relationships between similar kinds of information.  Uniformity or consistency: Repeating familiar elements to focus your audience’s attention.  Contrast: Creating interest and distinguishing different types of information with different typefaces. One element of contrast is hierarchy—making sure the audience understands that information has different levels of importance.

19. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 19 Typography and legibility  Legibility is a combination of factors:  Font family  Font size  Letter, word, and line spacing  Alignment

20. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 20 Legibility and font families Stroke Line Stroke OnlinePrint Serifs create distinctions between characters (uppercase “I” and lowercase “L” ) Appears blurry Helps the reader follow text easily Serif fonts have contrasting strokes and lines Helps move reader’s eye character to character Sans serif fonts have uniform strokes throughout Helps readers easily read text Makes words in a sentence hard to follow

21. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 21 Fonts  Serif font – readability for long, extended text  Sans serif font – legibility for headlines, headings, captions  (both are variable spaced)  Monospace font

22. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 22 Font Examples Use regularly Serif: Times, Sans serif: Arial, Verdana Don ’ t use regularly Decorative: Comic Sans, Script: Monospaced : Courier, Lucida

23. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 23 Case  UPPER and lower case  AVOID HEAVY USE OF ALL UPPER CASE!!  Studies have found that mixed case promotes faster reading HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT ’ S ALL IN CAPITALS AND YOU NEVER GET A REST. USE ALL CAPS FOR HEADLINES AND HEADINGS How much fun is it to read all this text when it ’ s all in capitals and you never get a rest. So use lower case for regular text

24. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 24 Style  Plain text  Italic text  Bold text  (Purists consider these as different fonts)

25. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 25 Size  Type sizes are not standard, but are based on old measurements of the piece of metal  So it appears to be larger

26. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 26 Size  Type is measured in points 10 Point Times 12 Point Times 14 Point Times 16 Point Times 18 Point Times 20 Point Times 24 Point Times

27. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 27 Legibility and body text size  Legibility of body text varies for different audiences:  Younger audiences may be able to read fonts sized at 8 or 9 points.  Older audiences may be able to read font sizes around 10 points or above.  Font sizes above 14 points break down the continuity of the text, making text appear too gray.

28. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 28 Legibility and spacing  If letters, words, or lines are too close together, readers have a hard time because text blocks tend to look too dark.  If letters, words, or lines are too far apart, readers have a hard time because blocks of text tend to look too light, causing readers to lose a sense of continuity.  Spacing between words needs to be consistent to promote legibility; too much variation leads to eyestrain.

29. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 29 Letterspacing – Kerning, Tracking  The space between TWO letters is kerning The space AMONG more than 2 letters is tracking

30. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 30 Letterspacing  Strive for regular spacing and a uniform texture

31. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 CS / PSYCH 4750 Foley 31 Linespacing (aka Leading)  Line spacing is measured in points from baseline to baseline  It is usually 20% larger than the point size of text (10 point type generally defaults to 12 point leading)

32. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Fa ll 20 03 32 Linespacing Guidelines  More line spacing generally results in greater legibility, until the lines seem to be separate lines.

33. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 33 Legibility and alignment  Left-aligned text is most legible, because spacing between words is uniform.  Justified text is also legible, though less so with shorter line lengths because it tends to create uneven spaces between words.

34. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 34 Similarity and alignment also known as “using the grid”  Aligned text creates a line in your design; such lines help readers draw connections between different parts of a document.

35. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Avoid stacking type… 35

36. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 36 Uniformity  To maintain overall uniformity, limit the number of different font families per page to one or two.  Use the same font for headings and body text to produce a uniform look; this is known as concordance.

37. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 37 Contrast  Using the same font family throughout creates uniformity but may make documents seem “flat” or uninteresting.  You can add interest by contrasting the display type and body type.

38. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 38 Contrast and font families  To create contrast, you could use two font families, one serif and one sans serif. Heading is set in Impact—a sans serif font Subheading is set in Georgia—a serif font

39. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 39 Conflict  To avoid conflict, many designers avoid using two font families of the same variety, such as two serif fonts. Heading is set in Palatino—a serif font Subheading is set in Georgia— also a serif font

40. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 40 Contrast using “tracking”  Remember tracking refers to the space between all of the letters in a line.  Font families have built-in tracking that works well for body text.  For headings, you can change tracking to create contrast. Heading is set with wide tracking

41. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 41 Contrast and baseline shift  Designers shift baseline to create interest: Dropping the first letter adds a playful look. Moving other letters around creates a “jittery” effect.

42. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 42 Hierarchy and typography  Use typography to guide readers through the levels of your document.  Use different headings by changing font family, font type, font size, font color.  To promote uniformity and help your audiences navigate, keep typographic choices consistent for each subsection throughout the document.

43. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 43 Hierarchy and typography  Hierarchy helps your audience distinguish between levels of information, such as headings versus body text.  Many documents are divided into hierarchical sections: Main title Section Subsection Or Book Chapter Subheading Sub-subheading

44. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 44 Example of hierarchy These headings look the same because they express the same level of hierarchy Different levels use different font sizes, font families, font colors, and leading. Top-level headings can use unconventional fonts

45. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 45

46. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. http://www.rsub.com/typographic/

47. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. http://www.rsub.com/typographic/

48. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 48

49. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 49

50. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 50

51. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 51

52. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 52

53. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved. 53 Summary  Typography can play a key role in design.  Good typography starts with font family; choose these to meet your design goals, but keep them limited.  Use text alignment to create relationships between different kinds of information.  Create contrast by using a serif font for headings and a sans serif font for body text (or vice versa). You can also use italics, bold, tracking, or color to create contrast.  Use contrast to indicate hierarchy.