The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

What's The Best Font For Websites and Blogs?

Apr2

Written by:
2011/04/02 04:06 PM RssIcon

What’s The Best Font For Websites and Blogs

One of the easiest ways to create great looking websites is an intelligent font choice.

Many young web designers go crazy and choose weird and fancy fonts. Changing style every so often on the same page.

Your font choice can make or break your website.

Remember when it comes to the web and fonts, simple is always better. You don’t need, and often monitors cannot display, the nice glamorous fancy fonts that you wish to use.

Image via Wikipedia 

Monitor resolution

In days past monitor resolution was a big stumbling block to displaying fancy fonts. At the smaller font sizes with the lower resolution, a lot of fonts became blurry and hard to read.

Where as print resolution is much, much better. One can easily use some of these fancy fonts in print without distortion or blurring because of the higher resolution.

When it comes to resolution most people use the term DPI. Dots Per Inch. Which basically means how many dots one can fit into an inch. More dots better resolution, better for the eyes. Less dots, worse resolution, more grainy and blurry, worse for the eyes.

Screen resolutions are normally in the range of 72dpi and 96dpi. Whilst print resolutions are much higher. Good photographs should not  be printed lower than 300dpi.

Monitors have come a long way in terms of resolution. But they are in no way competitive to print.

Anyway, when developing web pages you have no control over the hardware that your readers will have. Designing for the lowest common denominator will make sure that you are able to target a wider audience.

Availability

When deciding which font to use you have to keep in mind that the font you use has to be available on the users machine. Not everyone has the thousands of fonts installed as you do. Nor do they have the very fancy fonts installed that you have.

So when developing websites, keep in mind the availability of fonts. Using a non web safe font will isolate a large percentage of your readers.

Because of the high availability of these fonts they are commonly known as Web Safe Fonts. Read my post on Web Safe Fonts.

So which fonts do most people have? Fortunately others have already done the survey for us.

Here is a chart of the 10 most used fonts on the web. It would be prudent that you and I take note.

The most common used/installed fonts on the web as of February 2011 courtesy of Codestyle

Font name
Installed (%)
Tahoma
99.90%
Microsoft Sans Serif
99.74%
Arial
99.69%
Courier New
99.69%
Times New Roman
99.69%
Verdana
99.64%
Trebuchet MS
99.43%
Lucida Console
99.17%
Comic Sans MS
99.12%
Georgia
99.12%

As you can see there is very little difference as far as percentages are concerned. The point being is that we need to take note of what most people have installed on their machines, then choose those fonts in order to have the best impact.

What happens if your web site uses a font that is not installed, a substitute font will be used. This could be disastrous for your web site, as it might not display correctly. Which in turn could drive people away.

Legibility

The next thing to consider when choosing a font is how that font displays on monitors. Remember a font will display completely different in print than on the screen.

Because of this you and I need to be careful when selecting a font for our web site. Choose the one that is most legible on all monitor sizes and resolutions.

There are four types (or families) of Web safe fonts:

  1. serif
  2. sans serif
  3. fantasy or cursive
  4. monospace

Serif

Serif fonts are those fonts that have “Serif”, or little hooks on the end of letters. These little hooks become blurred or undistinguishable on monitors. Especially at bad resolutions.

While serif fonts are hard to read online, they are perfect for print. If you have print friendly versions of your site, this is the perfect place to use serif fonts.

Bookman Old Style font-family: 'Bookman Old Style', serif;
Garamond font-family: Garamond, serif;
Georgia font-family: Georgia, serif;
Palatino Linotype, Book Antiqua font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
Times New Roman, Times font-family: 'Times New Roman', Times, serif;

Sans Serif

Sans Serif fonts do not have the little hooks or serifs on the end of the letters.

Because computer monitors do not have as good resolutions as print, sans serif is the best font to use.

It will display clearer, crisper and bolder on most monitor resolutions. It will be the easiest to read and therefore the best choice for your web site.

