Web Safe Fonts for Websites
Have you ever noticed that when creating a website it can look different in your editor then it does when you view it in your browser? Have you noticed the same can happen if you view a site in different browsers also? This is all to do with differing font types.
Unlike the offline world of magazines and newspapers the appearance and size of text can differ on websites in order to affect the way viewers perceive a site (friendly, casual, serious or formal etc). On top of this some font types are easier to read and some are more widely available.
If you’re building a site it would be well worth taking a second to consider how you want your site to be perceived and which would be the best font. Ideally you should choose font types that:
1. Fit the character of your site,
2. Are easy to read on a computer screen
3. Are widely available across many browsers and operating systems.
There are many typefaces that you can use but you also need to remember that the computer displaying your web page must have the fonts installed in order to display the page correctly.
Therefore it is normal to specify several fonts in your HTML in a preference order. This way if your first choice is not installed it will use the second choice. If none of your choices are installed then the default browser font is used.
In view of this it is usual to restrict the main content to the following, so called, web safe fonts:
1. Times New Roman
2. Verdana
3. Arial
4. Georgia
There are in essence 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 (fine cross lines). Of the four fonts mentioned above Times New Roman and Georgia are serif fonts while Arial and Verdana are sans serif.
Let’s briefly evaluate the four main web safe fonts for availability, readability and character:
Times New Roman
- Availability – widely available as it is the most common serif font. It first became a standard web font as part of Windows 3.1
- Readability out of 10 – 4 out of 10, acceptable at larger sizes but very poor below size 12.
- Character – Serious, formal and old fashioned.
Verdana
- Availability – Widely available sans serif font, first appeared with Internet Explorer 3 as the rapid expansion of the internet demanded a new font that was easier to read on screen.
- Readability out of 10 – 9 out of 10, its wide body makes it exceptionally easy to read on screen even at small sizes.
- Character – Modern, friendly and professional.
Arial
- Availability – widely available, it’s the most common sans serif font. It also appeared as a standard font in Windows 3.1
- Readability out of 10 – 6 out of 10, there are worse but at small sizes can become too narrow and spacing between characters too small
- Character – Has a streamlined, modern look but is also plain and boring.
Georgia
- Availability – Good, introduced by Microsoft for Internet Explorer 4 as it became evident there was a need for a much more readable serif font than times new roman.
- Readability out of 10 – 8 out of 10, the best serif font for online reading as it was designed for that purpose.
- Character – Modern, friendly and professional.
Many other new web safe fonts exist out there now including Comic Sans Serif, Trebuchet and Courier New to name just three. However, the general consensus is from a general usability perspective, Verdana is the clear winner. Do you agree?
