Web Design |
topic title |
|||||||
main menushelp pagesprinter-friendly/text-only version your accountUse your ACOM account to access the discussion boards, submit course work and check marks and feedback Essential related topicsRelated topics |
The <FONT> tag
This is quite an involved tag. It is also a strange tag in that although, when beginning web design, it seems very important (perhaps even the most important), by the time you are working at a more advanced level, you should really abandon it altogether - it is made redundant by the use of style sheets. This isn't to say there's anything intrinsically wrong with it, but it's a rather clunky tag. Nevertheless, there are things in basic HTML that you can't do without using it, and even I have still been known to use it on occasion! The <FONT> tag is an inline tag. That is, you can use it to format text without breaking the flow of characters with a new line, unlike <P> tags or headings. There are no obligatory attributes as such, but a <FONT> tag on its own does nothing: you need at least one of the three possible attributes listed below. A word of warning first though: please read the issues section in the second half of this page before merrily shooting off and peppering your files with this tag. AttributesCOLOR. Quite simple really - if you want to change the colour of text from the page default (which will either be the browser default, or the colour specified in the TEXT attribute of the <BODY> tag, if one was used), do so with this attribute. It takes an RGB code or colour name, as usual. You can also change the colour of links in the same way. The only real issue to note at this point is the spelling of COLOR, which as is often the case in HTML, has to be the American version. FACE. This is the attribute used to select the style of font. There are two font styles on this web site: the main text is in "Bookman Old Style", whereas the headings are in "Garamond". Some other font styles are as follows: however, ensure you read the further information given in the issues section below. Some of the fonts in the list below may look identical to you - and you'll have to read that section to find out why this might be.
In case you were wondering, "serifs" are the little lines and marks at the ends of characters, which are absent from "sans-serif" fonts (sans being the French word for "without"). SIZE. Font size can either be set in absolute terms, or relative terms. Size is measured on a scale from 1 (smallest) to 7 (largest) with the default being 3. However, it is impossible to say exactly how large this default is. This might seem confusing, but remember that the reader of a page can use browser settings to change the text size themselves. So, in the end, everything is kind of relative. But rather than worrying about that too much, consider the following to be a guide to the values this attribute can take:
Absolute value: 1 2 3 4 5 6 7
Relative value: -2 -1 - +1 +2 +3 +4
To summarise all three of these, have a look at the following text, then the tags which have created it: Welcome to FRANCE
<P>
<FONT FACE="Comic Sans MS" SIZE="+4">Welcome to
<FONT COLOR="#0000FF">FR</FONT>
<FONT COLOR="#FFFFFF">AN</FONT>
<FONT COLOR="#FF0000">CE</FONT>
</FONT>
</P>
<FONT> tag issuesThe <FONT> tag is one of the more awkward tags, for various reasons which will now be discussed. Web design purists object to its use; myself, I don't think it should be completely abandoned, but if you do become familiar with style sheets, this tag should become used for only very small passages of text only. Even in basic web design, try and minimise its use. (It has been deprecated from the official HTML 4.0 specification.) Certainly, don't use the tag to create things such as headings, where other tags could be used. Don't change fonts willy-nilly, just for effect. There few things more irritating on the web than font size, face and colour changing randomly, for no reason other than the designer wanting to show off how many font styles they know. If you're going to use a <FONT> tag, therefore, have a good reason. Be aware that not all fonts, particularly not the more obscure ones, will be loaded up into browsers. What this means is, that in the FACE attribute, you need to provide a list of font styles. Start with the font style you would most like to see there, but then put one of the common ones that resembles it (the fonts given in the table above should work on almost all browsers). End the list with one of the generic names: serif, sans-serif or monospace depending on which font family you want to display. The upshot of all this is that the following text should be created by the tags which follow it: This should be the uncommon font, Franklin Gothic, but you might see Arial And this one should be Century Schoolbook, but you might see Times New Roman
<P>
<FONT FACE="Franklin Gothic, Arial, sans-serif">
This should be the uncommon font, <I>Franklin Gothic</I>, but you might
see <I>Arial</I>
</FONT>
</P>
<P>
<FONT FACE="Century Schoolbook, Times New Roman, serif">
And this one should be <I>Century Schoolbook</I>, but you might see
<I>Times New Roman</I>
</FONT>
</P>
If you want to change the whole page to a non-default font, it's generally acceptable (if you're unfamiliar with style sheets) to have a <FONT FACE="..."> tag at the very top of the page. However, don't do this to change the text colour: do that with the TEXT attribute in the <BODY> tag. It's not really on to change the size of text on the whole page either, as the general text size should really be up to the reader of the page to adjust through their browser settings. As ever, remember that web design is not a matter of precision in the same way as designing for print.
| |||||||
Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.
