How To Make Your Blog Read Better

HOW TO MAKE YOUR BLOG READ BETTER

1 WHAT’S OUT THERE & WHAT YOU SHOULD USE 2 STEPS TO BETTER READABILITY 3 TIPS, TRICKS & HACKS

BUT FIRST

FONT OR TYPEFACE?

GILL SANS LIGHT IS A TYPEFACE

GILL SANS LIGHT ITALIC IS A TYPEFACE

GILL SANS BOLD IS A TYPEFACE

GILL SANS BOLD ITALIC IS A TYPEFACE

BUT THE GILL SANS FAMILY LIGHT LIGHT ITALIC REGULAR ITALIC BOLD BOLD ITALIC IS A FONT

PC & MAC

USE THESE & YOU’LL ALWAYS HAVE TYPEFACES DISPLAYED THE WAY YOU WANT

SANS SERIF

PC Arial Verdana Tahoma Trebuchet Ms MAC Helvetica (Neue) Futura Lucida Grande Gill Sans Geneva Optima

LINUX Nimbus Sans L, FreeSans, Garuda, Utkal, Malayalam, Phetsarath OT, Kalimati

PC Times New Roman Georgia MAC Hoeﬂer Text Didot Baskerville Big Caslon

LINUX Bitstream Charter, Nimbus Roman No9 L, Century Schoolbook L, Norasi, Rekha Bitstream Vera Serif DejaVu Serif

MONOSPACED

PC Courier (New) MAC Monaco LINUX FreeMono Nimbus Mono L

ARIAL OR HELVETICA OR VERDANA OR TREBUCHET MS OR LUCIDA GRANDE OR GILL SANS

GG aa RRQQ

SHORT ANSWER:

*{ font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; }

SHORTER ANSWER:

SHORTER ANSWER: http://tr.im/arialhelvetica

HIGHLY READABLE AT SMALL SIZES (8–11 px.)

BUT BE CAREFUL WHEN SETTING IT LARGE (12–14 px.) AND SETTING IT EXTRA LARGE (18 px. and up)

blaaar ghh!!1

ALSO: AVOID PRINTING WHY?

IN MY OPINION: LOOKS GOOD WHEN SET LARGE

EVERY OS X ELEMENT IS SET IN LUCIDA GRANDE

“WE READ BEST WHAT WE READ MOST”

I’VE SEEN IT USED AS <h3> HEADLINES

TIMES NEW ROMAN OR GEORGIA OR HOEFLER TEXT

SURE, TIMES NEW ROMAN CAN LOOK GOOD

http://tr.im/tnr

BUT WHEN IN DOUBT, AND TO AVOID THAT STOCK MICROSOFT WORD LOOK USE GEORGIA

TIMES NEW ROMAN OR GEORGIA OR HOEFLER TEXT

I SEE IT USED THE MOST ON HEADLINES, RATHER THAN BODY COPY

FOR EXAMPLE:

MORAL OF THE STORY:

EXPERIMENT, EXTEND FONT CHOICE TO YOUR TASTE, BUT ALWAYS FALL BACK TO THE STANDARDS

RULE OF THUMBS:

LINE HEIGHT (LEADING) COLUMN WIDTH SCALE AND HIERARCHY KNOCKOUT TYPE

GENERALLY:

body { font-size: 9–12px line-height: 1.4–1.6 }

h1, h2, h3, h4, h5 { font-size: 18–20px and up line-height: 1–1.2 }

+ FONT SIZE – LINE-HEIGHT NEVER SET TO LESS THAN “1” EXCEPT WHEN YOU TYPE IN ALL CAPS

DON’T MEASURE IN PIXEL

50–80 CHARACTERS PER LINE

http://tr.im/part5

Blog Title Post Title SUBHEADING Body text Emphasized “Blockquote” Categories & Tags

http://lamb.cc/typograph/

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 coﬀee shops. or around coﬀee shops.

WHICH ONE LOOKS LIGHTER?

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 coﬀee shops. or around coﬀee shops.

COMPENSATE FOR THIS: LIGHT ON DARK TYPE LOOKS “CHUNKIER” THAN DARK ON LIGHT TYPE

http://tr.im/typography

THANKS.

How To Make Your Blog Read Better

by Bram Pitoyo on Oct 10, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 6

Statistics

How To Make Your Blog Read Better — Presentation Transcript