Websites with Excellent Font Usage and Guidelines for Your Site

by in Design on 12th Jul 2012 · Comments

Designing a website involves making a lot of choices.  Picking a domain host, finding the right color scheme, not to mention filling up all that empty space with the right content. Selecting the right fonts for your website is another one of these important decisions. But fear not! These professional pointers and principles will match your website with the right fonts in no time.

Websites with Excellent Font Usage and Guidelines for Your Site

Websites with Excellent Font Usage and Guidelines for Your Site

Keep it readable!

It’s easy to get caught up in the thousands of creative fonts available online, but don’t lose sight of your basic goal: to get people reading your website. If they can’t read it, they won’t. I recommend testing the title first, instead of the body, to see if the font is readable. If it’s not readable as a title, it certainly won’t be in the body.

Don’t try to be original

Keep your originality efforts focused on your products and content. There’s a reason you see so much Arial, Calibri, and Helvetica on the web: because they’re good (and extremely readable!). This is a place where it’s okay not to stand out. Ever hear anybody complain that the New York Times wasn’t creative enough with its fonts?  (It uses Georgia, Arial, and Helvetica.)

New York Times

Use wild fonts sparingly

Less readable but more aesthetically pleasing fonts can still find a home on your website. If there is a font that you not only love but feel like it embodies the spirit of your website, consider using it for the title.
 
Compare Fashionista with Not Derby Pie. Both use fluid, cursive-type letters, but Fashionista’s has the look of a thread – perfect for a website about clothing – while Not Derby Pie’s looks more homemade, just like the food the website is about.

Fashionista

Not Derby Pie

Go with your gut!

Another downside to having access to so many options is that it makes it harder to listen to your instincts. Don’t over-think what you like. Trust yourself. If you’re having trouble choosing between a few options, make side-by-side comparisons with the same content.

Mix your fonts wisely

It should go without saying that you need to use multiple fonts on your website. But use caution! Using too many fonts is far worse than too few. Mixing and matching your fonts is not a scientific endeavor, it’s a creative one. What do you think looks good together? Ask yourself: Are they too different? Not different enough? Do they have the same vibe? 

See Simon Collison’s website for an example of well paired fonts.

Colly

Size does matter!

The size of your titles conveys their importance in a hierarchical order. Don’t try to get fancy here. The more important something is, or the larger the category, the bigger the title should be.
 
The top bar on the GOOD website embodies this principle: the magazine title is the biggest, the sections are smaller, and the sub-sections are the smallest. It makes so much sense, you wouldn’t notice it unless it was wrong.

GOOD

Some Great Inspiration

Here are some more beautifully “fonted” websites for your perusal:

Viget
Viget mixes an artistic cursive font for its central logo with sharper edged fonts for the content.

Viget

The Morning News
The Morning News not only uses size as a marker of category, but mixes up the fonts and colors of its stories' headlines without detracting focus from the content.

The Morning News

The New Yorker
By bringing its iconic magazine cover font to the website, The New Yorker keeps it professional by mixing it with a classic, news-worthy serif font.

The New Yorker

Black Estate
The website for New Zealand wine company Black Estate is a great example of readability, mixing font size and color, and web design in general.

Black Estate

What A Lovely Name
What A Lovely Name is also a lovely use of simple fonts without looking boring.

What A Lovely Name

I Love Typography
It can’t be a surprise that I Love Typography also uses font beautifully and effectively. The fonts are less common variants on classics that are fitting for the site without being distracting.

I Love Typography

FontShop
FontShop isn’t just a great place to see good “fonting” in action, it’s also a place to get some fonts for your own websites!

FontShop

AnaMajik
This is a great example of mixing fonts. The fonts are also well-suited to the content.

AnaMajik

Tommy
As a digital creative agency, Tommy needed a great website. They use fonts that are classic, but mix up the colors and size to keep everything looking fresh and new.

Tommy

La Wine Agency
La Wine Agency also uses a mix of color and size to make old fonts feel new.

La wine Agency

Free Font Sites

Looking for some free fonts? Check out these sites:

Conclusion

The most important thing to remember when choosing your fonts, their sizes, colors, and positions, is to make sure that they don’t steal the spotlight. When fonts are skillfully used, they shouldn’t be noticed at all, except by those trying to analyze your excellent font usage!

Erik Visage lives in Chicago and works in the world of custom t-shirt design and printing. He's interested in all things design and pays particularly close attention to fonts when he's surfing the web.