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

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

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

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

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

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

SERIF

PC
Times New Roman Georgia
MAC
Hoefler 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

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

BUT

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

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

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

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?

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

IN MY OPINION:
LOOKS GOOD WHEN SET LARGE

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

EVERY OS X ELEMENT IS
SET IN LUCIDA GRANDE

“WE READ BEST WHAT
WE READ MOST”

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

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

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

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

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

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

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

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

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

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

DON’T MEASURE IN PIXEL

50–80 CHARACTERS PER LINE

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

http://tr.im/part5

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

http://lamb.cc/typograph/

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

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.

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 coffee shops. or around coffee shops.

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

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

http://tr.im/typography

THANKS.