Share and download high quality stock photos

Network sites: Free Tutorials  |  Free Templates  |  CSS Gallery Showcase  |  Royalty Free Textures

Website Fonts Exposed

Article by Stephen Cope - November 22, 2006

You are all familiar with newspaper and book print, and you have, I'm sure, encountered books in large print, and legal forms in the proverbial small print.

 You will, no doubt, have a preference as to what looks good, and what doesn't, but more importantly you will have come across print that is difficult to read because of its style or size or even the background colour of the paper.

For your visitors; your web page must not only have good content, but it should be easy to read, and so choosing the style, size and colour of website text is very important.

There are three main things to consider when deciding on your website fonts:- Font Typeface, Font Family and Font Size.

Typeface

Fonts fall into one of two typeface categories either serif or sans-serif. The serif typefaces (the font has curly bits at the top and bottom ends on the letters) are easier to read on paper, and are used in newspapers and books, but the sans-serif (which does not have the curly bits) typefaces are easier to read on a computer screen. - I always use Sans-Serif.

 Font Family

There are many typefaces that you can use but you 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 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: - (note chart below may not display correctly)

  1. Arial- This text is in 12 pt Arial font.
  2. Times Roman- This text is in 12 pt Times Roman font.
  3. Verdana- This text is in 12 pt Verdana- font.
  4. Georgia- This text is in 12 pt Georgia font.

I always use Verdana as the first choice -see specifying fonts later

Font Sizes and Fixed Versus Relative Fonts

Font sizes can be either fixed (absolute) or relative. Using fixed fonts means that your page displays exactly as you designed it. However the problem with fixed fonts is that the visitor has no control over the font size. Therefore if the visitor finds the font too small and can't read it then he can't change it.

With relative fonts the font size is based on the default browser font size setting. The visitor can change the size to suit his preference.  However if he makes the font too large it may cause text to wrap where you didn't expect it, and the page appearance can change considerably.

Now this could merely be a cosmetic change, but it could also seriously affect the page readability; especially the page navigation.

In Website Fonts you can find out how to choose fonts so as not to upset your layout, and how to set fonts using the font tag and CSS.

About the author
Stephen Cope is a freelance trainer and webmaster. Learn how to make a website and find more website design related articles at his site www.build-your-website.co.uk

Back to articles