Principles of Typography

1. Principles of Typography

2. Fonts • Different fonts send a different message to the reader: • Sans serif • Serif • Script • Decorative

3. Sans-serif Fonts • Easy to read, especially online • Modern and clean • Good for websites or other online formats • Good for headings in printed texts • Examples include: • Arial • Comic Sans MS • Century Gothic • News Gothic MT

4. Serif Fonts • Easier to read in print • More old-fashioned or traditional • Best for the body text in print documents • Examples include: • Times New Roman • Book Antiqua • Courier New • Garamond

5. Script Fonts • Hard to read - use sparingly! • Traditional and flowery – often used on wedding invitations or menus • Examples include: • French Script MT • Pristina • Lucida Calligraphy

6. Decorative Fonts (also Display) • Hard to read – use sparingly • Good for headings • Create a fun, funky mood • Examples include: • BeesKnees • Curlz MT • Harlow Solid Italic • Jokerman

7. Grunge Fonts • Deteriorated fonts • Designed to appear “beaten up” with parts of the characters missing or misshapen

8. Dingbat Fonts • Symbol sets in fonts • Often used for bullets or for accents • Examples include: • Wingdings • Webdings

9. Sans Serif Serif Serifs Type Checkup • Which is serif and which is sans serif?

10. Script Decorative Type Checkup • Which is script and which is decorative?

11. Text Terms • Kerning • The distance between letters • a.k.a Tracking

12. Text Terms • Leading • The Distance between lines • Named for the lead used to separate lines of type in early printing presses. This is my first Line of Text This is my Second A third And Finally a fourth Another?

13. Text Terms • Text Styles • Some common styles that can be applied to text: Bold Italic Underlined Shadow Embossed

14. 12-Point 24-Point 36-Point 48-Point Ascender Display Descender Text Terms • Font Size • Measured in points • 72 points = 1’’

15. Text Terms • Alignment Left Aligned Center Aligned Right Aligned Justified words in a paragraph are shown in these two short sentences. See how they line up at the left and right?

16. Text Terms • Reverse text • Common style used because white on a dark background is quite striking • Adds impact and emphasis to words

17. Rupert Buchanan Rupert Buchanan Widget Enterprises Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2532 1569 Stone Road Toulouse, PQ (800) 325-2532 Mixing Fonts • If you want to use more than one font in a document, make sure they come from two different font families • In the improved business card, a sans-serif font is combined with a serif-font for better contrast

18. Type contrasts • There are six different ways of contrasting fonts: • Size • Weight • Structure • Direction • Color

19. Type contrast - size • You can contrast any two fonts by making them two different sizes, but make them very different • i.e. 12 pt. versus 14 pt. isn’t enough Schnobblecaster Incorporated Schnobblecaster I N C O R P O R A T E D

20. Type contrast - weight • You can also achieve contrast by varying the thickness of type strokes • i.e. regular, bold, extra bold, and light • This can be an effective way of organizing information (i.e. use it for headers) Carmichael Foods Asparagus Tips Carmichael Foods Asparagus Tips

21. Type contrast - structure • Make sure you pick fonts from two different families with different structures • i.e. one serif and one sans serif, one decorative and one sans serif, etc. • For printed documents, the body text is normally a serif, while the headings are usually sans serif.

22. Structure - continued • The examples on this page look bad because they each combine two fonts from the same family Some of this And some of that Some of this And some of that Some of this And some of that Some of this And some of that

23. Structure - continued • By switching the fonts around, we can get some decent looking examples of type contrast Some of this And some of that Some of this And some of that Some of this And some of that Some of this And some of that

24. Type contrast - Direction • You can create some interesting effects by varying horizontal and vertical lines of type • You should have a good reason for doing this, though. In general, don’t make people read stuff sideways or on an angle. Experience teaches you to recognize a mistake— when you’ve made it again.

25. Type contrast - color • Warm colors tend to come forward and command attention • Cool colors tend to recede from our eyes • You need more of a cool color to create effective contrast than you would need of a warm color Cunningham State College Cunningham State College

26. Type contrast – black & white • Varying the typeface you use can add “color” to a page, even if it’s still black. • Differences in the weight, structure, space inside letters, space between letters, size of type, and so on can create “color” contrast. Typography If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it. If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it.

27. Type contrast – black & white • Each font has a different density, so some look darker than others. • Each of these examples is in Arial, but each has a different “color” or shade of grey. • Differences in the weight, structure, space inside letters, space between letters, size of type, also create “color” contrast. If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it. If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it. If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage or short story in an obviously different ‘color,’ then readers are more likely to stop on the page and actually read it.

28. Typography Do’s and Don’ts • don't mix more than three type styles in one page • use sans serif in titles and serif in body text • use italics sparingly • create contrast • don't use display fonts or too many colors in body copy • don't forget that typography is supposed to make the text easier to read

29. Combining contrasts • Most effective layouts take advantage of more than one type of contrast. • Look through magazines for examples and ideas. • Try to verbalize what you see in a good or bad example. You should also be able to provide a rationale for any design decision you make (not just “it looked better”).

30. Critiquing designs • Try do identify the problem. How effective is the contrast in weight? Size? Structure? • Try to name the differences, not similarities. Are two font faces competing with each other because they are both all caps? Because they are both sans serif? • Focus on conflicts. Is the larger type a light weight, and the smaller one a bold weight, so that they fight with each other for emphasis?

31. Contrast or conflict? HALLOWEEN THRILLER extremely good DOG FOOD let’s DANCEtonight MY MOTHER This is an essay on why my Mom will always be the greatest mother in the world. FUNNY FARM Health Insurance