Best Website Fonts 5


Fonts for WebsitesReadability and visual appeal are BIG factors to consider when designing your web page. First impressions are, as always, very important and no less so than with web pages.

In fact, I would go further and say that the 1st impression of a web page is critical to your website success. You only have seconds in which to capture a visitor’s interest. During that time, visitors will decide if they want to explore your site further or press the back arrow to try another site. There are so many choices, so many other well-designed websites, that you want to make sure that yours stands out for all the right reasons.

Designing web pages has a lot to do with working out how to grab a visitor’s interest whilst at the same time creating pages that are easy to navigate and easy to read. When you are first starting out with your web design journey, you will thus wrestle with the question as to which are the best web design fonts to use.

Web Font Families

We are all familiar with the usual fonts such as Arial and Times New Roman in word processing, but which fonts work best on websites?

There is considerable debate about which HTML fonts make good web fonts. The main categories are serif which have a little finishing stroke at the end of characters (e.g. Georgia), sans-serif  (e.g. Arial) and monospace (e.g. Courier).

There was a very interesting study done in 2008 by Song and Schwarz and nicely written up with font examples here. In essence what this study showed was that exercise instructions written in a hard-to-read, fancy font were interpreted as being much harder to do than the same instructions written in a simple font (Arial in this case). These findings have implications for any web page content: it needs to be written in a font that is as easy to read as possible if we want to maximise reader engagement.

Font Choices

You can get a good idea of how the different fonts look here: Web Safe Fonts

I like to use 1 set of fonts for headings and another set for the main content of my page.

What are Others Using?

There’s a very impressive study written up at Smashing Magazine covering Typographic Design Patterns and Best Practices . What I liked about this study was the fact that they based their research on 50 established websites. Their findings are really interesting and written up in exceptional detail.

To highlight just a couple of their findings:

  • 80% of these companies used either Georgia, Arial or Verdana for the page copy.
  • Verdana was rarely used for headings. This is probably because of the spacing between Verdana characters.

Font Sizes

There is a lot of debate about which is the best font size to use in your web page design and in particular, which unit of sizing to use (px, % or em).  I will look at all 3 and give you some guidelines regarding which way to go.

Sizing Text with Pixels

If you size your font using px as in the following example, then you are fixing the font size the way that you want it but if a reader wishes to make the font larger, then he or she will need to use the zoom tool which will have the effect of making the whole page bigger.

h4 { font-size: 14px:}

Sizing Text with Em

The default font size for browsers is 16px (which is equivalent to 1em). Many recommend 16px as an ideal size, or its equivalent, thus avoiding eye strain and improving accessibility by all ages.

Flexibility or user-choice should be the guiding principle. If you use ems, as in the example below, then the user can change fonts as desired.

h1 {font-size: 2em;}

If you are used to pixels as most of us are, then you can use any em size and readily work out its equivalent pixel size with this formula:

em = px / 16

so

px = em * 16

So in my example above, I have set <h1> to 2em so I can work out the equivalent pixels with the formula:

pixel = 2 * 16
= 32

The advantage of using ems is the flexibility they afford with resizing text. However, older versions of IE tend to exaggerate the font size them this is done, either making it too big or too small.

Sizing Text with Percentages and Ems

To overcome the problems of different resizing capabilities of different browsers, w3schools recommends using a combination size unit like so:

Example in Style Sheet

body ( font-size: 100% }
h1 {font-size: 2em;}
p {font-size: .9em’}

 

The styles in the above example will set the base font size using a percentage and then set individual tag sizes using ems, relative to the base font.

In this example, .9em is equivalent to 90% of the user’s preference.

So the safest bet, to accommodate all browsers, is to use a combination size unit as suggested by w3schools.

What are Others Using?

Again if we refer back to the study mentioned under Font Choices, we find the following trends:

  • Font sizes for headings ranged from anywhere between 18px to 29px (or their equivalence in ems).
  • The most popular font size for content was 13px.

Font Color

The font color will depend on whether you are using a dark background or a light background.

