Course HTML - Lesson 4: Fonts

In this lesson you learn how to change the font, the font-size and the text-color.

The font-tag

Adjusting the font (font, font-size and text-color) is done with the -tag in HTML. The -tag has a few attributes.

Changing the font

Changing the font is done with the face attribute. Here an example:

<html>
    <head>
        <title>Title of the website</title>
    </head>
    <body>
        <font face="Comic Sans MS">
            This text is written in the font Comic Sans MS
        </font>
    </body>
</html>

This is the result of that example HTML-code:

This text is written in the font Comic Sans MS

You can as well use different fonts, separated by comma's. The computer then checks if the font is installed, if it is, it chooses that font. If the font isn't installed, the computer checks the next font. Here an example:

<html>
    <head>
        <title>Title of the website</title>
    </head>
    <body>
        <font face="Comic Sans MS, Arial, Courier New">
            This text is written in Comic Sans MS, or, if your system
            doesn't support that font, it is shown in Arial. If your
            system doesn't support Arial, the text is shown in Courier New.
        </font>
    </body>
    </html>

This is the result of my example HTML-code:

This text is written in Comic Sans MS, or, if your system doesn't support that font, it is shown in Arial. If your system doesn't support Arial, the text is shown in Courier New.

Changing the font-size

In HTML you can also change the font-size. That is done with the -tag as well, with the size-attribute. You can choose an absolute value, or a relative value. The text size is always between 1 en 7, 1 being the smallest font-size, and 7 being is the biggest font-size.
Here an example of size 7 and size 1:

<html>
    <head>
        <title>Title of the website</title>
    </head>
    <body>
        <font size="7">
            This text is in font-size 7, the biggest possible.
        </font>
        <br>
        <font size="1">
            This text is in font-size 1, the smallest possible.
        </font>
    </body>
</html>

This is the result of that HTML-code:

This text is in font-size 7, the biggest possible.
This text is in font-size 1, the smallest possible.

Those were absolute values. As I said before, you can also choose relative values. If you do that, you tell the computer how much bigger or smaller the size must be compared to your standard font-size. Because the standard font-size is 4, you can use the values -3 (4 - 3 = 1; the smallest font-size) up to +3 (4 + 3 = 7; the biggest font-size). Another example about the relative values:

<html>
    <head>
        <title>Title of the website</title>
    </head>
    <body>
        <font size="+1">
            This text is 1 bigger than normal.
        </font>
        <br>
        <font size="-1">
            This text is 1 smaller than normal.
        </font>
    </body>
</html>

It looks like this:

This text is 1 bigger than normal.
This text is 1 smaller than normal.

Changing text-color

In HTML you can change the text color with the -tag as well, this time with the color-attribute. It is done like this:

<html>
    <head>
        <title>Title of the website</title>
    </head>
    <body>
        <font color="red">
            This text is red.
        </font>
        <br>
        <font color="green">
            This text is green.
        </font>
    </body>
</html>

Dat ziet er zo uit:

This text is red.
This text is green.

For more information about the possible colors, look at my HTML Colors-page.

Font, font-size and text-color all in one?

If you want to change the font, font-size and text-color all at once, it isn't necessary to use the -tag, but you can place them behind each other, just like with the other tags:

<html>
    <head>
        <title>Title of the website</title>
    </head>
    <body>
        <font color="purple" size="5" face="Courier New">
            This text is purple, very big and has the font Courier New.
        </font>
    </body>
</html>

The result is:

This text is purple, very big and has the font Courier New.

You now know how to use different fonts, font-sizes and text-colors. In the next lesson, you learn how to insert pictures and images.

⇒ Go on with Lesson 5: Images
← Go back to Lesson 3: Text Decoration
↵ Go back to the HTML-course

Was this information useful? If so, please consider linking to this website:

<a href="http://www.simondevries.com/en/programming/html/course/fonts.php" title="Lesson 4: Fonts">Lesson 4: Fonts - www.simondevries.com</a>

Thank you!

Menu

Course HTML - Lesson 4: Fonts

The font-tag

Changing the font

Changing the font-size

Changing text-color

Font, font-size and text-color all in one?

Info

Contact

Special Thanks To: