Web safe fonts

On the following two pop-up pages, Alphabet and Numerics, you'll find some of the more common fonts pre-installed on today's browsers.

There are tons more available to most people but not everyone chooses to install them (or don't realise they can).

All of the fonts on the example pages use the same font size (10pt) but bear in mind that the settings for your browser and/or your windows (or whatever operating system you're using) can alter this. The point is, I've done nothing to them except change the font face.

You'll be able to see that, even at the same 'point size', they can take up considerably more, or less, width across the screen.

This is particularly important if you are putting text inside a box, perhaps overlayed on an image, which has fixed height and width. My best tip of you're thinking of doing this is "think carefully - do you really have to?"

How do you overcome this?

Well, you can't really. You can make all your text into images but then it's likely that no-one will ever visit your site because the search engine robots will never read your text and therefore not know what your site is about.

This indicates to the browser which font to use if the prefered font is not available. For example:

One thing to consider when adopting this principle is that the fonts should all have the same basic characteristics and, often more importantly, the same relative size. For example, 12 point 'Comic Sans MS' should be about the same size as 12 point 'Verdana' (which is isn't by the way).

Generally, if you use fonts identified as 'web safe fonts' you should have no problems, as your first preference will most likely be honoured by the browser.

This particular technique seems to work quite well on most current browsers but I've had to add a 'hard white space' between the first and second letters of the first word (where appropriate) in order to get it to display in the way I want it to on Internet Explorer and Firefox. Other techniques do not work as well as this across browsers, and this one may look a little odd on much older browsers. (As with anything that stretches things in the name of design - and this one's a bit iffy - you have to decide if you can live with it.)

As with all things design-wise, seemingly iffy or not, you are wise to test your pages on different browsers (or at least on the biggest).

It's economic madness to develop on Mozilla and say 'but IE should adhere to the standards' given that you know that IE does not adhere to standards and that most people use IE (as much as you or I may regret this).