Slides accompanying presentation on typography, Sept. 20, 2012.

1. Typography 101

2. y po gr ap hy
T
101

3. HISTORY
really, really condensed.

4. movable type
image: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg

5. ‘
Gutenberg's achievement created
a new and wonderful earth
but at the same time also a new hell.
—Mark Twain
source: http://www.twainquotes.com/Gutenberg.html

6. CLAUDE
Garamond
1490-1561
image: http://en.wikipedia.org/wiki/Claude_Garamond

7. William
CASLON
1692-1766
image: http://en.wikipedia.org/wiki/William_Caslon

8. JOHN
Baskerville
1706-1775
image: http://en.wikipedia.org/wiki/John_Baskerville

9. Giambattista
BODONI 1740-1813
image: http://en.wikipedia.org/wiki/Giambattista_Bodoni

10. Eric GILL
1882-1947
image: http://www.ericgill.org.uk/

11. SETTING TYPE n processes
the {rela tively} moder

12. AYS
to work
TH W
I walked
L BO
back when
UPHIL b arefoot i n the snow
1. Get copy approved
2. Spec text
3. Send out to typesetting house
4. Wait a day or two for type to come back
5. Return to step two because you did it wrong

13. MATH
image: http://alexanderwwhite.files.wordpress.com/2011/06/1-2-3copyfitting72dpi.jpg

14. {
really {
image: http://www.marksimonson.com/article/232..

15. <LL>
<PS>
Like wr iting HTML
but not get ting to see
what it looks like
unt il tomorrow
image: http://ffanzeen.blogspot.com/2009/03/trading-travel-agent.html

16. Wax machines
Paste-u p production
images: http://commfaculty.fullerton.edu/woverbeck/dtr5.htm

17. Hello.
image: http://en.wikipedia.org/wiki/File:Se30.jpg

18. $6500
image: http://en.wikipedia.org/wiki/File:Se30.jpg

19. image: http://www.makingpages.org/pagemaker/history/

20. image: http://en.wikipedia.org/wiki/File:Original_Mac_fonts.png

21. image: http://www.youtube.com/watch?v=8Vj37x2jScU&trackingid=JSDWE

22. image: http://www.fontlab.com/font-editor/fontlab-studio/fontlab-studio-tutorials/

23. LETTERFORMS

24. Type is fun
baseline

25. Type is fun x-height

26. cap height
Type is fun

27. ascender height
Type is fun

28. Type is fun
descender height

29. Tall x-heights can make type
friendlier and easier to read…
PT Sans

30. …even when your fonts have feet.
Fonts with feet are called serif.
Georgia

31. Fonts without feet
are called sans serif.
Helvetica

32. Fonts with a smaller x-height
could be considered more formal.
Bernhard Modern

33. Contrast adds interest.
A serif font for headlines along with a sans serif font
for body copy is a successful combination. The
reverse is also effective. When choosing your serif
and your sans serif faces, keep the x-height of each
font in mind. Do they complement each other?

34. Similarity looks like a mistake.
Are these two font combinations as effective as the
previous screen? Probably not. The two serif fonts have
different characteristics and drastically different x-heights
and ascender heights. The two faces conflict with, rather
than complement, each other.

35. leading

36. leading
image: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg

37. Letterpair kerning

38. the truck I could drive through
those unkerned letterpairs

39. TYPE TRICKS ow the rules
You gotta kn
bef ore you can b reak them.
Bu t you might n ot want to.

40. the vertically centered optical illusion

41. is is centered on the page.

42. But it looks top-heavy.

43. Balance placement to adjust
for the optical illusion.

44. hanging punctuation

45. —Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/

46. —Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/

47. —Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/

48. —Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/

49. line length

50. Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is
because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be
difficult to continue from the correct line in large blocks of text.
Approx. 110 characters per line
source: http://baymard.com/blog/line-length-readability

51. Too short – if a line is too
short the eye will have to
travel back too often,
breaking the reader’s
rhythm. Too short lines also
tend to stress people,
making them begin on the
next line before finishing the
current one (hence skipping
potentially important words).
Approx. 30 characters per line
source: http://baymard.com/blog/line-length-readability

52. TOO LONG
If a line of text is too long the visitor’s eye will have a hard
time focusing on the text. This is because the length makes
it difficult to get an idea of where the line starts and ends.
Furthermore it can be difficult to continue from the correct
line in large blocks of text.
TOO SHORT
If a line is too short the eye will have to travel back too
often, breaking the reader’s rhythm. Too short lines also
tend to stress people, making them begin on the next line
before finishing the current one (hence skipping potentially
important words).
Just right. Approx. 60 characters per line
source: http://baymard.com/blog/line-length-readability

53. Just right. Approx. 60 characters per line

54. small caps

56. Whoa. These caps are far
heavier than the other characters.

58. The trick:
Define BOLD for your primary text,
and ROMAN for your small caps.

59. uppercase vs. lowercase

63. letterspacing

64. Tr a c k i n g o u t l o w e r c a s e t y p e
is usually not a good idea.

65. When you want users to read your
body copy, let them see shapes.

66. THESE CAPS AREN’T TRACKED OUT.

67. THESE CAPS HAVE SOME EXTRA TRACKING.

68. unlike lowercase text,
UPPERCASE TEXT READABILITY IMPROVES
when tracking is increased.

69. PAGE LAYOUT

79. and in conclusion…

80. e

81. Thank you.

82. V I S U A L + D E S I G N + S T R A T E G I S T
View

83. my

84. portfolio

85. and

86. resume

87. at

88. www.valarie.info
or

89. email

90. valarie@martinstuart.com
— M AD E W IT H K E YNOTE ON A MAC —