HTML/Fonts and colours

HTML has a very flexible tag, the <font> tag. This article will show you the many ways it can be used. Keep in mind however, that this tag is 'deprecated', so when you feel like you know enough about HTML, move on to CSS stylesheets for formatting, and forget you ever learned about this tag.

Changing font colours

The colours of the text can be changed like this:

 <font color="#FF0000">Red text</font>

Use American English only, do not use British English. If you use British English, your code won't work!

Which makes red text:

Red text

You may be thinking "what on Earth is that #FF0000 stuff?". That is a colour code, in hexadecimal. It allows you to specify a whole range of colours to use. You may want to read web colors if you plan to use them, but here we will use a simplified method. You can instead name the colour you want to use, by using a constant. The above example can be simplified like this:

 <font color="red">Red text</font>

Red text

Isn't that much easier? There are 16 colour constants you can use, outlined in the following table:

Colour	Hexadecimal	Colour	Hexadecimal	Colour	Hexadecimal	Colour	Hexadecimal
aqua	#00ffff	black	#000000	blue	#0000ff	fuchsia	#ff00ff
gray	#808080	green	#008000	lime	#00ff00	maroon	#800000
navy	#000080	olive	#808000	purple	#800080	red	#ff0000
silver	#c0c0c0	teal	#008080	white	#ffffff	yellow	#ffff00

For a much larger selection of colors (139 in total), see the Named Colors table. Here is a tiny sample:

IndianRed	Salmon
SteelBlue	NavajoWhite
Green	Tomato
Gainsboro	Linen

Changing font size

The <font> tag also allows you to change the font size. For an idea of the full range of sizes you can use, read this example:

 <font size=1>Font size 1</font><br>
 <font size=2>Font size 2</font><br>
 <font size=3>Font size 3</font><br>
 <font size=4>Font size 4</font><br>
 <font size=5>Font size 5</font><br>
 <font size=6>Font size 6</font><br>
 <font size=7>Font size 7</font>

This shows you the 7 font sizes:

Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7

So as you can see, the font can go from very small to very big. You may also want to check out the <big> tag for making large text, and the <small> tag for making small text:

 <small>Small text,</small> Normal text, <big>Oversized text</big>

Produces:

Small text, Normal text, Oversized text

You can also use use:

1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large

Changing font appearance

You can change the font that text is written in using the face attribute, as in this example:

 <font face="Courier new">Courier new</font><br>
 <font face="Verdana">Verdana</font><br>
 <font face="Arial">Arial</font>

Gives us this:

Courier new
Verdana
Arial

You should wherever possible use common fonts that can be found in all operating systems, otherwise many people will not be able to use your website. Also note that excessively fancy fonts can be hard to read.

To avoid these problems, it is widely supported to use the following generic styles which are designed to render using the most appropriate available font, or a users preference.

The three most supported types of font are:

 <font face="sans-serif">Sans Serif</font><br>
 <font face="serif">Serif</font><br>
 <font face="monospace">Monospace</font><br>

Less common but also available are:

 <font face="fantasy">Fantasy</font><br>
 <font face="cursive">Cursive</font>

In your browser these are shown as:

Sans Serif (This is a smooth font designed for on screen)
Serif (This is not smooth and looks best on paper)
Monospace (This is a fixed-width font designed for computer code)
Fantasy (This is a happy font used for less serious pages)
Cursive (This is a handwriting font again just for more interest)

Learning HTML

Previous: HTML/Fonts_and_colours — Next: HTML/Tables