Finding the Best Fonts for Websites
One of the key considerations for effective web design is the font type (or typeface) used throughout the website.
Good web designers will provide a library of web safe fonts for you to choose from during your web development project.
If you don't have a web designer because you are trying to create your own website, then you need to follow some simple rules about fonts for your website:
Rule #1: Do not mix fonts - If you have chosen Verdana for example (the same font as this website), do not suddenly change the font type for your main content areas.
However, it may be acceptable to add another font for content you wish to emphasize (this text is Trebuchet)
Rule #2: Design for Mobiles and Tablets - Take into consideration that a percentage of visitors will view and interact with your website using a mobile smartphone or tablet device.
The viewing areas on these devices is quite small so elaborate fonts may not work as well as on a computer or laptop display.
Rule #3: Web and Print - If you decide to purchase a premium font and invest in the font as part of your brand identity, you should ensure the font license includes full usage for both web and print.
The following are the best fonts for websites and considered "safe" (i.e. viewable on all internet browsers). These fonts are safe to use because they are installed as part of the browser software:
* these web fonts are safe for mobile based browsers (e.g. Android, iPhone, Blackberry)
You may think web safe fonts limit the creativity and branding you would naturally wish to achieve with your web design. So how nice would it be to have ANY FONT you want ? Imagine choosing from a directory of best fonts for websites.
Once you find a font you'd like to use, there are two options for using the font on your website:
Font Embedding - Cascading Style Sheets (CSS) control the styling of content on your website. With font embedding and CSS you can use any font that is available on your web server (uploading a font file is easy!).
To use the font, your designer invokes a "CSS rule" called @font-face and specifies the location of the font file on your web server.
An example CSS style looks like this:
Does the CSS above look gibberish to you? Read my CSS Basics to learn more.
Fonts via Web Service - If you don't want to or are unable to install a font file on your web server, there are some web services available that will essentially translate the content of your website into a selected font.
But, there are some performance considerations you need to understand since your website will essentially be making "requests" to the font web service to provision the typography.
Best Fonts for Websites Review (Google Fonts) : 5 / 5 Stars
Google offers over 600 fonts for FREE (as of Dec 29th 2012). These fonts are provided as a Web Service so web page loading will be impacted by the font(s) you choose.
Google offers a simple user interface to find fonts (filters for "slant", "thickness", "popularity" etc.) and easy to understand advice for using the fonts on your website and web pages.
Here are two of my favourite fonts from Google's font directory (Permanent Marker and Stalemate):
Example Text Using Google's Permanent Marker
Example Text Using Google's Stalemate
Best Fonts for Websites Review (Adobe Edge Fonts) : 4 / 5 Stars
The Google library provides a more extensive resource for free fonts and edges Adobe by one review star
Edge web fonts, created by Adobe are provided as a FREE web service.
Adobe also offers premium fonts library and web service called TypeKit.
The Edge web fonts will also be available as part of Adobe's Creative Cloud membership.
Here are two of my favourite fonts from Adobe's Edge font directory (Chunk and Hobo):
This is example text using Adobe's Chunk
This is example text using Adobe's Hobo
Best Fonts for Websites Review (TypeKit Fonts) : 4 / 5 Stars
The Google library provides a more extensive resource for free fonts and once again Adobe is outranked by one review star
Typekit was acquired by Adobe in 2011. Prior to the acquisition, the TypeKit team were building a solid library of web fonts.
There are currently over 800 fonts available within their font library.
There are over 230 FREE fonts that represent approximately 25% of the library.
Here are two of my favourite fonts from TypeKit (English and Postino):
This is example text using English
This is example text using Postino
There are thousands of fonts available to use for website typography. Thankfully the "old" days of limited web safe fonts (Arial, Courier, Sans Serif etc.) are over.
But now we have a different problem-- too much choice!
Tell us your favourite font, it's fun to share.
Click below to see contributions from other visitors to this page...
I'm happy to share my 12 Tips for Creating the Best Business Website as a free gift. And I do mean 'free' - there's no strings attached - not even a request for your name and email address!
If you need help, advice, a friendly push in the right direction, to rant or rave about a product or service ... please don't be shy about contacting me. Perhaps I can help you achieve your business goals.
You can do it ...
Feedback is important: If you think this content was useful to you, feel free to LIKE and Share with friends, colleagues and family members.