It is now time to add a bit of spice to the otherwise dry text you have been used to till now. Various properties of text can be changed using the <FONT> tag. Font type, size and color can be modified using the appropriate attribute of this tag.
I shall be discussing the following:
- FACE: It’s value/s specifies the font type.
- COLOR: Changes the color.
- SIZE: Changes Size.
Font FACE attribute
Face attribute takes the name of the font you want to use. Common fonts on the Windows system are Verdana, Arial, Times New Roman and Comic Sans MS.
<font face="Times New Roman">This should be displayed in Times New Roman</font> <font face="Arial">This should be displayed in Arial</font> <font face="Verdana">This should be displayed in Verdana</font> <font face="Comic Sans MS">This should be displayed in Comic Sans MS</font>
IMPORTANT: If you do not have the font installed in your system, the text will be displayed in the default font of your browser.
After reading the ‘IMPORTANT’ message above, you might be thinking… “What’s the use of changing the font when I don’t know what fonts are installed on the visitor’s computer?”.
Ha! Well my friend, HTML developers provide us with solution to this problem.
Let’s suppose you want the text to be displayed in a Sans-serif font. (These are fonts whose ends are blunt as opposed to serifed fonts that have strokes, flares or taperings at the ends). The common Sans-serif fonts on Windows are Arial, Verdana, Comic Sans MS. Since you do not know which of these is installed on the visitor’s computer, include all in the attribute!
<FONT FACE="Arial, Verdana, Comic Sans MS, Sans-serif">
This tells the browser to use Arial and if it is not present, use Verdana, or if that is missing too, use Comic Sans MS. If the browser cannot find any of these fonts (highly unlikely, on a Windows system), it should just use any Sans-serif font available.
Be sure to spell the font name correctly.
Font COLOR attribute
The attribute takes either the hexadecimal color value or just the color name. We shall leave the (lengthy) discussions on hexadecimal values for later and use color names here. Some common color names are Blue, Green, Red, Yellow, White, Black, Cyan, Magenta, Pink etc.
<font color="RED">Red Text</font> <font color="BLUE">Blue Text</font> <font color="GREEN">Green Text</font>
Font SIZE attribute
The size attribute takes a number from 1 to 7 as its value with 1 as the smallest and 3 the default.
<font size="1">Some Text</font> <font size="2">Some Text</font> <font size="3">Some Text</font> <font size="4">Some Text</font> <font size="5">Some Text</font>
Also, you can use relative values, + and -, for increasing or decreasing font size relative to the current size. For increasing relative font size use values +1 to +6 and for decreasing use -1 to -6.
