No More Content Farming
With the Internet still being a young and relatively mysterious medium to many, most website owners so far have focused on how to build a website or social media presence and have given very little attention to format, design and in particular type faces. Of course the brainchildren at Google who are light years ahead of us mere mortals have given extensive consideration to these issues.
As a website developer with a traditional marketing and advertising background I have often wondered why tons of websites still feature fonts like Arial and Helvetica for lengthy text, while these fonts were originally designed for railway and bus station signs, not for extended reading. The type allows for fast reading as in a flash when the train or bus speeds by. But in lengthy text they make the reader go tired (without really knowing why) and leave your site.
Even though Google’s intention with Google Panda was to weed out the content farms, it has become evident that it is also going to impact your website’s ranking as a result of measuring the time spent on your website. And don’t make the mistake of thinking that fonts designed for print media and publications work the same as on a computer screen, because they don’t (in general). Reason why Google also devoted a great amount of time and attention to developing 222 web fonts which are available for download.
My friend Michael Campbell up in British Vancouver, Canada has spent a lot of time studying and comparing the best usage of fonts on a website. Following is an abbreviated version of his findings, you may want to consider if you’re looking for ranking and conversion on your website.
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.
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.
– Also 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.
Conditional 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.
* 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 and short messages exposed in a flash.
* @ 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.
* Comic Sans – A casual script made tolook like comic books.
# Architects Daughter – Inspired by technical drawing and natural handwriting.
# 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.
* 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.
* 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.
* Webdings – No letters, just decorative dingbats and symbols.
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, they’ll do just that.
Special Note: Our next Website Building Bootcamp is scheduled for the week of September 19. Maximum number of applications is 10. Drop us an email if you’re interested in learning how to build and maintain your own website in less than a week. With the economy performing less than satisfactory, you may want to start building another income opportunity on the internet.