Fonts - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML

	Sign In Sign-Up

Messing About With Fonts
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 tag attributes

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

This is some blue 'body' text to make up the first paragraph

And this is some size 5 text on a separate line

The text in this paragraph is bold and 3 sizes up from the default size

This paragraph is in the font 'Verdana', has an alternative font 'Helvetica' and a last option of a generic 'sans serif' font

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

 : 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.
 : This tag makes the text within it bold.   is italic and   is underlined.
 : 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: text .
This would display like this - text

Go up to the top of the page to choose where you go next