Webmaster Tutorial Menu
Tutorial Home
Life before .htaccess
You have to start somewhere
Becoming a Webmaster
The steep learning curve
What to look for in books
How many hats?
Technical Job Description
Linux or Microsoft?
Standard web stuff
Basic HTML
Frames and/or Flash?
Site submission
Negotiating Links
Validating your HTML
Web safe fonts
Web safe colours
Different screen & monitor sizes
Cascading Style Sheets (CSS)
'Nix specific stuff
Choosing a 'Nix hosting company
Web Logs Demystified
Web Log Status codes
Limitations of robots.txt (and the power of .htaccess)
cost  effective,   fast  loading,   lightweight,   high  return  websites

Web safe fonts

W hat do I mean by the term 'Web safe font'?     I mean fonts that you can use when creating your pages so that they display on the surfer's monitor in much the same way as you see them on yours.
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.

Overcoming default font size

A s implied above, even though you design a page and tell the browser you want (say) 10pt as the size, if the surfer has changed the prefered font size (eg. they've changed it from 'normal' to 'larger' or 'smaller', or they've specified a minimum or maximum - not in the browser options but in the 'Control Panel' or equivalent), they will see the page differently to the way you designed it.
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.

Catering for fonts that are not installed

W ithin html commands that specify the font for the page, for the body, for the paragraph, for the span and in style sheets and inline styles, it's commond to see a list of fonts.
This indicates to the browser which font to use if the prefered font is not available. For example:
style="font-family: Comic Sans MS, Verdana, Arial, sans-serif"
indicates that the browser should use 'Comic Sans MS' if it's available. If it's not available, it should use 'Verdana', etc.
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.

Mucking around with font features

A  technique I've used on this page (and a couple of others in this tutorial) is to use styles to render the first line of the first paragraph in small capitals, and to make the first letter even bigger. This is another example of a technique that works fine in principal but may not always work the way you want it to on other surfer's browsers.
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).
[Content of this page last reviewed: 12-Jun-2004]
_ _
copyright © 2001-2007 bpresent
Terms of Use, Privacy Policy, Copyright and Trade Marks
Sydney +61 438 726 669