Font Styles in Your Web Pages
There are many subtle aspects that can make a web page and a web site look messy or amateurish, one of these is too many fonts on the page.
A time honored page layout rule is that a page should have no more than two fonts appearing, otherwise the aforementioned ‘badness’ will creep in. Whenever you’re not sure about something, it is always a good idea to try it and then to try it in opposite extremes.
So in this case, that means that you should break out your HTML editor (whether it be Notepad or a wysiwyg like Dreamweaver) and create two simple HTML pages. In one page use only one font and in the other use many fonts (5 for example). Be sure to use to same text on both pages (cut and paste some text from some website or even this article would be fine…) and see for yourself how well each reads. I am sure you will find the page with only one font looks much better and is much easier to read.
Unfortunately there are only a few fonts that are sure to be supported with most people's browsers (tools like Dreamweaver give you the list to choose from) so you have to get used to these limitations unless you:
- Create all your text elements with gifs… a bad idea.
- Get into font embedding available for Netscape and IE.
- Use a supported font for the majority of your text and use GIF’s for headlines in your preferred font.
Your first option is not a good idea for several reasons:
You’re effectively killing yourself on the search engines. Search engines can’t read your gif images. You could use the alt attribute of the image tag, but that is really meant for short descriptions only, as they will disappear after a few seconds.
Using gifs will make your site a pain to update, imagine you need to change the spelling of a word or two? Now you would have to go into your image editing software and fix the spelling error and export in out again. If this same text was in HTML all you would have to do is pop open the HTML file and make the change, much easier.
You would lose a big advantage of HTML: automatic reformatting of the text. One of HTML’s greatest strengths is that it will constantly restructure itself as its text is manipulated. This is something we take for granted, but really makes life easy especially with long documents. So as you edit the text, removing lines or words, etc. … you will get an immediate glance at the way the document looks.
Now that we are pretty sure that text as gifs (or any image format) is not a good idea let’s move onto option #2, font embedding.
Option #2:
There is technology out there that allows you to embed the fonts with the HTML document. This process is a little esoteric, can have problems, and is barely used, so I would advise to not use it unless you are creating the website for internal use in, say, a large company's intranet.
Besides, the available fonts (especially Verdana) are nice looking and are a good choice for body text. I wanted to mention the font embed option just so that you know that this option exists.
But just in case there are some out there who really want to try it, you should check out this article on embedding fonts.
Option #3:
This is your best bet and this is what you commonly see, because it is your best bet! :) Choose one of the browser supported fonts and then set the feel for your page or website with a font that you will use for headline text only. You will find that by doing this you can achieve the results you want and stay true to smart web design rules.
Summary:
Fonts do play a big role in setting the stage for your web pages, so they should be carefully selected; a font that would be great on, say, a site that sells toys would probably not work on a site that deals with engineering products. With that in mind, we have to remember that too many fonts will confuse the reader, make the pages look disorganized and you’ll probably lose readers as a result.
If you liked the article and you want to see more let me know!
Stefan Mischook
Top