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

Blog Posts From The Brave Programmer

Minimize

Web safe fonts.

Mar8

Written by:
2010/03/08 08:05 AM RssIcon

 

So many times I end up in arguments with designers and graphic artists over fonts for their or someone else's website. Most, using some fantastic graphics design program like Photoshop, use outrageous and often good looking fonts, but do not realise that the common browser cannot handle this.Web-Safe-Fonts

What they do not understand is that not everybody has all these fancy fonts. In fact most browsers can only deal with a certain subset of fonts. These are commonly termed, Web Safe Fonts.

Why Web Safe Fonts?

If you are new to web design, maybe you are thinking: "Why do I have to limit myself to that small set of fonts? I have a large collection of nice fonts in my computer". What you might not understand is that browsers can use only the fonts installed on the users computer, so it means that every visitor of your web page needs to have all the fonts you want to use installed in his/her computer.

Because there is such an array of fonts available this could be a huge problem. If your computer does not have the used font. You either have to install the needed font, or allow the browser to substitute. Substitution can then lead to your web page not being displayed correctly, thereby actually putting visitors off, scaring them away, never to return.

Then there is the difference between how a computer screen presents a font to how a font is presented on print. Print is generally much higher resolution. Whereas screen resolutions are in comparison very small. Besides the fact that with a computer you are not in control of that resolution, whereas in print you have total control. Using non-web safe fonts can really make your web page look very different from your original intent.

As an example here is some text in a font that you might not have on your computer.

My My this is a strange font.

Actually that should read.: My My this is a strange font

Where and when to use web safe fonts.

So then you ask the question. Where can or should I use web safe fonts. The simple and quick answer to that is, anywhere you have plain text. Your plain text headers, links, and content should all use Web safe fonts. If you plan to use normal text for your logo, you should also use a Web safe font for that.

How to use web safe fonts

Put your web safe fonts into your CSS with font or font-family rules.

There are a few Web safe fonts available. Many of them look very similar to each other. In reality they are essentially based of the same font. A font family is used to group similar looking fonts together for the purpose of substitution, if necessary. A CSS rule for your font family, for example, might look something like this:

font-family: Arial, Helvetica, sans-serif;

The first font listed, Arial, is a very common font available on most computers, and available to most browsers. You can be reasonably sure that your text and page will display correctly.

In a rare case where a computer might not have Arial the next font listed in the font family will be used. In this case Helvetica. That’s why Helvetica is listed second. When a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed.

And in extremely rare cases where a computer might not have both Arial and Helvetica installed. Then the next font in the font family is used. Normally this is a very very common default font. In this case it would be sans-serif.

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

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

Serif web safe fonts

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

Sans Serif web safe fonts

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

Monospace web safe fonts

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

Cursive web safe fonts

font-family: 'Comic Sans MS', cursive; Comic Sans MS

Can I use other fonts?

The short answer is Yes. But there are a few thing to consider. If you are going to use other fonts. Be sure to include a download link, so that readers to your web page can download and install the needed font. This option should be done only in extreme cases where there is no possibility to use any of the web safe fonts, and the copy that uses that font is rather large.

This next option is commonly used for headings, banners, etc. Normally for short descriptive sentences where only one or two words are used. Put the text with the desired font into a graphic, and past the graphic into your page.

Now I don’t normally suggest this method because graphics are very poor when it comes to SEO. Search engines cannot index the text in a graphic. So use graphics is you do not care about SEO for your headings.

Conclusion

There is more than meets the eye when designing a blog or web page as it relates to Fonts. Don’t just use fonts that make your site look great on your computer. Make sure the rest of the world can read your blog or web site. Use web safe fonts.

You do not want to scare people way because your page looks like a dog’s breakfast in their browser.

 

Related Reading:

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

 

 





Tags:
Categories:
blog comments powered by Disqus
 
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
<October 2017>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
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