Things To Consider Before Choosing A Font

Installed Fonts - Web Safe Fonts - Web Browsers - Font Size

One of the core elements of a web page is the Font (also known as the TypeFace). Even though there are other core elements, such as the Image and the Video, none of them need to be as perfect as the font.

Using the wrong font can mean disaster. A web page might be full of beautiful images and videos but if the font, and more precisely the text, is not readable for example it can drive visitors away. This is because using the correct font is a skill, something you have to have an eye for. Many people do not rank the font because they concentrate too much on the writing, with attitudes such as "who cares about the font, it is the wording that matters".

In this section I will be pointing out some of the things you should be aware of, font-wise, which you may be surprised to hear is not all about the font per say but about other things that can affect your choice of font. Things such as the web browser, the desktop screen size and whether or not a font is installed.

Before you consider any font whatsoever the first thing you need to ask yourself is "Will everyone be able to view my web page with that font?".

Is  The  Font  Installed  On  Everyone's  Computer?

When you first buy a Windows computer it comes with many different fonts preinstalled on it. And if it comes with an office suite such as Microsoft Office 2007, or you install one yourself, you will have more than the average number of fonts installed. On top of this many other, third party, softwares can install their own fonts. This means their could literally be hundreds of fonts installed on your copy of Windows.

Fig 1.0  256 Fonts installed - How many visitors will have these fonts installed on their computer?

Fig 1.0 shows that I have 256 Fonts installed, but in reality it would not matter if I had only 1 font installed or 1,000 fonts installed because the only fonts that really matter are the ones that are preinstalled on every copy of the Windows operating system (i.e. Windows 98, XP, Vista and 7).

WEB  SAFE  Fonts

Regardless of fonts installed by office suites and third party softwares, the fonts preinstalled on Windows contain a standard set of fonts known as WEB SAFE Fonts. These are fonts that are primarily used by Windows programs and many third party pieces of software, which in turn are commonly used in web pages. The following are typically used WEB SAFE Fonts (there are more though):

      Arial  -  Comic Sans  -   Lucida Console  -  Tahoma  -   Times New Roman  -  Verdana

The idea of using WEB SAFE Fonts in your web pages is to, more or less, guarantee that all of your website visitors will be able to read your text content properly....the way you have it displayed in your own web browser. This is because they should have the common, web safe fonts, installed. I say "more or less" because the web safe fonts might not be available, for whatever reason(s), on every visitor's computer; in which case your text content will be displayed using a different, perhaps not web safe, font.

What  Happens  If  A  Font  Is  Not  Available?

When a font is unavailable (i.e. not installed), for whatever reason(s), normally the website programmer will have a backup plan. If they want to use the Comic Sans font, for a hand-written look for example, but anticipate that font not being available on a visitor's computer they will normally programme the web page to use an alternative web safe font such as the clean looking Arial font. This is okay, but in this case it would take away the hand-written look and therefore defeats the objective:

            I want this text to look as though I have hand written it.....

                    .....but I will settle for this clean Arial look if Comic Sans is unavailable.

Unavailable web safe fonts, and any other fonts for that matter, is an important point that a good website programmer/designer should discuss with you. They should ask you for at least two font choices, and then test for the possibility of those fonts not be available/installed on a visitor's computer. If they, or even you, are using a website builder software checking for missing fonts should not be an issue because they tend to use web safe fonts in all of their templates and web page codings anyway.

TIP: If you want to test against missing fonts yourself, go to an internet cafe and delete as much of their FONTS folder as possible. The FONTS folder can be found in the Windows control panel. When you have deleted what fonts you can, view your web pages and see if they still look good. Do not worry about the internet cafe's computer because it is normally restored when it is rebooted with a piece of protection software called DeepFreeze.

What  Fonts  Are  Preinstalled  On  The  Windows  Versions?

