Typography 101
y po gr ap hyT     101
HISTORY    really, really condensed.
movable type               image: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
‘Gutenbergs achievement created      a new and wonderful earth      but at the same time also a new hell.                 ...
CLAUDEGaramond      1490-1561      image: http://en.wikipedia.org/wiki/Claude_Garamond
WilliamCASLON          1692-1766                      image: http://en.wikipedia.org/wiki/William_Caslon
JOHNBaskerville       1706-1775                   image: http://en.wikipedia.org/wiki/John_Baskerville
GiambattistaBODONI                    1740-1813   image: http://en.wikipedia.org/wiki/Giambattista_Bodoni
Eric GILL      1882-1947                  image: http://www.ericgill.org.uk/
SETTING TYPE                n processes    the {rela tively} moder
AYS                   to work           TH W          I walked      L BOback whenUPHIL                       b arefoot i n...
MATHimage: http://alexanderwwhite.files.wordpress.com/2011/06/1-2-3copyfitting72dpi.jpg
{really                      {    image: http://www.marksimonson.com/article/232..
<LL><PS>  Like wr iting HTMLbut not get  ting to see   what  it looks like    unt il tomorrowimage: http://ffanzeen.blogsp...
Wax machinesPaste-u p production                         images: http://commfaculty.fullerton.edu/woverbeck/dtr5.htm
Hello.  image: http://en.wikipedia.org/wiki/File:Se30.jpg
$6500   image: http://en.wikipedia.org/wiki/File:Se30.jpg
image: http://www.makingpages.org/pagemaker/history/
image: http://en.wikipedia.org/wiki/File:Original_Mac_fonts.png
image: http://www.youtube.com/watch?v=8Vj37x2jScU&trackingid=JSDWE
image: http://www.fontlab.com/font-editor/fontlab-studio/fontlab-studio-tutorials/
LETTERFORMS
Type is funbaseline
Type is fun   x-height
cap height         Type is fun
ascender heightType is fun
Type is fundescender height
Tall x-heights can make typefriendlier and easier to read…                       PT Sans
…even when your fonts have feet. Fonts with feet are called serif.                         Georgia
Fonts without feetare called sans serif.                   Helvetica
Fonts with a smaller x-heightcould be considered more formal.                         Bernhard Modern
Contrast adds interest.A serif font for headlines along with a sans serif fontfor body copy is a successful combination. T...
Similarity looks like a mistake.Are these two font combinations as effective as theprevious screen? Probably not. The two ...
leading
leadingimage: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
Letterpair kerning
the truck I could drive throughthose unkerned letterpairs
TYPE TRICKS         ow the rules       You gotta kn      bef ore you can b reak them.      Bu t you might n ot want to.
the vertically centered optical illusion
is is centered on the page.
But it looks top-heavy.
Balance placement to adjust  for the optical illusion.
hanging punctuation
—Charles Mingus    source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
—Charles Mingus    source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
—Charles Mingus    source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
—Charles Mingus    source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
line length
Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This isbecause the ...
Too short – if a line is tooshort the eye will have totravel back too often,breaking the reader’srhythm. Too short lines a...
TOO LONGIf a line of text is too long the visitor’s eye will have a hardtime focusing on the text. This is because the len...
Just right. Approx. 60 characters per line
small caps
Whoa. These caps are farheavier than the other characters.
The trick:Define BOLD for your primary text,and ROMAN for your small caps.
uppercase vs. lowercase
letterspacing
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.
When you want users to read your body copy, let them see shapes.
THESE CAPS AREN’T TRACKED OUT.
THESE CAPS HAVE SOME EXTRA TRACKING.
unlike lowercase text,UPPERCASE TEXT READABILITY IMPROVES       when tracking is increased.
PAGE LAYOUT
and in conclusion…
e
Thank you.
V I S U A L + D E S I G N + S T R A T E G I S TView
 my
 portfolio
 and
 resume
 at
 www.valarie.info                                        or
 email
 valarie@martinstuart.com                                                   —         M AD E                   W IT H     ...
Typography101 092012
Typography101 092012
Typography101 092012
Typography101 092012
Typography101 092012
Typography101 092012
Upcoming SlideShare
Loading in …5
×

Typography101 092012

1,306 views

Published on

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

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,306
On SlideShare
0
From Embeds
0
Number of Embeds
108
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Typography101 092012

  1. 1. Typography 101
  2. 2. y po gr ap hyT 101
  3. 3. HISTORY really, really condensed.
  4. 4. movable type image: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
  5. 5. ‘Gutenbergs 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. 6. CLAUDEGaramond 1490-1561 image: http://en.wikipedia.org/wiki/Claude_Garamond
  7. 7. WilliamCASLON 1692-1766 image: http://en.wikipedia.org/wiki/William_Caslon
  8. 8. JOHNBaskerville 1706-1775 image: http://en.wikipedia.org/wiki/John_Baskerville
  9. 9. GiambattistaBODONI 1740-1813 image: http://en.wikipedia.org/wiki/Giambattista_Bodoni
  10. 10. Eric GILL 1882-1947 image: http://www.ericgill.org.uk/
  11. 11. SETTING TYPE n processes the {rela tively} moder
  12. 12. AYS to work TH W I walked L BOback whenUPHIL 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. 13. MATHimage: http://alexanderwwhite.files.wordpress.com/2011/06/1-2-3copyfitting72dpi.jpg
  14. 14. {really { image: http://www.marksimonson.com/article/232..
  15. 15. <LL><PS> Like wr iting HTMLbut not get ting to see what it looks like unt il tomorrowimage: http://ffanzeen.blogspot.com/2009/03/trading-travel-agent.html
  16. 16. Wax machinesPaste-u p production images: http://commfaculty.fullerton.edu/woverbeck/dtr5.htm
  17. 17. Hello. image: http://en.wikipedia.org/wiki/File:Se30.jpg
  18. 18. $6500 image: http://en.wikipedia.org/wiki/File:Se30.jpg
  19. 19. image: http://www.makingpages.org/pagemaker/history/
  20. 20. image: http://en.wikipedia.org/wiki/File:Original_Mac_fonts.png
  21. 21. image: http://www.youtube.com/watch?v=8Vj37x2jScU&trackingid=JSDWE
  22. 22. image: http://www.fontlab.com/font-editor/fontlab-studio/fontlab-studio-tutorials/
  23. 23. LETTERFORMS
  24. 24. Type is funbaseline
  25. 25. Type is fun x-height
  26. 26. cap height Type is fun
  27. 27. ascender heightType is fun
  28. 28. Type is fundescender height
  29. 29. Tall x-heights can make typefriendlier and easier to read… PT Sans
  30. 30. …even when your fonts have feet. Fonts with feet are called serif. Georgia
  31. 31. Fonts without feetare called sans serif. Helvetica
  32. 32. Fonts with a smaller x-heightcould be considered more formal. Bernhard Modern
  33. 33. Contrast adds interest.A serif font for headlines along with a sans serif fontfor body copy is a successful combination. Thereverse is also effective. When choosing your serifand your sans serif faces, keep the x-height of eachfont in mind. Do they complement each other?
  34. 34. Similarity looks like a mistake.Are these two font combinations as effective as theprevious screen? Probably not. The two serif fonts havedifferent characteristics and drastically different x-heightsand ascender heights. The two faces conflict with, ratherthan complement, each other.
  35. 35. leading
  36. 36. leadingimage: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
  37. 37. Letterpair kerning
  38. 38. the truck I could drive throughthose unkerned letterpairs
  39. 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. 40. the vertically centered optical illusion
  41. 41. is is centered on the page.
  42. 42. But it looks top-heavy.
  43. 43. Balance placement to adjust for the optical illusion.
  44. 44. hanging punctuation
  45. 45. —Charles Mingus source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
  46. 46. —Charles Mingus source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
  47. 47. —Charles Mingus source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
  48. 48. —Charles Mingus source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
  49. 49. line length
  50. 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 isbecause the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can bedifficult 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. 51. Too short – if a line is tooshort the eye will have totravel back too often,breaking the reader’srhythm. Too short lines alsotend to stress people,making them begin on thenext line before finishing thecurrent one (hence skippingpotentially important words). Approx. 30 characters per line source: http://baymard.com/blog/line-length-readability
  52. 52. TOO LONGIf a line of text is too long the visitor’s eye will have a hardtime focusing on the text. This is because the length makesit difficult to get an idea of where the line starts and ends.Furthermore it can be difficult to continue from the correctline in large blocks of text.TOO SHORTIf a line is too short the eye will have to travel back toooften, breaking the reader’s rhythm. Too short lines alsotend to stress people, making them begin on the next linebefore finishing the current one (hence skipping potentiallyimportant words).Just right. Approx. 60 characters per line source: http://baymard.com/blog/line-length-readability
  53. 53. Just right. Approx. 60 characters per line
  54. 54. small caps
  55. 55. Whoa. These caps are farheavier than the other characters.
  56. 56. The trick:Define BOLD for your primary text,and ROMAN for your small caps.
  57. 57. uppercase vs. lowercase
  58. 58. letterspacing
  59. 59. 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.
  60. 60. When you want users to read your body copy, let them see shapes.
  61. 61. THESE CAPS AREN’T TRACKED OUT.
  62. 62. THESE CAPS HAVE SOME EXTRA TRACKING.
  63. 63. unlike lowercase text,UPPERCASE TEXT READABILITY IMPROVES when tracking is increased.
  64. 64. PAGE LAYOUT
  65. 65. and in conclusion…
  66. 66. e
  67. 67. Thank you.
  68. 68. V I S U A L + D E S I G N + S T R A T E G I S TView
  69. 69.  my
  70. 70.  portfolio
  71. 71.  and
  72. 72.  resume
  73. 73.  at
  74. 74.  www.valarie.info or
  75. 75.  email
  76. 76.  valarie@martinstuart.com — M AD E W IT H K E YNOTE ON A MAC —

×