KnowledgeResourcesResearch

It's your business & website - It's my business to help you make it the best website!

Best Fonts for Websites

Best Fonts for Websites

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.

Web Safe Fonts for Website

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:

  • Arial/Helvetica*
  • Arial Black
  • Comic Sans MS
  • Courier/Courier New*
  • Georgia*
  • Impact
  • Times/Times New Roman*
  • Trebuchet MS*
  • Verdana*

* these web fonts are safe for mobile based browsers (e.g. Android, iPhone, Blackberry)

Extending Beyond Web Safe Fonts

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:

<style>
@font-face
{
font-family: myFont;
src: url('Premium_Light.ttf'),
     url('Premium_Light.eot'); /* IE9+ */
}
div
{font-family:myFont; }
</style>

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 - Reviews

Google Web Fonts Directory (Web Service)

FREE Web Fonts Google
Google Fonts Review | 5 out of 5 Stars

Best Fonts for Websites Review (Google Fonts) : 5 / 5 Stars

Google Web Fonts

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


Adobe Edge Web Fonts Library(Web Service)

Web Fonts by Adobe

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

Adobe Edge Web Fonts

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


TypeKit by Adobe (Web Service)

FREE Web Fonts by TypeKit

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

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

Do you have a favourite Font?

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.

[ ? ]

Upload 1-4 Pictures or Graphics (optional)[ ? ]

 

Click here to upload more images (optional)

Author Information (optional)

To receive credit as the author, enter your information below.

(first or full name)

(e.g., City, State, Country)

Submit Your Contribution

 submission guidelines.


(You can preview and edit on the next page)

What Others Have Shared

Click below to see contributions from other visitors to this page...

Verdana Not rated yet
A classic font, very easy on the eye and slightly softer looking and more versatile in the web world than Arial.

Click here to write your own.

How can I help you right now?

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 ...


"That was fast! That is exactly what I need it to do. You are amazing! You just might be the secret weapon that makes a website less  about being BUSY on the Internet and more about being a BUSINESS on  the Internet." - Stan L., advice-for-lifetime-relationships.com

Feedback is important: If you think this content was useful to you, feel free to LIKE and Share with friends, colleagues and family members.

New! Comments

Have your say about what you just read! Leave me a comment in the box below.
DMCA.com