To add to the web safe fonts scenario, you also have to consider the different versions of Windows out there and more precisely what fonts are preinstalled on them. For example. I like using the Calibri font that comes preinstalled on Windows Vista and Windows 7, but not on Windows XP. This does not mean people using Windows XP are unable to view my Calibri font designed web pages though.

Firstly the web pages will default back to the Arial font, if the Calibri font is unavailable, and secondly Microsoft Office 2007 and 2010 installs the Calibri font. Meaning, Windows XP users who have microsoft office 2007 and/or 2010 installed will be able to view my web pages as Calibri font web pages (as opposed to Arial web pages).

One key point here is that you should have your web pages designed around two identical fonts if you are not after a unique look and do not mind using web safe fonts. For example. Calibri and Arial are roughly the same, as are Cambria and Times New Roman, so you could use one of the newer fonts (i.e. Calibri) as your main font and only use its alternative, older, font (i.e. Arial) as the font to fall back on when the newer font is unavailable.

Microsoft has a nice Typography website that allows you to see what fonts are preinstalled on a particular product (i.e. Windows or Office products). For this example select a Windows operating system from the PRODUCTS drop-down menu and then click on the GO button to see the list of preinstalled fonts for that product (not shown here).

Fig 1.1  Select a Windows product and then click on the GO button to see what fonts are supplied with it

* Not all fonts in a product will be installed, but with Windows the WEB SAFE Fonts are always installed.

Check  Web  Pages  In  All  Web  Browsers

A part from using web safe fonts to keep things boringly standard! another thing to consider, with fonts in general, is that some of them might not be displayed properly in all web browsers. This could be because of one, or more, of the following reasons:

It is because these kind of problems can occur, regardless if you use web safe fonts or not, that you should get into the habit of testing your web pages in all web browsers. Do not worry too much about font size and desktop size because many web browsers these days have the ability to magnify/shrink the text shown within their viewing area.

How  To  Use  Custom  Fonts

Using web safe fonts is all well and good if you want to be "normal"!! but in many cases you might want to be creative and decide to use a custom font, which is a font that is not web safe. You can download and install custom fonts, you can purchase font cds or simply use fonts that are already installed on your computer. Take a look around this web page - I have supplied links to free, custom, fonts for example.

Fig 1.2  Google custom fonts are not a part of the Windows preinstalled web safe font set

As said; If you use custom fonts (fonts that are not web safe) whereby your visitor's do not have them installed on their computer those custom fonts will not be seen and will be substituted for web safe fonts. So how do you get custom fonts seen?

The old, and still in use, method was to turn the text into an image and then display that image instead. As long as the website appeared quickly you would not know the text you were looking at was an image. And you might even of wondered "how did they embed that font?". Unfortunately, this was only good for Logo wording and very short paragraphs such as Testimonials and Quotes. You would not really turn an whole web page of text into an image just because you wanted a fancy piece of writing.

Fortunately a new method came along whereby custom fonts were, and still are, hosted on a server. In this explanation, custom fonts hosted on a Google server. This method works by you inserting a piece of Google Font Code into your web page. Once that font code is inserted it links up with the google custom font server whereby your website visitors can then see that custom font, on your web page, via their web browser. So basically there is no need for anyone to rely on a particular, custom or web safe, font being installed on their computer.....in the future.

Yes! Unfortunately Google has only just started this service and therefore does not have that many fonts, custom or web safe, available for use. Another unfortunate is the fact that if their font server ever breaks down (very unlikely!) their fonts, the same fonts you are using from them via their font code, will not get displayed; therefore rendering your web page useless. On the plus side, it is Google; so good times should be ahead!

Conclusion

If you thought this section was going to be about the standard stuff people write about with fonts and website design, hopefully you were plesantly surprised and learnt something more about fonts other than their design aspects (which you can read about in the Font Anatomy article, listed on this page). Meaning, you should read a good book (and/or some articles) on Desktop Publishing if you want to know more about "Choosing The Correct Font" and text layout (headings, subtitles, paragraphs, capitalization, etc).