How To Make Your Blog Read Better
•
4 likes•5,425 views
Presented by Bram Pitoyo at Blog World Expo 2009, October 17, 2009 First presented at Beer And Blog Portland on October 10, 2008
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to How To Make Your Blog Read Better
Recently uploaded
Recently uploaded (20)
How To Make Your Blog Read Better
- 1. How to make your blog read better. BlogWorld Expo 2009
- 2. Hi. bram@brampitoyo.com
- 3. 1 What’s out there & what you should use
- 4. 1 What’s out there & what you should use 2 Steps to better legibility & readability
- 5. 1 What’s out there & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 6. But first,
- 8. Helvetica Regular is a typeface
- 9. Helvetica Regular Helvetica Oblique is a typeface
- 10. Helvetica Regular Helvetica Oblique Helvetica Bold is a typeface
- 11. Helvetica Regular Helvetica Oblique Helvetica Bold Helvetica Bold Oblique is a typeface
- 12. Helvetica is a font that contains Helvetica Regular Helvetica Oblique Helvetica Bold Helvetica Bold Oblique
- 13. Onward
- 14. 1 What’s out there & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 15. What’s out there & what you should use
- 16. What’s out there Web Core fonts
- 17. What’s out there Web Core fonts Mac
- 18. What’s out there Web Core fonts Mac PC
- 19. What’s out there Web Core fonts Mac PC Linux
- 20. Web Core fonts
- 26. Courier
- 27. Web Core fonts
- 28. Web Core fonts + ClearType font collection
- 29. Web Core fonts + ClearType font collection Windows Vista
- 30. Web Core fonts + ClearType font collection Windows Vista Windows 7
- 31. Web Core fonts + ClearType font collection Windows Vista Windows 7 Office 2007
- 32. Web Core fonts + ClearType font collection Windows Vista Windows 7 Office 2007 Office:mac 2008
- 33. Web Core fonts + ClearType font collection Windows Vista Windows 7 Office 2007 Office:mac 2008 PowerPoint 2007 Viewers (free)
- 34. Calibri
- 35. Calibri Candara
- 37. Cambria
- 39. Consolas
- 40. 1 What’s out there Web Core fonts + ClearType font collection Mac PC Linux
- 42. Helvetica(Neue)
- 45. Lucida Grande
- 48. Hoefler Text
- 51. Monaco
- 52. What’s out there Web Core fonts + ClearType font collection Mac PC Linux
- 53. Web Core fonts + ClearType font collection Mac PC Linux
- 54. Web Core fonts + Tahoma
- 56. What’s out there Web Core fonts + ClearType font collection Mac PC Linux
- 58. Sans serif Nimbus Sans L, FreeSans, Garuda, Utkal, Malayalam, Phetsarath OT, Kalimati Vera Sans, DejaVu Sans
- 59. Sans serif Nimbus Sans L, FreeSans, Garuda, Utkal, Malayalam, Phetsarath OT, Kalimati, Vera Sans, DejaVu Sans Serif Bitstream Charter, Nimbus Roman No9 L, Century Schoolbook L, Norasi, Rekha Vera Serif, DejaVu Serif
- 60. Sans serif Nimbus Sans L, FreeSans, Garuda, Utkal, Malayalam, Phetsarath OT, Kalimati, Vera Sans, DejaVu Sans Serif Bitstream Charter, Nimbus Roman No9 L, Century Schoolbook L, Norasi, Rekha Vera Serif, DejaVu Serif Monospaced FreeMono, Nimbus Mono L
- 61. 1 What’s out there Web Core fonts + ClearType font collection Mac PC Linux
- 62. 1 What’s out there, but
- 63. 1 What’s out there & what you should use
- 64. 1 What’s out there & what you should use & how you should use them
- 65. 1 What’s out there & what you should use & how you should use them Arial or Helvetica?
- 66. aa RR GG QQ
- 67. aa RR GG QQ
- 68. tt CC rr ss
- 69. tt CC rr ss
- 71. Short answer
- 72. *{ font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; }
- 73. 1 What’s out there & what you should use & how you should use them Arial or Helvetica?
- 74. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma?
- 75. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma
- 76. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()[] 1234567890 !@#$%^&*()[] the quick brown fox jumps ov the quick brown fox jumps over th
- 77. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana is highly readable at small sizes (8–11 px)
- 78. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma should be used on sizes medium (12–14 px) & large (18+ px)
- 79. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma Avoid setting at extra large sizes or printing
- 82. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma
- 83. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma?
- 84. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma? Trebuchet MS?
- 85. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma? Trebuchet MS? Lucida Grande or Lucida Sans?
- 86. “We read best what we read most.” —Zuzana Licko
- 87. ClearType anti aliasing/font smoothing
- 88. 1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma? Trebuchet MS? Lucida Grande or Lucida Sans? Gill Sans, Geneva, etc.
- 89. 1 What’s out there & what you should use & how you should use them
- 90. 1 What’s out there & what you should use & how you should use them Times New Roman?
- 93. 1 What’s out there & what you should use & how you should use them Times New Roman? It can look good, but
- 94. 1 What’s out there & what you should use & how you should use them Times New Roman? It can look good, but when in doubt, use Georgia
- 96. 1 What’s out there & what you should use & how you should use them Times New Roman? It can look good, but when in doubt, use Georgia
- 97. 1 What’s out there & what you should use & how you should use them Times New Roman? It can look good, but when in doubt, use Georgia, but be careful when printing
- 98. 1 What’s out there & what you should use & how you should use them Times New Roman or Georgia?
- 99. 1 What’s out there & what you should use & how you should use them Times New Roman or Georgia? Baskerville, Hoefler Text, Didot, etc.
- 100. Moral of the story:
- 101. Moral of the story: Expand font stack
- 102. Moral of the story: Expand font stack, but always fall back to the standard.
- 103. 1 What’s out there & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 104. 1 What’s out there & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 105. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading)
- 106. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width
- 107. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy
- 108. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 109. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading)
- 110. Generally,
- 111. body { font-size: 9–12px; line-height: 1.4–1.6; }
- 112. body { font-size: 9–12px; line-height: 1.4–1.6; }
- 113. body { font-size: 9–12px; line-height: 1.4–1.6; }
- 114. h1, h2, h3, h4, h5, h6 { font-size: 14+ px; line-height: 1–1.2; }
- 115. h1, h2, h3, h4, h5, h6 { font-size: 14+ px; line-height: 1–1.2; }
- 116. h1, h2, h3, h4, h5, h6 { font-size: 14+ px; line-height: 1–1.2; }
- 117. Generally, + font size – line height
- 118. Generally, No less than 1
- 119. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 120. Measure by letters and words, not pixel
- 121. Measure by letters and words, not pixel 50–80 character on each line
- 122. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 123. Blog Name Post Title SUBHEAD (H3, H4) Body text, emphasized text, link “Blockquote” Categories & Tags
- 124. Generally 2 fonts
- 125. Generally 2 fonts 3 base colors
- 128. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 129. A smart information A smart information consultant would be consultant would be spending most of his spending most of his hours working from hours working from various coffee shops various coffee shops around town, all the around town, all the while getting poorer while getting poorer
- 130. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type Light text on a dark background looks ‘chunkier’ than dark text on a light background.
- 131. Use it judiciously, to emphasize text
- 132. 1 What’s out there & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 133. 1 What’s out there & what you should use 2 Steps to better legibility & readability
- 134. 1 What’s out there & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 136. 3 Tips, tricks & hacks @font-face (CSS2)
- 137. 3 Tips, tricks & hacks @font-face SIFr (Flash)
- 138. 3 Tips, tricks & hacks @font-face SIFr Typekit, Cufon (JavaScript)
- 139. 3 Tips, tricks & hacks @font-face SIFr Typekit, Cufon (JavaScript) EOT
- 140. Thanks. bram@brampitoyo.com