Lesson 9: HTML Font Styles, Sizes & Colors  

Related Links:
Fonts  |   Font Styles  |   HTML Fonts  |   HTML Colors  |  

     The FONT Element     

The HTML element FONT is an inline element used to change font sizes, font colors and font styles of the text in your webpages, but it is deprecated in HTML 4.0 in favor of cascading style sheets. The reason for this is simple: CSS (cascading style sheets) give you much more flexibility and many more styling options than the FONT element.

Being classified as deprecated, the FONT element might become obsolete in the future but may still be used with the DTDs (Document Type Definitions) HTML 4.0, subversions "transitional" and "frameset", but not in "HTML 4.0 strict". As it is supported by most browsers and still widely used today on many webpages and also appears in many of the website templates you might be using, I have decided to include this short lesson about the FONT element and its attributes, so you at least know it when you see it somewhere.

However, you shouldn´t be using it in the HTML code of your own webpages and I want to encourage you to use cascading style sheets instead - it´s so much better.

Due to its nature of being an inline element, FONT may be used inside all inline elements and block-level elements except PRE (the element for preformatted text, see 1stPage2000´s reference). The only things you can do with the FONT element are changing font sizes, font colors and font styles of the text of your webpages. For this purpose, the FONT element is used in combination with the attributes SIZE, COLOR and FACE like shown below.

  1. Font Sizes  

As you have seen in the previous lessons, the font used by default is the one which is set up as the default text font in your browser. Usually this is "Times New Roman", black color and size 3. To change the font size of the text on your webpages, you simply embed the text in the FONT element and add the SIZE attribute with a value between 1 (very small) and 7 (very big) to the opening font tag. See example below.

Display Example: This is how it looks like in your browser.

  2. Font Colors  

To change the text color you need to add the attribute COLOR to the opening FONT tag and assign it a value for the color. The color value can be any of the following 16 color names: black, silver, white, gray, maroon, red, blue, green, yellow, purple, fuchsia, cyan, lime, olive, navy, teal, aqua.

Instead of the color names, you can also use the hexadecimal numbers for the colors, which are specified according to the RGB value for each color. The hexadecimal numbers must be prefixed by the "#" sign. Examples: #000099 for dark blue or #FFFF99 for a faint yellow.

Don´t worry about hexadecimal numbers, the easiest way to find the correct code for any color is to use 1stPage2000´s color picker. Study the example below first and then watch the video to learn how to use the color picker.

Display Example: This is how it looks like in your browser.

Video button not working ? Click Here

  3. Different Fonts  

To change the font style from the default (Times New Roman) to a different style, simply add the attribute FACE to the opening FONT tag. As value for the FACE attribute you can use any specific font name such as "verdana", "arial", "georgia", "bookman old style", "comic sans ms" and many more. Alternatively you may use generic font styles such as "serif", "sans-serif", "cursive", "fantasy" and "monospace". The font face values are case-insensitive, i.e. it doesn´t matter whether you type "Arial" or "arial".

Beware ! Not all users might have all the font styles installed on their computers, so especially when you are planning to use very specific fonts, you should specify at least one alternative font style (either a more common font name or a generic font). Simply add one or two more comma-separated values to the FACE attribute, which is also shown in the example below.

Display Example: This is how it looks like in your browser.

In the next lesson you will learn how to format your HTML documents with Cascading Style Sheets. BTW - have you gone through the tutorial at one go ´til here ? How about a short break and a cup of coffee or tea ?