HTML/Fonts and colours

From Wikiversity
Jump to navigation Jump to search

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[edit]

The colours of the text can be changed like this:

 {{font|color=#FF0000|Red text}}

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}}
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[edit]

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=x-small|Font size 1}}<br>
 {{font|size=small|Font size 2}}<br>
 {{font|size=medium|Font size 3}}<br>
 {{font|size=large|Font size 4}}<br>
 {{font|size=x-large|Font size 5}}<br>
 {{font|size=xx-large|Font size 6}}<br>
 {{font|size=xx-large|Font size 7}}<br>

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[edit]

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

 {{font|face=Courier new|Courier new}}<br>
 {{font|face=Verdana|Verdana}}<br>
 {{font|face=Arial|Arial}}<br>

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}}<br>
 {{font|face=serif|Serif}}<br>
 {{font|face=monospace|Monospace}}<br>

Less common but also available are:

 {{font|face=fantasy|Fantasy}}<br>
 {{font|face=cursive|Cursive}}<br>

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: Basic formatting in HTMLNext: Links in HTML