Web Fonts Guide | Best Practices

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.

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 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 computers.
# Oswald – A gothic style for ads and newspaper headlines.
# Ubuntu – Designed for clarity on desktop and mobile 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 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.

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 and view the entire Google web font library.

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.

Tagged as: best practices, fonts, IMS205, legibility, readability, typography