How to make your blog read better.BlogWorld Expo 2009

bram@brampitoyo.comHi.

1 What’s out there & what you should use

1 What’s out there & what you should use2 Steps to better legibility & readability

1 What’s out there & what you should use2 Steps to better legibility & readability3 Tips, tricks & hacks

But first,

Font or Typeface?

Helvetica Regular is a typeface

Helvetica RegularHelvetica Oblique is a typeface

Helvetica RegularHelvetica ObliqueHelvetica Bold is a typeface

Helvetica RegularHelvetica ObliqueHelvetica BoldHelvetica Bold Oblique is a typeface

Helvetica is a font that containsHelvetica RegularHelvetica ObliqueHelvetica BoldHelvetica Bold Oblique

Onward

1 What’s out there & what you should use2 Steps to better legibility & readability3 Tips, tricks & hacks

What’s out there & what you should use

What’s out there Web Core fonts

What’s out there Web Core fonts Mac

What’s out there Web Core fonts Mac PC

What’s out there Web Core fonts Mac PC Linux

Web Core fonts

Arial VerdanaTrebuchet MS

Arial VerdanaTrebuchet MS

Arial VerdanaTrebuchet MS

Times New Roman Georgia

Times New Roman Georgia

Courier

Web Core fonts

Web Core fonts + ClearType font collection

Web Core fonts + ClearType font collectionWindows Vista

Web Core fonts + ClearType font collectionWindows VistaWindows 7

Web Core fonts + ClearType font collectionWindows VistaWindows 7Office 2007

Web Core fonts + ClearType font collectionWindows VistaWindows 7Office 2007Office:mac 2008

Web Core fonts + ClearType font collectionWindows VistaWindows 7Office 2007Office:mac 2008PowerPoint 2007 Viewers (free)

Calibri

Calibri  Candara

Calibri  CandaraCorbel

Cambria

CambriaConstantia

Consolas

1 What’s out there Web Core fonts + ClearType font collection Mac PC Linux

Web Core fonts Mac PC Linux

Helvetica(Neue)

Helvetica(Neue)Futura

Helvetica(Neue)Futura Geneva

Lucida Grande

Lucida GrandeGillSans

Lucida GrandeGillSans Optima

Hoefler Text

Hoefler TextDidot

Hoefler TextDidot Baskerville

Monaco

What’s out there Web Core fonts + ClearType font collection Mac PC Linux

Web Core fonts + ClearType font collection Mac PC Linux

Web Core fonts +

Tahoma

Tahoma a better Verdana

What’s out there Web Core fonts + ClearType font collection Mac PC Linux

Sans serif Nimbus Sans L, FreeSans, Garuda, Utkal, Malayalam, Phetsarath OT, Kalimati Vera Sans, DejaVu Sans

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

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

1 What’s out there Web Core fonts + ClearType font collection Mac PC Linux

1 What’s out there, but

1 What’s out there & what you should use

1 What’s out there & what you should use & how you should use them

1 What’s out there & what you should use & how you should use them Arial or Helvetica?

aa RRGG QQ

aa RRGG QQ

tt CCrr ss

tt CCrr ss

http://tr.im/ArialHelvetica

Short answer

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

1 What’s out there & what you should use & how you should use them Arial or Helvetica?

1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma?

1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

1234567890 !@#$%^&*()[]1234567890 !@#$%^&*()[]

the quick brown fox jumps ovthe quick brown fox jumps over th

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)

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)

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

1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma

1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma?

1 What’s out there & what you should use & how you should use them Arial or Helvetica? Verdana or Tahoma? Trebuchet MS?

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?

“We read best what we read most.”—Zuzana Licko

ClearType anti aliasing/font smoothing

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.

1 What’s out there & what you should use & how you should use them

1 What’s out there & what you should use & how you should use them Times New Roman?

1 What’s out there & what you should use & how you should use them Times New Roman? It can look good, but

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

Avoid‘stock’ Microsoft look.

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

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

1 What’s out there & what you should use & how you should use them Times New Roman or Georgia?

1 What’s out there & what you should use & how you should use them Times New Roman or Georgia? Baskerville, Hoefler Text, Didot, etc.

Moral of the story:

Moral of the story:Expand font stack

Moral of the story:Expand font stack, but always fall back to the standard.

1 What’s out there & what you should use2 Steps to better legibility & readability3 Tips, tricks & hacks

1 What’s out there & what you should use2 Steps to better legibility & readability3 Tips, tricks & hacks

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading)

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading)

Generally,

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

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

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

h1, h2, h3, h4, h5, h6 { font-size: 14+ px; line-height: 1–1.2; }

h1, h2, h3, h4, h5, h6 { font-size: 14+ px; line-height: 1–1.2; }

h1, h2, h3, h4, h5, h6 { font-size: 14+ px; line-height: 1–1.2; }

Generally,

+ font size– line height

Generally,

No less than 1

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type

Measure by letters and words, not pixel

Measure by letters and words, not pixel

50–80 characteron each line

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type

Blog Name Post Title SUBHEAD (H3, H4) Body text, emphasized text, link“Blockquote” Categories & Tags

Generally

2 fonts

Generally

2 fonts3 base colors

Generally

enough sizedifferentiation

http://tr.im/part5http://lamb.cc/typograph

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type

A smart information consultant would be spending most of his hours working from various coffee shops around town, all the while getting poorer

A smart information consultant would be spending most of his hours working from various coffee shops around town, all the while getting poorer

1 What’s out there & what you should use2 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.

Use it judiciously, to emphasize text

1 What’s out there & what you should use2 Steps to better legibility & readability Line height (leading) Column width Scale & hierarchy Knockout type

1 What’s out there & what you should use2 Steps to better legibility & readability

1 What’s out there & what you should use2 Steps to better legibility & readability3 Tips, tricks & hacks

http://tr.im/typography

3 Tips, tricks & hacks @font-face (CSS2)

3 Tips, tricks & hacks @font-face SIFr (Flash)

3 Tips, tricks & hacks @font-face SIFr Typekit, Cufon (JavaScript)

3 Tips, tricks & hacks @font-face SIFr Typekit, Cufon (JavaScript) EOT

Thanks. bram@brampitoyo.com