Web-Safe Fonts for Your Site

Choosing the right typeface for your website copy is important, since it will affect the way your readers perceive your page (serious and formal, or friendly and casual). Aside from this, there are also important usability concerns. For example, some font types are more easily readable than others, and some are more widely available.

You want to choose font types that:

  • fit the character of your site,

  • are easy to read on a computer screen, and

  • are widely available across many browsers and operating systems.

    There are basically two types of fonts: serif and sans serif. Serif fonts are those that have fine cross-lines at the extremities of the letter. Sans serif ("sans" being the French word for "without") are fonts that don't have serifs. The most common serif font is probably Times New Roman. Arial is an example of a common sans serif font.

    Let's go briefly through the most popular font types and evaluate their availability, readibility and character:

    Arial:

    • Availability.- Thoroughly available. It is probably the most common sans serif font. It is the default font for Windows, and it first shipped as a standard font with Windows 3.1.

    • Readability On Screen.- Not the worse but definetely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters too small.

    • Character.- Has a streamlined, modern look but is also plain and boring.


      * For Mac users, the equivalent of Arial is Helvetica.

    Times New Roman:

    • Availability.- Thoroughly available. It is probably the most common serif font. It is the default font for web browsers. It was first shipped as a standard font with Windows 3.1

    • Readability On Screen.- Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes.

    • Character.- Serious, formal and old fashioned.


      For Mac users, the equivalent of Times New Roman is Times.

    Verdana:

    • Availability.- A widely available sans serif font, Verdana was first shipped with Internet Explorer version 3, when the exponential growth of the Internet demanded a new font that was easy to read on the screen.

    • Readability On Screen.- Exceptional. It's wide body makes it the clearest font for on-screen reading, even at small sizes.

    • Character.- Modern, friendly and professional.

    Georgia:

    • Avaliability.- Good. It is a serif font introduced by Microsoft with Internet Explorer version 4, when the need for a serif font which much better readability than Times New Roman became evident.

    • Readibility On Screen.- Very good. It is the best serif font for on-line reading, since it was specifically designed for that purpose.

    • Character.- Modern, friendly and professional.

    Microsoft has also popularized two more fonts: Comic Sans Serif and Trebuchet.

    Comic Sans Serif was launched with Internet Explorer verion 3 and mimics the hand writing used in comics. It is easy to read and is informal and friendly, but it is not considered appropriate for more serious, professional sites.

    Trebuchet is another sans serif font, similar to Arial but with more character, although it can be difficult to read in small sizes.

    Finally, we can mention Courier New, a serif font that was widely popular with old, mechanical typewriters, and that is now used only to present simulated computer code (if you need to present snipets of sample HTML code in your web pages, this is the font to use.)

    Therefore, from a usability perspective, the clear winner is Verdana. If you are inclined to use a serif font, Georgia is the best option. Arial remains a good option for specific parts of text, like headlines and titles, where a different font must be used and you can use larger sizes.

    -----

    You can freely reprint this article. Just include the following resource box at the end:

    About The Author

    Mario Sanchez publishes The Internet Digest ( http://www.theinternetdigest.net ), an online collection of web design and Internet marketing articles and resources. You can freely reprint his weekly articles in your website, ezine, newsletter or ebook.

    In The News:


  • pen paper and inkwell


    cat break through


    The Top 8 Website Sins Part Two

    Sin #5Poor Spelling And GrammarWe all make mistakes when we... Read More

    Web Design: Use it to Showcase the Message

    If you are designing a web site for which the... Read More

    Understand Your Color

    Any design on a web application involves the effective input... Read More

    Color Scheme for Your Website?

    Yes, in a world that is obsessed with makeover madness,... Read More

    Why Use Professional Web Site Designers For Your Next Web Development Project?

    Probably you know someone who has created a web site... Read More

    Sales Versus Customer Oriented Websites

    Should Generating Revenue From A Website Be The Prime Motivator?... Read More

    Affordable Web Design In Birmingham

    If you have a business, big or small you may... Read More

    Cheap Web Design

    If you think it's simply a case of who will... Read More

    Tapping Into The Visual Stimulus Of Your Web Site Visitors

    "Oh, my eyes, my eyes! What an eye sore. Quick,... Read More

    Basic Graphic Design

    Wether you design your business brochures, flyers, web page, or... Read More

    Save Time and Boost Profits with Free Content

    Public domain gives you a head start creating ebooks, ecourses,... Read More

    Hacked Off with CSS?

    For those not familiar with CSS Hacks, they are ways... Read More

    7 Tips To Increase Sales With Your Ecommerce Web Site

    Ecommerce is just exploding right now on the Net. More... Read More

    Flash - To Use Or Not To Use?

    Out there in the WWW there are thousands sites using... Read More

    Affordable Website Design In Manchester

    If you have a business, big or small you may... Read More

    How Do We Know When Its Time To Redesign Our Web Site?

    A question we frequently get asked is, "how do we... Read More

    Web Copy - What You Should Know First

    Just what is web copy? Some people think that web... Read More

    Make Artistic Graphic Designs

    Are you a student of graphic design? If you have... Read More

    How to Use Sliced Graphics to Layout Your Web Site

    The problem with designing your site as a graphic, is... Read More

    Immutable Laws Of Effective Navigation - Part 1

    The first immutable law of effective navigation: It's gotta be... Read More

    7 Benefits of HTML Validation

    You may not bother with html validation or writing simple... Read More

    Web Site Professionalism? What Is It?

    Your web site should be-visitor friendly to navigatesearch engine friendly... Read More

    How to Make Your Site Attractive to Potential Link Partners

    Every now and then, I receive a link exchange request... Read More

    Usability and Considerate Design

    I hate to imagine that in your web development project... Read More

    Give Your Website A Chance

    I often wonder how serious people are when it comes... Read More

    How To Improve The Professional Look And Feel Of Your Website

    Projecting a professional image is paramount to your website's success.... Read More

    Put Up A Website And Start Promoting In About An Hour

    I can't figure out people who have products or information... Read More

    10 Profitable Ways To Recycle Your Content

    1. Repackage your web site content in to different products... Read More

    Converting Print Advertising For Use On The Web - A How-To

    Contrary to the beliefs of some, advertising for web and... Read More

    When Your Graphic Designer Costs You Money

    So how do you know when your graphic designer costs... Read More

    Website Design - Choosing Your Colors Wisely

    Colors convey emotions and emotions heavily influence the decision-making process.... Read More

    Design Your Site For Your Customers

    The most important person that you need to please when... Read More

    Web Marketing: Design Mistakes That Drive Customers Away In Droves

    They may look cutting edge, but if you want a... Read More