The <font> Tag
The font tag was brought in early in HTML’s life to allow designers to change the size, typeface and colour of their text. It proceeded to do more harm than good — for all sorts of reasons — but mainly because it is a hugely inefficient way to format text. CSS text formatting is vastly superior, but knowledge of these old-style techniques is still useful.
This page was last updated on 2012-08-21
Future Watch:
Ever since HTML 4.01 came out in 1998, the <font> tag has been deprecated. This means that it should not be used anymore, since we have the vastly superior stylesheets at our disposal to format the text in our HTML pages.
Somewhat tragically, there has been little decline in <font> tag usage since then, so many years ago. To this end, I strongly discourage you from using the <font> tag at all in your HTML. It is highly restrictive and can add multiple kilobytes to the filesizes of every one of your HTML files. Moreover, it’s just not necessary.
CSS on the other hand, gives you far more control over how your text looks, and adds almost nothing to your download times. If you have yet to tackle stylesheets at all, don’t be afraid — they’re really not all that hard to get to grips with. Read the introduction to stylesheets, and then CSS and text and you’ll never look back.
Further reading:
The rest of this page is just a description of how the <font> tag used to work. Since you won’t be using it, of course, you should read this purely out of interest.
Font Size
You have two options when setting your text’s size: sizing it absolutely or relatively. Absolute sizes are between the range 1 and 7, and are set like this:
<font size="2">text</font>
Most browsers have their default font size set as 3. The majority of sites will have their text set at around size 2 or 3.
Relative sizing means the text will resize relatively to the user’s default size. This is better because it adapts to your users’ preferences — if they have specifically set their browsers up to display larger text than normal, your text will grow in proportion. You have a range between +6 to +1 and -1 to -6. Plus 1 and minus 1 will be the ones you’ll use most. As shortcuts to these two sizes, there are the tags <big></big> and <small></small>, which helps.
<font size="+1">Text one size greater than the browser’s default.</font>
Stay away from really small text, as it’s always too hard to read. Big text can swamp a page and induce too much scrolling. In the end, your choice of font size will have a lot to do with how much text is going to be on a page at a time. It is also tied to your choice of font, which we’re getting to next.
Font Face
First off, if you make no changes at all, your text will probably look like this:
12pt Black Times New Roman
Not the most beautiful or suitable font in the world because it was really designed for reading off paper, not computer screens. So, you’ll want to change it to something more readable and nicer looking.
Have a look in your fonts folder (on a PC it’s C:\windows\fonts). You should have a few dozen different fonts in there. Some will be suitable for usage on the web and others you will use again and again. One of the most common fonts used on the net is Arial (a variant of the Mac’s Helvetica). To change text to Arial, or any other font, the tags are
<font face="Arial">Your text here.</font>
The face attribute was so-named because font designs are more accurately known as typefaces.
Font Restrictions
A particular font face will only appear on a reader’s computer screen if they have that font installed on their computer. So if you have your whole page defined in Digital font (» download) or something, a load of your viewers will just get a page with boring old Times New Roman. To get around this, the best idea of course is to use common fonts. There are a set of common fonts that you can be more or less assured will turn up on all your readers’ systems. The face attribute allows you to specify a list of fonts at a time. It is good practise to specify back-up fonts in case things go awry. Watch:
<font face="Digital, Arial, Helvetica, sans-serif">text</font>
See — you get a couple of chances to find a good font, separated by commas. If the first one isn’t available your second choice will be used and so on. You can go on with a long list but really, you should stop after around 3 because you’re wasting your time otherwise. Try to keep the fonts similar along the way and try and end it on a common font to stay away from Times.
All fonts are a member of a certain family of fonts. For instance, Arial is of the type ‘sans-serif’. If all of your alternatives are exhausted without finding a match, your last resort is to specify a family of fonts. If it comes to this, the default for this family will be used. You can learn all about font families and the differences between them in web typography.
Even then, most people won’t be seeing your super cool font, so if you want this font to be used, make it into a graphic in your image editor and put the graphic on your page where you want it. It’s frowned upon in proper web design, but if you’re just starting out it’s acceptable until you learn how to go around it properly. Do remember of course that if someone has images turned off they won’t be able to read this text at all. Make sure it’s not too important and always use the alt attribute.
sourcetip: if you have a word processor like Word, try a couple of fonts out in that. It’s a lot faster to find the one you want.
Common fonts
For your convenience, here is a group of the most popular and common font lists:- Arial, Helvetica, sans-serif
- Trebuchet MS, Arial, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- Times New Roman, Times, serif
- Georgia, Garamond, Palatino, serif
- Courier New, Courier, monospace
Font Colour
To change the colours of the text on a page for the entire page, you can define it in the <body> tag. I have a complete tutorial on body here.
To change the colours of just a small block of text or an individual word, you have to use the old font tag again. The format is
<font color="#ff0000">text</font>
Colours in HTML have to be defined as HEX codes, which are 6-digit codes representing the amount of red, green and blue (RGB) in the colour. To see a full chart of these codes so you can pick out the ones you like, see the HEX colour chart.
<font color="green">text</font>
Newer browsers allow you to give the color name instead, as above, but your choices are more limited. To see a chart of these colours, look at this chart.
