html tutorial, internet tutorials

  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.

<h1>Different Font Sizes</h1>

<p>Text in standard font, usually "Times New Roman" - size: 3 - color: black.</p>

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

  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.

<h1>Different Font Colors</h1>

<p>Text in standard font, usually "Times New Roman" - size: 2 - color: black.</p>

<font size="4" color="blue"> Font size 4, blue color </font>
<font size="5" color="green"> Font size 5, green color </font><br>
<font size="2" color="#FFFF00"> Font size 2, yellow color </font>
<font color="#FF0000"> Standard font size, red color</font>

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.

<h1><u>Different Font Faces, Colors and Sizes Combined</u></h1>

<p>Text in standard font, usually "Times New Roman" - size: 3 - color: black.</p>

<p><font face="verdana">font face Verdana</font></p>

<p><font face="Mistral" size="6" color="navy"> font face: Mistral, size: 6, color: navy</font></p>

<p><font face="Comic Sans MS">font face Comic Sans MS</font></p>

<p><font face="courier" size="2">font face Courier, size 2</font></p>

<p><font face="helvetica, arial" color="#006633"> font face Helvetica, alternatively Arial, color: dark green</font></p>

<h2><u>generic font styles</u></h2>

<p><font size="4">
<font face="cursive">cursiv (f.ex. Comic Sans MS)</font><br>
<font face="monospace">monospace (f.ex. Courier New)</font><br>
<font face="fantasy">fantasy (f.ex. Western)</font><br>
<font face="sans-serif">sans-serif (f.ex. Helvetica)</font><br>
<font face="serif">serif (f.ex. Times)</font>

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 ?

previous lesson top of page next lesson

    Web Design

  • Design and market your own professional-looking website with easy-to-use tools.

  The Lessons  

Skills & Tools
HTML Basics
The Head Section
The Body Section
Anchors & Links
Font Styles
Cascading Style Sheets
Website Layout
Domainname Registration
Website Logos & Buttons
Main Webpages
Legal Documents
Web Hosting Providers
Publishing Your Website

Editing Images


FAQ / Support


Cheap Website Hosting
DailyRazor offers a full featured hosting plan for only $ 1.66 per month. Best choice for people on a low budget for hosting one website.

Multiple Site Hosting
Some webhosts allow you to host several different websites under one hosting account. This makes your hosting costs per site very cheap. My favorite webhosts:

CSS Tutorial
"Styling with CSS" is a comprehensive and easy guide to web design with CSS for beginners. Highly recommended book that should be on your shelf.
Buy it from Amazon.

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
Page copy protected against web site content infringement by Copyscape