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
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.)
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.
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.
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.
Some Great Inspiration
Here are some more beautifully “fonted” websites for your perusal:
Viget mixes an artistic cursive font for its central logo with sharper edged fonts for the content.
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 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 website for New Zealand wine company Black Estate is a great example of readability, mixing font size and color, and web design in general.
What A Lovely Name
What A Lovely Name is also a lovely use of simple fonts without looking boring.
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.
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!
This is a great example of mixing fonts. The fonts are also well-suited to the content.
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.
La Wine Agency
La Wine Agency also uses a mix of color and size to make old fonts feel new.
Free Font Sites
Looking for some free fonts? Check out these sites:
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!