IMS #205 - August 05 2011
How to Make Your Type Sticky
Peter,
With the advent of Google's Panda filter,
time spent on site is a major factor. If
the majority of people don't stay on your
site for at least 57 seconds (the national
average), you could be penalized.
The overall user experience, how
aesthetically pleasing the page is, and
how engaging the content is, are all
major factors. But what if you're doing
something by accident, that's driving
visitors away?
For example, you might be using a
font like Arial for your text, which was
designed for railway and bus station
signs. The reader gets tired and clicks
off. They don't know why your site made
them tired, but it's because the font
wasn't designed for reading.
So in order to improve the time spent
on site, and not drive people away by
accident, I've written this "Web Fonts
Guide" to help make your type sticky
and keep readers longer.
Introduction to Fonts
Fonts come in several categories like
serif, sans serif, script, ornamental,
monospaced, symbols and more. You
can start your journey learning about
typography by looking in Wikipedia.
http://en.wikipedia.org/wiki/Typeface
Traditional Font Usage
Serif fonts like Times New Roman have
little extensions on the ends of their
strokes. This makes them easier to read
in print and in long passages of text.
Sans serif fonts - meaning without serifs
- like Arial and Helvetica were designed
for signage. This makes them easy to read
at a distance, or while traveling at high
speed on a train.
Some modern sans serif fonts - like
Verdana, which is classified as humanist -
are more legible than the old ones. They
can be used for both headlines and text.
Script fonts like Comic Sans mimic
calligraphy and hand writing. They are
best suited to headlines, logos and
greeting cards.
Ornamental fonts are highly decorative.
They are usually used to create themes for
posters, parties, invitations and logos.
Monospaced fonts like Courier mimic old
typewriters. They are not widely used
anymore except in programming, or coding,
as they are difficult to read on screen.
Symbols like Webdings are made up of
graphic symbols. They can be used to dress
up a page with simple graphic elements.
Design for the Computer Screen
Traditionally serif fonts were used for
lengthy text passages. Sans serif fonts
were used for headlines. Most magazines,
books and print publications are still
designed this way.
Our focus though, is on the computer
screen, not print. We want people to stay
on our websites as long as possible.
That means clean, simple, design and
layouts. It also means choosing fonts for
readability and legibility, in addition to
how they look.
Fonts like Times, Arial, Helvetica and
Courier were designed for print. They can
be used for headlines, but best avoided
for text on the computer screen, because
they tire the eyes quickly.
Fonts like Impact and Comic Sans have
special uses. For example, Impact works
for slide shows when you want to make a
point. Comic Sans and other cursives mimic
hand writing, so they work for signatures
and greeting cards.
Some fonts like Georgia, Verdana and
Trebuchet were designed specifically for
the computer screen. Any of them would
make an excellent choice for use on your
websites. The easier it is on the reader,
the longer they'll stay.
Readability Do's and Don'ts
Don't use more than three fonts on any
one website as a general rule. Choose
one font for text and links. A second for
headlines, subheads and everything
else. If you do need a third, use it for
testimonials, pull quotes, call outs, or
captions near photos.
Your website design - as a general rule -
shouldn't have more than three or four
colors. It's the same with text. You want
to minimize the use of colored text.
When you do use colored text, make it
match the color harmony of the rest of
your site. For example, you could make
the headlines and post titles match the
background color of your site.
Some colors like red, should be used
sparingly, or avoided altogether. If you
need to draw attention to certain areas
of your site, consider using bold or italic
versions of the font, instead of adding
more colors.
Avoid putting light text on dark, or black
backgrounds. It can be used for effect,
but not for any length of text, because it
tends to sparkle, hurt the eyes, and tire
the reader quickly.
Keep in mind that people with glasses and
older readers, may have a hard time with
small font sizes. Whereas 12 point might
be good in print, consider using 16 pixels
or larger for screen text.
Avoid double spacing after periods.
It's an old habit, carried over from the
typewriter days and mono spaced fonts like
Courier. All serif and sans serif fonts
are proportionally spaced and do not need
a double space after the period.
Never use ALL CAPITAL letters, as it makes
the text 10 times harder to read. The only
time all caps should be used, is in certain
legal passages, where you want the reader
to slow down, and read every word
very carefully.
Be sure to use headlines to help guide
the eye. They break the text into logical
chunks and act as teasers, pulling the
reader into different sections of the
story. It also helps improve your on
page SEO.
Choose a text font with plenty of line
spacing between the lines (aka leading).
You want the reader to be comfortable,
which means they'll stay on your site
a lot longer.
Never justify, or hyphenate your text.
It's a bad habit that's been carried over
from the metal typesetting days. Always
use a ragged right edge, as it's proven to
help readability.
My Top Picks for Web Fonts
* Indicates a core font for the web. These
fonts are stored locally on your computer.
They are called up by your web browser
when viewing a web page that uses them.
# Indicates a Google web font. These fonts
are stored on Google. They get sent by
Google's servers, when viewing a web page
that uses them.
@ Indicates a best choice for web design.
Serif Fonts
* Times New Roman - For newspapers and
economy of space.
* @ Georgia - Designed for text clarity on
computer monitors.
# EB Garamond - A famous design for books
and readability in print.
# @ Quattrocento - Classic and elegant,
it's very legible for body text.
# Droid Serif - Slightly condensed,
designed for comfortable screen reading.
# Cardo - An elegant old style text font
based on classic literature.
Sans Serif Fonts
* Arial - Very similar to Helvetica. Good
for signage.
* Arial Black - A bold, extended version
of Arial.
* @ Trebuchet MS - A humanist sans serif
made for web design.
* @ Verdana - Humanist sans serif designed
for clarity on the computer screen.
# Oswald - A gothic style for
advertisements and newspaper headlines.
# Ubuntu - Designed for clarity on desktop
and mobile computing screens.
# Cabin - A humanist sans serif based on
the Gill Sans font.
# Droid Sans - Optimized for user
interfaces and mobile handsets.
Script Fonts
* Comic Sans - A casual script made to
look like comic books.
# Architects Daughter - Inspired by
technical drawing and natural hand
writing.
# Cherry Cream Soda - Bubbly and
enthusiastic retro teen feel.
# Lobster - A thick display script for
restaurant headlines.
# Permanent Marker - Fun and whimsical
handwriting with felt pen.
# Schoolbell - Playful handwriting from a
2nd Grade student.
Ornamental Fonts
* Impact - When you want to make
slideshows and bold statements.
# Bangers - Inspired by comic books and
super heros.
# Cabin Sketch - Inspired by camping trips
and teenage doodles.
# MedievalSharp - A gothic style inspired
by stone cutting.
# Bevan - A bold slab serif display face
inspired by the old west.
# Corben - Nice looking curvy display font
for bold titles.
Monospaced Fonts
* Andale Mono - Designed for software
development but rarely used.
* Courier New - Made to look like an old
typewriter.
# Anonymous Pro - A fixed width font
designed with coding in mind.
Symbols
* Webdings - No letters, just decorative
dingbats and symbols.
References
Core Fonts for the Web
According to Wikipedia, core fonts for
the web was a project begun by Microsoft
in 1996 to make a standard pack of fonts
for the Internet. The Core fonts were
designed to:
1) Be highly legible on screen.
2) Offer a wide range of "timbres" within
a few typefaces.
3) Support extensive internationalisation.
http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
Google Web Fonts
Google Web Fonts are available through
the Google Web Fonts API. All fonts in the
directory are available for use on your
website under an open source license and
are served by Google servers.
You can learn how to add Google fonts to
your webpages here:
http://code.google.com/apis/webfonts/
You can view the entire Google web font
library here:
http://www.google.com/webfonts
Conclusion
I hope this "Web Fonts" Guide, will help
you make better decisions when choosing
type. You want to deliver maximum
comfort, legibility and readability. You
want to keep people reading, once they
land on your site. If you follow these
few simple guidelines, you'll do just that.
Wishing you all the best for success,
Michael
P.S.
Did you like the "mountain of research"
that went into this informative article?
Get hundreds of hours and more just like
it, when you join us in the Dynamic Media
Vault: http://www.dynamicmedia.com/combo/
P.P.S.
Next week I'm going to reveal something
special. It's a primer to remarketing, the
cookies that follow people around, based
on websites they've visited in the past.
It's proven to be the most powerful
marketing strategy on the planet.
The best part is, you'll discover how
easy it is to set it up, using Google and
nothing more than a Wordpress blog.
We'll chat again soon, but in the mean
time, click to the Dynamic Media Vault,
and see what you've been missing.
http://www.dynamicmedia.com/combo/
Michael Campbell, CEO
Dynamic Media Corporation
Copyright 2011 Dynamic Media Corporation
Terms: http://www.dynamicmedia.com/terms/
141-6200 MCKAY AVE, UNIT 663
BURNABY BC CANADA V5H 4M9
To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?jEwcLJy0LBycLJyMbOy0RrSMjIyMLAwMnA==
No comments:
Post a Comment