Arial, Helvetica font-family: Arial, Helvetica, sans-serif;
Arial Black, Gadget font-family: 'Arial Black', Gadget, sans-serif;
Impact, Charcoal font-family: Impact, Charcoal, sans-serif;
MS Sans Serif, Geneva font-family: 'MS Sans Serif', Geneva, sans-serif;
MS Serif, New York font-family: 'MS Serif', 'New York', sans-serif;
Trebuchet MS, Helvetica font-family: 'Trebuchet MS', Helvetica, sans-serif;
Verdana, Geneva font-family: Verdana, Geneva, sans-serif;
Lucida Sans Unicode, Lucida Grande font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
Tahoma, Geneva font-family: Tahoma, Geneva, sans-serif;

Fantasy or Cursive

Fantasy and cursive fonts are not as wide-spread on computers, and in general can be hard to read in large chunks. As the title suggests they are very fancy and often cursive.

If you want to use a fantasy or cursive font, then use it sparingly and in a large text size. Probably used best for page headings.

There is however one cursive font that is generally recognised as a web safe font. That is Comic Sans MS

Papyrus font-family:Papyrus
Tempus Sans ITC font-family: Tempus Sans ITC
Lucida Handwriting font-family: lucidia handwriting, Lucidia sans
Monotype Corsiva font-family: Monotype Corsiva
French Script MT font-family: French Script MT
Jokerman font-family: Jokerman
Script MT Bold font-family: Script MT Bold
Comic Sans MS font-family: 'Comic Sans MS', cursive;

Monospace

Most web masters and developers use mono-space for code samples or instructions.

It is as the name suggests, a font that has it’s letters evenly spaced. Monospace letters have the same width for each character, so they always take up the same amount of space.

Think of a typewriter and the kind of text that you would see. This is closely related to monospace text. It is often referred to as typewriter text.

Courier font-family: Courier, monospace;
Courier New, Courier font-family: 'Courier New', Courier, monospace;
Lucida Console, Monaco font-family: 'Lucida Console', Monaco, monospace;

Conclusion

Choosing the right font is crucial when it comes to web development. Any particular font can make or break your site.

Here are a few rules to follow when deciding which font to use

  1. Don't use more than 3-4 fonts on any one page.
  2. Don't change the font in mid sentence unless you have a very good reason.
  3. Sans serif for online, serif for print.
  4. Monospace for typewriter and code.
  5. Script and fantasy for accents.

Related Reading:

Web Safe Fonts

Top 20 design flaws to avoid in your website / blog

Five essential aspects of web design.

Top 10 web design mistakes.

Common fonts to all versions of Windows & Mac equivalents

More comprehensive font survey

Remember you can win a weeks worth of free ad space just for commenting. The best comments during the week will get a weeks free advertising space. Check out: Win free advertising for your blog

New here, or perhaps you've been here a few times? Like this post? Why not subscribe to this blog and get the most up to date posts as soon as they are published.

Get involved in our community. Help promote other bloggers. List your blog in our directory for bloggers. Blog Directory for Bloggers

 

 



blog comments powered by Disqus

1 comment(s) so far...


Gravatar

Re: What's The Best Font For Websites and Blogs?

Hey! thank you for the information! very helpful, indeed! I have found all my fonts on this free fonts site: http://www.fontsbase.com

By Allan on  2012/01/17 11:08 AM
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<August 2014>
SunMonTueWedThuFriSat
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize

Mon, 26 May 2014 13:39:24 -0500

Mon, 19 May 2014 13:10:38 -0500

Tue, 13 May 2014 05:00:08 -0500

Mon, 12 May 2014 05:00:43 -0500

Sun, 11 May 2014 05:00:26 -0500

Tue, 06 May 2014 05:00:02 -0500

Mon, 05 May 2014 05:00:34 -0500

Fri, 02 May 2014 05:00:52 -0500

Thu, 01 May 2014 05:00:00 -0500

Fri, 18 Apr 2014 05:00:38 -0500

Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print