Font Sizes, Colors and Families

line.gif

Font Tag Syntax

The tag <font> has the syntax:

<font size=value color=value face=face_name_list> ... </font>

where the meanings of the attributes are:

size The size of the font.
color The color of the text.
face A list of face names for the text.

Font Sizes

In HTML there are seven predefined font sizes. When a number in the range 1..7 is specified for a font size, it is said that an absolute font size has been chosen. The reason for this terminology will be explained shortly.

The following fragment of HTML draws a line of text in font size 5.

<font size=5>This is size 5 text.</font>

The above code gives rise to the following.

This is size 5 text.

Exercise 3

Write a HTML document that satisfies the following criteria.

Take this link to see the solution of the exercise. You should view the source of the solution and compare it to that which you provided (browser menu option View/Source - but only when you have the solution on screen). Note that the tag <br> was used to satisfy the 'successive line' requirement. If the paragraph tag had been used in place of the break tag then the text lines would have had an interleaved blank line.

Absolute vs Relative Font Sizes

Browsers allow for the adjustment of the default proportional and monospaced fonts. The default proportional font is the font used to render standard text in documents. Thus, for those who prefer their text bigger, they merely need to adjust this value and the appearance of most documents changes accordingly. There are facilities in HTML to specify font sizes relative to the current default font size. In particular, the size attribute of the tag <font> is capable of doing just this. For example, the following HTML fragment demonstrates how to make text two font sizes bigger and two font sizes smaller.

<font size=+2>This text is two sizes bigger,</font>
<font size=-2>whereas, this text is two sizes smaller.</font>

The live version of the above sample is shown below.

This text is two sizes bigger,
whereas, this text is two sizes smaller.

The presence of the '+' sign and the '-' sign indicate that the adjustements to font size are made relative to the current default font size.

Color Values

If you are unfamiliar with hexadecimal notation, you should now view the section on the binary and hexadecimal number systems. In HTML, colors are formed as combinations of the three primary colors: red, green and blue. Color values specified in this way are referred to as RGB color values. The shade and intensity of a particular color is determined by the amount of each primary that is used to specify that color. In forming RGB values, the intensity of each primary color ranges from 00-ff (hex). To specify the color red, the hex value required is ff0000, whereas 00ff00 specifies the color green and 0000ff specifies the color blue.

The tag <font> allows text color to be changed (to green say) as follows:

<p><font color=#00ff00>This text is bright green.</font>

which displays as follows:

This text is bright green.

Exercise 4

Write a HTML document that satisfies the following criteria.

Take this link to see the solution of the exercise. You should view the source of the solution and compare it to that which you provided (browser menu option View/Source - but only when you have the solution on screen).

A variety of color effects can be obtained through mixing the primary colors. For example, the color orange can be obtained by combining red and yellow as in ff7f00; where twice as much red as yellow is used (and blue is absent). An orange with a red tinge may be formed by reducing the amount of yellow (as in ff6f00).

Named Color Values

Certain named color values are supported. These are shown in the table below.


aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow


Examples of these are shown below.


aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow

Exercise 5

Exercise 4 (above) displayed the three primary colors on the default background. This example is similar, except that a black background is used. Additionally, only named colors are used. Write a HTML document that satisfies the following criteria.

Take this link to see the solution of the exercise. You should view the source of the solution and compare it to that which you provided.

Changing Font Families

In the case of the tag <font>, the font family may also be chosen. The face attribute of the tag <font> allows for the change of font family. An example of how this is done is shown below.

<p><font face=Times size=+2>This is sentence is in the Times font,</font>
<p><font face=Arial size=+2>Whereas this sentence is in the Arial font.</font>

The above HTML fragment is shown live below. It may or may not have changed the font - depending upon your browser.

This is sentence is in the Times font,

Whereas this sentence is in the Arial font.

When supported, the face attribute of the font tag accepts a comma separated list of font family names. If the first named font is unavailable then the second font is chosen, and so on. If none of the listed fonts is available then the default font is used.

If the above change was successful then you should be able to see the difference between a serifed and non-serifed font (sanserif). A serifed font is one that has the little curly bits on the letters. Typically, a sanserif font (such as Arial) shows up better on darker backgrounds and (methinks) on computer displays. However, serifed fonts can be attractive, particularly when printed and when used for large headings on a computer display. If the above change was unsuccessful with your browser, don't panic - there are better ways to manipulate fonts in HTML than with the font tag (cascading style sheets) - but more on that later.

HTML contains many tags for formatting text. The next topic next.gif discusses some of these.