Guide to HTML
Using Fonts

<basefont> | <big> | <font> | <small>

<basefont>

This code sets the size of the base font.

Syntax:

<basefont size=1...7 color="color" face="face">

The size is required, the rest of the modifiers is optional.

There is no closing tag. For explanation of the other modifiers, see the <font> tag.

Source:

<basefont size=2>This is basefont size 2.<br>
<font size=+2>Now with an increment of 2.</font><br>
<basefont size=3>This is basefont size 3.<br>
<font size=+2>Now with an increment of 2.</font><br>
<basefont size=4>This is basefont size 4.<br>
<font size=+2>Now with an increment of 2.</font>

Result:

This is basefont size 2.
Now with an increment of 2.
This is basefont size 3.
Now with an increment of 2.
This is basefont size 4.
Now with an increment of 2.

Top


<big>...</big>

Font size changing code.

Syntax: <big>...</big>

The text between the opening and closing tag will be displayed in a slightly larger font, similar to the result of the <font size=+1> code. See also <font> and <small>.

Source:

The big brown fox jumps over the lazy dog.<br>
<big>The big brown fox jumps over the lazy dog.</big><br>
<font size=+1>The big brown fox jumps over the lazy dog.</font>

Result:

The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.

Top


<font>...</font>

Use this code to change the font's size or color.

Syntax:

<font [face=font name] [size=[+|-]size] [color=color]>...</font>

The current font can be changed into another font by specifying its name. However, the newly selected font must be available, otherwise this tag will be ignored by the browser. Therefore, it can be wise only to use standard kind of fonts, like Roman or Times New Roman.

The font's size can be specified as an absolute value or relative to the current size, without changing the actual size itself. The size can range from 1 up to 7 inclusive. See also <big> and <small>.

The color index number is a six digit hexadecimal code for the values for Red, Green and Blue, i.e. RRGGBB. You can specify the index in three different ways:

  1. "rrggbb"
  2. #rrggbb
  3. Also, a word can be used, such as "teal", "navy", or "maroon".

There are 16 colors represented by their names:

Name Value Example Name Value Example
Black #000000 Green #008000
Silver #C0C0C0 Lime #00FF00
Gray #808080 Olive #808000
White #FFFFFF Yellow #FFFF00
Maroon #800000 Navy #000080
Red #FF0000 Blue #0000FF
Purple #800080 Teal #008080
Fuchsia #FF00FF Aqua #00FFFF

Note:

Example: Change the current font

Source:

<font face="Courier">This is Courier: The big brown fox jumped over the lazy fox.</font>
<font face="Arial">This is Arial: The big brown fox jumped over the lazy fox.</font>
<font face="Times New Roman">This is Times New Roman: The big brown fox jumped over the lazy fox.</font>

Result:

This is Courier: The big brown fox jumped over the lazy fox.
This is Arial: The big brown fox jumped over the lazy fox.
This is Times New Roman: The big brown fox jumped over the lazy fox.

Note:

Example: Specifying more than one font

You can also specify more than one font, seperated by commas. If one font is not available, the next one may be. Here is an example.

Source:

<font face="arial,helvetica,sans-serif">The big brown fox jumped over the lazy fox.</font>

Result:

The big brown fox jumped over the lazy fox.

Note:

Example: Absolute change in font size

Source:

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

Result:

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

Example: Relative change in font size

Source:

<font size="-2">Font size -2</font> <font size="-1">Font size -1</font> Regular text <font size="+1">Font size +1</font> <font size="+2">Font size +2</font> <font size="+3">Font size +3</font>

Result:

Font size -2 Font size -1 Regular text Font size +1 Font size +2 Font size +3

See also big and small.

Note:

Example: Change the font color using an index code

Source:

This is <font color="ff0000"><b>RED</b></font>, <font color="ffffff"><b>WHITE</b></font, and <font color="0000ff"><b>BLUE</b></font>.

Result:

This is RED, WHITE, and BLUE.

Example: Change the font's color using words

Source:

This is <font color="red"><b>RED</b></font>, <font color="white"><b>WHITE</b></font>, and <font color="blue"><b>BLUE</b></font>.

Result:

This is RED, WHITE, and BLUE.

Top


<small>...</small>

Font size changing code.

Syntax:

<small>...</small>

The text between the opening and closing tag will be displayed in a slightly smaller font, similar to the result of the <font size=-1> code. See also <font> and <big>.

Example:

Source:

The big brown fox jumps over the lazy dog.<br>
<small>The big brown fox jumps over the lazy dog.</small><br>
<font size=-1>The big brown fox jumps over the lazy dog.</font>

Result:

The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.



Paragraph separator