advertisement

How To Make Your Blog Read Better

75 %
25 %
advertisement
Information about How To Make Your Blog Read Better
Design

Published on October 11, 2008

Author: brampitoyo

Source: slideshare.net

Description

Presented by Bram Pitoyo at Blog World Expo 2009, October 17, 2009

First presented at Beer And Blog Portland on October 10, 2008
advertisement

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.

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

31 Days to Building a Better Blog - ProBlogger - Blog Tips ...

This is the central page of the 31 Days to Building a Better Blog ... 31 tasks that you can do to make your blog better. ... Reads Your Blog ...
Read more

How to Better Remember and Make Use of What You Read

Subscribe to the Zapier Blog. Subscribe. Blog Home; How to Better Remember and Make Use of What You Read. Jeremey DuVall / November 27, 2014 Tweet.
Read more

How to Be a Good Blogger: 12 Steps (with Pictures)

How to Be a Good Blogger. ... writing about your daily life can make for a good read, ... The better your posts seem the better your blog will seem. Make ...
Read more

How to Start a Blog In 20 Minutes - StartBloggingOnline.com

HOW TO START A BLOG From ... I’ll show you a better way a little ... It’s a good idea to use headers and bolding to make your content easier to read ...
Read more

4 Ways to Create a Personal Blog - wikiHow

How to Create a Personal Blog. ... are all the reasons why I'm better than you." ... to make your blog public, make sure to re-read every post and delete ...
Read more

Five Tricks to Make Your Blog Posts Look Better

Learn 5 easy ways to make your blog posts ... 5 Tricks to Make Your Blog Posts Look Better Than ... No one wants to read a blog that is so full of ...
Read more

How To Improve Your Blog Writing Skills | Elegant Themes Blog

Elegant Themes Blog ... This will tighten your article and make it easier to read. 5. ... This blog is getting better and better: ...
Read more

5 Unconventional Ways to Become a Better Writer

5 Unconventional Ways to Become a Better Writer ... If what you read makes you ... Facebook and finding titles for your blog to make your writing and ...
Read more

How to Read - Copyblogger - Content Marketing Mastery

Who needs to learn how to read? After all, we all learned how to read fairly early in life, ... Just reading other blog posts can make you a better writer.
Read more