In HTML the font appearance was set using the <font> tag. Additional parameters being included within the opening part of the font tag to define the colour, size and font.
Colour
Throughout the use of website code, be it HTML, CSS or JavaScript the English word colour is replaced by its American spelling of color. If your text isn’t showing the colour you are expecting its worth checking your spelling.
The example below shows some text wrapped by the font tag, to set the colour to blue, followed by the rendered text.
Text some of which is <font color=”blue”>blue</font> in colour.
Text some of which is blue in colour.
In the above example the colour is set using a named colour. There is a limited set of colours which are known by their colour name.
Colour is also defined using the RGB values color=”#0000ff”. The colour is defined by 3 pairs of numbers, representing the combination of red, green and blue which forms the colour. Because the numbers used are in hexadecimal this translates to a number between 0 and 255 (decimal) for each of the three colours.
Size
The size parameter may be used to control the size of the text. size=”2″ will give a larger font than size=”1″.
The example below illustrates a part of a sentence wrapped with the font tag, with a size setting of 1. The code is given first, followed by the rendered text.
Text used to illustrate <font size=”1″>two</font> different <font size=2>sizes</font> of font.
Text used to illustrate two different sizes of font.
Using numbers to represent the font size, as in the above example, will provide for relative font sizes. Alternatively the font sizes may be defined by their point size, size=”10pt”. text defined in this way will be rendered to the defined size. The size descriptions commonly used are:
- numeric 1 to 5
- pixels (px)
- points (pt)
- relative to a fixed value (em)
- descriptive (larger, smaller)
Font Face
To define the font-face to be used add face=”” to the tag, for example:
<font face=”arial”>Sample text</font>
Historically 10 different fonts were available across a range of operating systems. Other fonts could be specified but the availability of the font on the computer was not guaranteed and hence fonts used were restricted to these 10. The list of fonts is:
arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, verdana.
Hexadecimal Numbering
It is more usual to represent the colours assigned to a font using hexadecimal notation and RGB. Examples of this are:
#ff0000 – red
#00ff00 – green
#ffff00 – yellow
In the above examples the three colour components making up the colour are given as two sets of hexadecimal numbers.
A hexadecimal number is to the power of 16. Instead of counting from 0 to 9 we count from 0 to 15. To represent this the numbers 0 to 9 and the first 6 characters of the alphabet. are used. An example is the decimal value 12, which in hexadecimal notation is c.
Table of hexadecimal numbers
| Hex | Decimal | Hex | Decimal | Hex | Decimal |
|---|---|---|---|---|---|
| 0 | 0 | 10 | 16 | 20 | 32 |
| 1 | 1 | 11 | 17 | 30 | 48 |
| 2 | 2 | 12 | 18 | 40 | 64 |
| 3 | 3 | 13 | 19 | 50 | 80 |
| 4 | 4 | 14 | 20 | 60 | 96 |
| 5 | 5 | 15 | 21 | 70 | 112 |
| 6 | 6 | 16 | 22 | 80 | 128 |
| 7 | 7 | 17 | 23 | ff | 255 |
| 8 | 8 | 18 | 24 | ||
| 9 | 9 | 19 | 25 | ||
| a | 10 | 1a | 26 | ||
| b | 11 | 1b | 27 | ||
| c | 12 | 1c | 28 | ||
| d | 13 | 1d | 29 | ||
| e | 14 | 1e | 30 | ||
| f | 15 | 1f | 31 |
Notes.
Old HTML code uses the <font> tag. However, in the latest XHTML and HTML 5 compliant code it is replaced by the <span> tag with the font parameters defined in the style parameter. An example of this change is the replacement of
some <font color=”blue”>blue</font> text
by the text
some <span style=”color:blue;”>blue</span> text
Where possible it is better to transfer the styling of fonts to the CSS flies associated with a website. Elements on a web page can then be assigned a class. This allows the styling throughout a website to be controlled from a small number of files, making changes easy to implement across the whole of a website.
