Fonts - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML
Messing About
With Fonts
Adam's HTML Planet - Home Page
list of tutorials next tutorial

The text we've put on our page so far has been functional but not very inspiring. You'll doubtless be glad to know that there are lots of things you can do to format the text in your web pages. We're going to look now at some of the <FONT> tag attributes

  1. Open in your text editor the file you've been working on [colours2.htm was the last one named by my reckoning]
  2. Compare the example file below and make the necessary adjustments
  3. Save the file [fonts.htm]
  4. Check the results in your browser

<FONT COLOR="#0000FF">This is some blue 'body' text to make up the first paragraph</FONT>

<BR> <FONT SIZE="5">And this is some size 5 text on a separate line</FONT>

<P><FONT SIZE=+3><B>The text in this paragraph is bold and 3 sizes up from the default size</B></FONT>

<P><FONT FACE="Verdana,Helvetica,Sans Serif">This paragraph is in the font 'Verdana', has an alternative font 'Helvetica' and a last option of a generic 'sans serif' font</FONT>

an example
Let's have a look at what we did there.

<FONT COLOR="#0000FF"> </FONT>
This tag specifies the colour of the text. In this case I used the hex code for blue. I could have used the word blue to achieve the same result.

This tag specifies an exact size. The possible sizes are from 1 [smallest] to 7. Size 5 is equivalent to 18 point-size [1=8pt, 2=10pt, 3=12pt, 4=16pt, 6=24pt and 7=36pt].

This tag also specifies size - but this time relative to the default font size [which is usually size 3]. You can also use minus values.

<B> </B>
This tag makes the text within it bold. <I> </I> is italic and <U> </U> is underlined.

<FONT FACE="?????"> </FONT>
This tag allows you to specify particular fonts. The thing to bear in mind here is that the person viewing your site may well not have the same fonts installed on their computer. Therefore it's best to allow some options. You're probably safe with Ariel, Verdana and Helvetica. To allow for even these common fonts being unavailable you can specify as a last option a 'sans serif' or 'serif' font which will allow a generic font to be used.

These attributes can be combined within the one FONT tag if you wish. So, for example, to get green, size 5, verdana text you would use the following code: <FONT FACE="Verdana" SIZE=5 COLOR="#00FF00"> text </FONT>.
This would display like this - text

Go up to the top of the pageUp Arrow to choose where you go next