Downloaded 46 times
![abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%^&*()[]
1234567890 !@#$%^&*()[]
the quick brown fox jumps ov
the quick brown fox jumps over th](https://image.slidesharecdn.com/howtomakeyourblogreadbetter-1223690500424022-8/75/How-To-Make-Your-Blog-Read-Better-76-2048.jpg)
Uploaded byBram Pitoyo
How To Make Your Blog Read Better
This document provides guidelines for enhancing blog readability and legibility through font selection, typesetting, and layout techniques. It discusses various typefaces, their appropriate uses based on size, and the importance of line height and column width. Additionally, it offers tips on font pairing and color contrast to improve the overall reading experience.
More Related Content
Similar to How To Make Your Blog Read Better
![Things I Know About Type [Field Guide]](https://cdn.slidesharecdn.com/ss_thumbnails/thingsiknowabouttype-fieldguide-121030022134-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185324-b2fb71b4-thumbnail.jpg?width=640&height=640&fit=bounds)
![Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207184836-1d16ba16-thumbnail.jpg?width=640&height=640&fit=bounds)
![WinRAR Crack 7.13 Final Mac Keygen 2026 Download [Latest] Software.pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185858-eb450678-thumbnail.jpg?width=640&height=640&fit=bounds)
![iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207191544-22b737dc-thumbnail.jpg?width=640&height=640&fit=bounds)
![Moho Pro 14.4 Crack for MacOS Works Until 2050 [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207192639-797289c4-thumbnail.jpg?width=640&height=640&fit=bounds)
![AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207190907-2316965f-thumbnail.jpg?width=640&height=640&fit=bounds)
How To Make Your Blog Read Better
- 1. How to makeyour blog read better. BlogWorld Expo 2009
- 2. Hi. bram@brampitoyo.com
- 3. 1 What’s outthere & what you should use
- 4. 1 What’s outthere & what you should use 2 Steps to better legibility & readability
- 5. 1 What’s outthere & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 6.
- 7.
- 8. Helvetica Regular isa typeface
- 9. Helvetica Regular Helvetica Obliqueis a typeface
- 10. Helvetica Regular Helvetica Oblique HelveticaBold is a typeface
- 11. Helvetica Regular Helvetica Oblique HelveticaBold Helvetica Bold Oblique is a typeface
- 12. Helvetica is afont that contains Helvetica Regular Helvetica Oblique Helvetica Bold Helvetica Bold Oblique
- 13.
- 14. 1 What’s outthere & 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.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 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.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. 1 What’s outthere Web Core fonts + ClearType font collection Mac PC Linux
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 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
- 55.
- 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 outthere Web Core fonts + ClearType font collection Mac PC Linux
- 62. 1 What’s outthere, but
- 63. 1 What’s outthere & what you should use
- 64. 1 What’s outthere & what you should use & how you should use them
- 65. 1 What’s outthere & what you should use & how you should use them Arial or Helvetica?
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72. *{ font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; }
- 73. 1 What’s outthere & what you should use & how you should use them Arial or Helvetica?
- 74. 1 What’s outthere & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma?
- 75. 1 What’s outthere & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma
- 76. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()[] 1234567890 !@#$%^&*()[] thequick brown fox jumps ov the quick brown fox jumps over th
- 77. 1 What’s outthere & 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 outthere & 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 outthere & 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 outthere & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma
- 83. 1 What’s outthere & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma?
- 84. 1 What’s outthere & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma? Trebuchet MS?
- 85. 1 What’s outthere & 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 bestwhat we read most.” —Zuzana Licko
- 87. ClearType anti aliasing/fontsmoothing
- 88. 1 What’s outthere & 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 outthere & what you should use & how you should use them
- 90. 1 What’s outthere & what you should use & how you should use them Times New Roman?
- 93. 1 What’s outthere & what you should use & how you should use them Times New Roman? It can look good, but
- 94. 1 What’s outthere & what you should use & how you should use them Times New Roman? It can look good, but when in doubt, use Georgia
- 95.
- 96. 1 What’s outthere & 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 outthere & 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 outthere & what you should use & how you should use them Times New Roman or Georgia?
- 99. 1 What’s outthere & what you should use & how you should use them Times New Roman or Georgia? Baskerville, Hoefler Text, Didot, etc.
- 100. Moral of thestory:
- 101. Moral of thestory: Expand font stack
- 102. Moral of thestory: Expand font stack, but always fall back to the standard.
- 103. 1 What’s outthere & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 104. 1 What’s outthere & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 105. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading)
- 106. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading) Column width
- 107. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy
- 108. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 109. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading)
- 110.
- 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.
- 119. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 120. Measure by lettersand words, not pixel
- 121. Measure by lettersand words, not pixel 50–80 character on each line
- 122. 1 What’s outthere & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 123. Blog Name PostTitle SUBHEAD (H3, H4) Body text, emphasized text, link “Blockquote” Categories & Tags
- 124.
- 125. Generally 2 fonts 3 basecolors
- 126.
- 127.
- 128. 1 What’s outthere & 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 outthere & 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 outthere & what you should use 2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type
- 133. 1 What’s outthere & what you should use 2 Steps to better legibility & readability
- 134. 1 What’s outthere & what you should use 2 Steps to better legibility & readability 3 Tips, tricks & hacks
- 135.
- 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