1. Typography
The Art of designing with words and letters

2. type as a design element
In visual communication we can treat
type as a design element

3. Type

4. Type

5. Type - Categories Serif Fonts Sans Serif Fonts Script Decorative
Oldstyle
Transitional
Modern
Slab Serif
Sans Serif Fonts
Script
Decorative
Monospaced

6. Type - Categories Serif Fonts Oldstyle: Times, Garamond
smooth transitions between thick and thin strokes
rounded (bracketed) serifs, slanted serifs
diagonal stress
Transitional: Baskerville
transition between oldstyle & modern
Squared off serifs
Modern: Bodoni, Didot
obvious transition between thick and thin strokes
angular (unbracketed serifs)
vertical stress
Slab Serif: Memphis, Rockwell
Slight transitions between thick and thin strokes
Serifs are thick, fat, horizontal

7. Type - Categories Oldstyle: Times, Garamond
smooth transitions between thick and thin strokes
rounded (bracketed) serifs, slanted serifs
diagonal stress

8. Type - Categories Modern: Bodoni, Didot
obvious transition between thick and thin strokes
angular (unbracketed serifs)
vertical stress

9. Type - Categories Transitional: Baskerville
transition between oldstyle & modern
Squared off serifs

10. Type - Categories Slab Serif: Memphis, Rockwell
Slight transitions between thick and thin strokes
Serifs are thick, fat, horizontal
vertical stress

11. Type - Categories Script Decorative - experimental, graphic
Sans Serif Fonts: Arial, Helvetica, Futura, Franklin Gothic
Without serifs
Usually monoweight: no thick to thin transitions
Large x-height
Script
Decorative - experimental, graphic

12. Type - Categories Monospaced - uniform spacing (fixed-width)
Proportionately spaced fonts –
font rules determine the width of the characters and space around each character (kerning-pairs)

13. Type - Size Points (1/72 inch)
Pica (1 pica = 12 points) – often used to measure width
10, 12, 14, 16, 18, 24, 32, 36
X-height: height of lowercase letters excluding ascenders and descenders
Web (CSS)
Absolute units (points, picas, millimeters, centimeters, inches)
Relative units (em, ex, pixel, %)

14. Terminology - spacing Horizontal Spacing Kerning Tracking
Horizontal space between individual letters
Tracking
Horizontal space between all characters (across word, line, column)
Web (CSS properties)
letter-spacing
word-spacing

15. Terminology - spacing Vertical Spacing Leading Web (CSS properties)
Vertical Spacing between lines of text
Web (CSS properties)
Line-height

16. Terminology - leading

17. Type Legibility Readability
The ease with which type can be understood under normal reading conditions
Clarity and recognition of letterforms, weight and proportion, all caps vs. lowercase, x-height, serif vs. sans serif
Readability
The quality of attracting and holding a reader’s interest, the comfort of the read
Type size, letterspacing, word spacing, linespacing, line length

18. Type

19. Type

20. Type

21. Type

22. Type

23. Type

24. Type

25. Type

26. Type

27. Type

28. Type

29. Type

30. Sources http://www.papress.com/thinkingwithtype/text/tracking.htm
An Introduction to Type
Thinking with Type