Black text on a white background is considered easiest for reading. Alternatively, a popular trend at the moment is using a shade of grey on white background instead of a stark black on white. However, I have come across many a site that uses a very light shade of grey and my instinctive reaction is usually to navigate to another site. So, high among my website design tips would be to look at your page on a number of different screens and devices. If the text looks too light on any one of these screens, opt for a closer-to-black colour.

It’s interesting to note that not 1 website, in the study mentioned above at Smashing Magazine, used a dark background with a lighter text. They all used a white background for content areas and black text or darker shades of grey.

Line Height

Whilst a discussion about line height might seem out of place here, it really does  finish off how well your font choices will appear. And the percentage that you use is a percentage of the current font size.

A common recommendation is 140% to 150% but the ideal depends on your layout and font choices. You can experiment yourself until you find the ideal readability appeal.

Example

These lines have a line height that is left at the default.
These lines have a line height that is left at the default.
These lines have a line height that is left at the default.

 

These lines have a line height that is a percentage bigger.
These lines have a line height that is a percentage bigger.
These lines have a line height that is a percentage bigger.

 

Changing the line height, rather than leaving the line height at its default setting, really does enhance readability .

A Handy Tool for Choosing a Line Height

The creator of the Thesis WordPress theme has a really handy tool called Golden Ratio Typography Calculator. The tool allows you to enter your preferred font size and width of page. It then comes back with a suggested line height and a sample of how your page would look. Then you can view this example with different font families.

How to Change Fonts

Formatting styles can be listed in 3 ways:

  1. As an inline style applied to individual HTML tags  (should be used sparingly)
  2. As a set of styles in the head section of a page (only good for that page)
  3. As a set of styles in an external file that your pages link to (best choice)

External style sheets are files that have the extension .css.

You can enter new style rules, or alter existing ones, in your style.css file, such as shown in the style sheet example in the 1st half of this article.

How to Apply Font Styles on Web Pages

You have probably already observed that HTML tags are often styled with a list of fonts like so:

p{font-family: Arial, Times, Georgia;}

This simply means that if a browser doesn’t have the 1st font, it will try rendering the text using the 2nd listed font and so on. If you want to list a font that has 2 or more words, just enclose them in quotes like so:

p{font-family: Arial, “Times New Roman”, Georgia;}

It’s a good idea to make the last font in your list of choices a general font that all browsers would be able to handle, just as a safe guard. That way, if you have decided to use a lesser-known font in your list, then you have a fall-back position by including at least 1 choice from the list of safe web fonts.

How to Change Fonts in WordPress

This is only necessary if you wish to alter the fonts that have been set in the theme that you are using. If you are happy with how your pages are looking, then I would skip this section.

  1. Activate the Dashboard (1st screen you see after logging in) and look for the left menu option Appearance. You can either click on Appearance or just hold your mouse over the option and then choose Editor. This will take you to the code editing window and you can see all the files that you can edit on the right hand side.
  2. Activate the style.css file and search for “body”. This will show the styles that have been set for the page as a whole. You can alter these if you like. I suggest that you comment out the font styles that you decide to change in case you want to return to the original version in the event that you don’t like the options that you are experimenting with.

    /*  this will comment out css code */

  3. You will find that fonts have been set throughout the style sheet for different sections of your pages, such as content and navigation etc.
    Let’s say you want to change the font for your h1 headings. Just search for h1, comment out what is there already, and add your preferred style.

Keep in mind, that browsers can cache style sheets, so if your changes are not showing up, then you can clear your browser cache via the tools menu or you can bypass the cached version via ctrl-F5 or ctrl-refresh.

Perhaps even more tricky can be the fact that if you are using a WordPress plugin like w3 Total Cache, then you may need to clear the cache before your changes are visible.

The Best Fonts for Websites

So, there is no such thing as the best font for website design. However, as you can see from this discussion, there are web friendly fonts and font sizes that do make the reading of your web pages easier and more appealing.

So in the end, the best web font for you will be a matter of preference but I hope that this discussion will help you choose the font families and font sizes that best maximise readability on your website.


Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

5 thoughts on “Best Website Fonts