BASIC TEXT FORMATTING!

Web Design Lessons > Lesson 1-03-04: Changing Text Size, Text Color & Font Face

In this lesson of our free online web design course, we are going to add more flavor to our text by changing its color, size and font type. To do that, we're going to use the <font> tag along with "size", "color" and "face" attributes. Copy and paste the below HTML code into your notepad:

As our text indicates, we have created a red text with a size of 5, written in the "Arial" font by using the <font> tag and the "color", "size" and "face" attributes. Now, save your file as HTML and double-click it to open in your web browser. You should get the below output:

The font tag has only these three attributes - color, size and face. Color can be anything from black to white. You can use the name, or the color hex code (i.e. #FF0000,#559A2E, etc.) to indicate the color. The size can vary from 1 to 7, where 1 is the smallest and 7 is the biggest.

A Word About Font Faces

Font types (i.e. font "faces") are a bit of a grey area - there is a huge number of font faces on the internet, but very few of them can be used effectively; as most font faces can not be found on most end-users' machines. That means, if you use the rare face "Aircut" in your site, many people won't be able to view your site like you do, as they probably do not have the "Aircut" face installed on their computers. To negate this, you can define more than one font face (i.e. substitute font faces) for your text by separating them with a comma. For example you can use <font face="aircut,arial"> and the end user's browser will first look for the font face "Aircut", and if that face is not available, it will use "Arial" instead. The most commonly used font faces are: Times New Roman, Arial, Verdana, Courier, Mono, Serif and Sans-Serif. I generally prefer "Verdana".

Setting Attributes Of The <Font> Tag

Now that we've talked about font faces, let's resume our free online web design course by delving deeper into setting the attributes of the <font> tag.

When writing a <font> tag, you don't need to include all three attributes. You can use the <font> tag even if you only want to change the color of a certain text and not the size or the font face, for example. For that you need to include only the "color" attribute:

The output is:

Or you might wish to change the size of a certain text. For that you ought to use only the "size" attribute of the <font> tag:

In this case, our output would be:

Or maybe, you want to change the font face of your text. For that purpose, you can use the "face" attribute alone:

And we have this output:

You can also use two attributes at the same time:

To get an output like this:

Anyway, I am sure you get my point... :)

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Our basic text formatting lesson is over. Proceed to the next lesson of online web design course to learn about web colors and color hex codes.