HTML Font Styles

Note: The HTML font styles discussed here (font size, font color and font face) will die a slow death someday. We know from the World Wide Web Consortium (W3C) that someday Cascading Style Sheets (CSS) will totally replace HTML font styles.

If you need a quick fix for an HTML styling problem see below. Otherwise, CSS is the preferred web styling technology and has been for years. If you are interested in CSS please see this beginner's article: CSS Tutorial.

If you are new to HTML please see this: HTML Tutorial for Beginners.

HTML Font Tag(s)


<font>your text goes here</font>

An attribute of an HTML font tag is used to specify the size, color or type of font for the text in your web pages (see below).

Font Size

Usually the default font size used by your browser is "3". To change the font size of the text on your web pages, you simply increase the font size number. For example, put this code in the HTML of one of your pages:

<p><font size="5">This is font size 5.</font></p>

This is what you will see in your browser:

This is font size 5.

Increase the font size number to increase the size of your text. Decrease the font size number to decrease the size of your text.

Font Color

Usually the default font color of the text in your browser is black. Put the following in the HTML of one of your web pages:

<p><font color="blue">This is blue colored text.</font></p>

This is what you will see on your web page:

This is blue colored text.

Insert the color "red" where "blue" is in the font tag above and the text will be red.

You can use any of the following colors: gray, maroon, red, blue, black, silver, white, fuchsia, cyan, lime, olive, navy, teal, aqua, green, yellow, purple.

Specifying Colors Using Hexadecimals

If you need colors other than those above you will have to use hexadecimals. Hexadecimals are made up of numbers AND letters, for instance '0000FF'. Try adding the following HTML code to a web page. These lines of code use hexadecimals to tell the browser what color the text is. The # in front of the hexadecimal number lets the browser know that a hexadecimal color is being used.

<p><font color="#FF0000">This will give you red colored text.</font></p>
<p><font color="#00FF00">This will give you green colored text.</font></p>
<p><font color="#0000FF">This will also give you blue colored text.</font></p>

There are many more hexadecimal colors. Here is a list: Hexadecimal Colors.

Font Face

To specify a particular font face simply use the following code:

<p><font face="verdana">This is the font face Verdana.</font></p>

This is what you will see on your web page:

This is the font face Verdana.

There are many different types of fonts: "arial", "georgia", "impact", "bookman old style", "comic sans ms", etc.

Not all users have all the font types installed on their computers. So if you specify that you want the "Comic Sans" font face, your visitor will only see it if they have that font installed on their computer.

So what do you do? You can do this:

<p><font face="Verdana, Arial, Helvetica, sans-serif">This is one of several font faces.</font></p>

The browser will display the text using the verdana font type if that type is installed on the computer. If that computer doesn't have the font type verdana installed the browser will look for arial. If that computer doesn't have either verdana or arial then it will use a san-serif that is on the computer. (San-serif is classification of font faces that don't have the little stylish strokes added to the top or bottom of the letters. San-serif literally means "without feet.")

Using Font Face, Font Size and Font Color Together:


<p><font face="verdana" color="blue" size="5">This text has font face = verdana, font color = blue, font size = 5</font></p>

HTML font styles will be around for a while. Don't worry about that. But, at some point you should decide to learn CSS. For more information about HTML font styles please see: More HTML Font Styles.

Website Building Tip

It's ok to use HTML font styles for now. In the distant future HTML font styles may not be supported by browsers.

You should style your website with Cascading Style Sheets. The sooner the better.