How To Make Your Blog Read Better

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    How To Make Your Blog Read Better - Presentation Transcript

    1. HOW TO MAKE YOUR BLOG READ BETTER
    2. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    3. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    4. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    5. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    6. BUT FIRST
    7. FONT OR TYPEFACE?
    8. GILL SANS LIGHT IS A TYPEFACE
    9. GILL SANS LIGHT ITALIC IS A TYPEFACE
    10. GILL SANS BOLD IS A TYPEFACE
    11. GILL SANS BOLD ITALIC IS A TYPEFACE
    12. BUT THE GILL SANS FAMILY LIGHT LIGHT ITALIC REGULAR ITALIC BOLD BOLD ITALIC IS A FONT
    13. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    14. PC & MAC
    15. USE THESE & YOU’LL ALWAYS HAVE TYPEFACES DISPLAYED THE WAY YOU WANT
    16. SANS SERIF
    17. PC Arial Verdana Tahoma Trebuchet Ms MAC Helvetica (Neue) Futura Lucida Grande Gill Sans Geneva Optima
    18. LINUX Nimbus Sans L, FreeSans, Garuda, Utkal, Malayalam, Phetsarath OT, Kalimati
    19. SERIF
    20. PC Times New Roman Georgia MAC Hoefler Text Didot Baskerville Big Caslon
    21. LINUX Bitstream Charter, Nimbus Roman No9 L, Century Schoolbook L, Norasi, Rekha Bitstream Vera Serif DejaVu Serif
    22. MONOSPACED
    23. PC Courier (New) MAC Monaco LINUX FreeMono Nimbus Mono L
    24. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    25. BUT
    26. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    27. ARIAL OR HELVETICA OR VERDANA OR TREBUCHET MS OR LUCIDA GRANDE OR GILL SANS
    28. GG aa RRQQ
    29. SHORT ANSWER:
    30. *{ font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; }
    31. SHORTER ANSWER:
    32. SHORTER ANSWER: http://tr.im/arialhelvetica
    33. ARIAL OR HELVETICA OR VERDANA OR TREBUCHET MS OR LUCIDA GRANDE OR GILL SANS
    34. HIGHLY READABLE AT SMALL SIZES (8–11 px.)
    35. BUT BE CAREFUL WHEN SETTING IT LARGE (12–14 px.) AND SETTING IT EXTRA LARGE (18 px. and up)
    36. blaaar ghh!!1
    37. ALSO: AVOID PRINTING WHY?
    38. ARIAL OR HELVETICA OR VERDANA OR TREBUCHET MS OR LUCIDA GRANDE OR GILL SANS
    39. IN MY OPINION: LOOKS GOOD WHEN SET LARGE
    40. ARIAL OR HELVETICA OR VERDANA OR TREBUCHET MS OR LUCIDA GRANDE OR GILL SANS
    41. EVERY OS X ELEMENT IS SET IN LUCIDA GRANDE
    42. “WE READ BEST WHAT WE READ MOST”
    43. ARIAL OR HELVETICA OR VERDANA OR TREBUCHET MS OR LUCIDA GRANDE OR GILL SANS
    44. I’VE SEEN IT USED AS <h3> HEADLINES
    45. TIMES NEW ROMAN OR GEORGIA OR HOEFLER TEXT
    46. SURE, TIMES NEW ROMAN CAN LOOK GOOD
    47. http://tr.im/tnr
    48. BUT WHEN IN DOUBT, AND TO AVOID THAT STOCK MICROSOFT WORD LOOK USE GEORGIA
    49. TIMES NEW ROMAN OR GEORGIA OR HOEFLER TEXT
    50. I SEE IT USED THE MOST ON HEADLINES, RATHER THAN BODY COPY
    51. FOR EXAMPLE:
    52. MORAL OF THE STORY:
    53. EXPERIMENT, EXTEND FONT CHOICE TO YOUR TASTE, BUT ALWAYS FALL BACK TO THE STANDARDS
    54. EXPERIMENT, EXTEND FONT CHOICE TO YOUR TASTE, BUT ALWAYS FALL BACK TO THE STANDARDS
    55. EXPERIMENT, EXTEND FONT CHOICE TO YOUR TASTE, BUT ALWAYS FALL BACK TO THE STANDARDS
    56. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    57. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    58. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    59. RULE OF THUMBS:
    60. LINE HEIGHT (LEADING) COLUMN WIDTH SCALE AND HIERARCHY KNOCKOUT TYPE
    61. GENERALLY:
    62. body { font-size: 9–12px line-height: 1.4–1.6 }
    63. h1, h2, h3, h4, h5 { font-size: 18–20px and up line-height: 1–1.2 }
    64. + FONT SIZE – LINE-HEIGHT NEVER SET TO LESS THAN “1” EXCEPT WHEN YOU TYPE IN ALL CAPS
    65. + FONT SIZE – LINE-HEIGHT NEVER SET TO LESS THAN “1” EXCEPT WHEN YOU TYPE IN ALL CAPS
    66. LINE HEIGHT (LEADING) COLUMN WIDTH SCALE AND HIERARCHY KNOCKOUT TYPE
    67. DON’T MEASURE IN PIXEL
    68. 50–80 CHARACTERS PER LINE
    69. LINE HEIGHT (LEADING) COLUMN WIDTH SCALE AND HIERARCHY KNOCKOUT TYPE
    70. http://tr.im/part5
    71. Blog Title Post Title SUBHEADING Body text Emphasized “Blockquote” Categories & Tags
    72. http://lamb.cc/typograph/
    73. LINE HEIGHT (LEADING) COLUMN WIDTH SCALE AND HIERARCHY KNOCKOUT TYPE
    74. As a freelance designer As a freelance designer turned-brand strategist turned-brand strategist turned-hacker-turned turned-hacker-turned community manager, I community manager, I spent most of my times spent most of my times working either at home working either at home or around coffee shops. or around coffee shops.
    75. WHICH ONE LOOKS LIGHTER?
    76. As a freelance designer As a freelance designer turned-brand strategist turned-brand strategist turned-hacker-turned turned-hacker-turned community manager, I community manager, I spent most of my times spent most of my times working either at home working either at home or around coffee shops. or around coffee shops.
    77. COMPENSATE FOR THIS: LIGHT ON DARK TYPE LOOKS “CHUNKIER” THAN DARK ON LIGHT TYPE
    78. 1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS
    79. http://tr.im/typography
    80. THANKS.

    + Bram PitoyoBram Pitoyo, 2 years ago

    custom

    2937 views, 3 favs, 0 embeds more stats

    Presented by Bram Pitoyo at Blog World Expo 2009, O more

    More info about this document

    CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

    Go to text version

    • Total Views 2937
      • 2937 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 28
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories