Maddog's HTML Primer for Real People

Chapter 4, Lesson 10

Ch 4, L 10 - More Control Over Font Size

If you already know how to use the 'FONT' tag with its 'SIZE' attribute to control text size, you can skip this lesson.

We can apply yet more control over font size in the browser display by using 'FONT' features in our document. The applicable tag pair is

.

In an earlier lesson (about paragraph alignment), we encountered the use of tag attributes to modify browser behavior. The 'FONT' tag pair, as you see it above, won't do anything. However, by including a tag attribute called 'SIZE' inside the opening tag, we can modify the size of the font being displayed in the browser screen. The tag pair is very powerful, when used with its embedded attributes, as we shall demonstrate.

In this lesson we will learn to modify the 'SIZE' attribute for the 'FONT' tag. We will show how to adjust the value of that attribute so as to adjust the size of the font being displayed on the screen.

Let's start with the smallest font size, value '1'. The valid tag pair would look like this:

.

As with other tags we've seen with attributes, a "space" is required between the '<FONT' and the ' SIZE='. Additionally, it's good practice to eliminate any space on either side of the '=' sign. When the browser encounters the opening .tag , it switches inline (i.e., without line-breaks) from using the default font to using the designated font (represented by attribute value '1'.) From that point, until it encounters the closing tag, it prints text in the designated font (in this case, the smallest available font).

There are 7 possible 'SIZE' attribute values, ranging from the smallest at SIZE=1, to the largest at SIZE=7.

Let's play the music:


Here's our normal (default) font.<BR>
<FONT SIZE=1>Here's our font at 'SIZE=1', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
<FONT SIZE=2>Here's our font at 'SIZE=2', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
<FONT SIZE=3>Here's our font at 'SIZE=3', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
<FONT SIZE=4>Here's our font at 'SIZE=4', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
<FONT SIZE=5>Here's our font at 'SIZE=5', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
<FONT SIZE=6>Here's our font at 'SIZE=6', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
<FONT SIZE=7>Here's our font at 'SIZE=7', now <B>bolded</B>, 
     now<I> italicized</I>.</FONT><BR>
Here's our normal <FONT SIZE=6>(boring)</FONT> font again.<BR>

Here's our normal (default) font.
Here's our font at 'SIZE=1', now bolded, now italicized.
Here's our font at 'SIZE=2', now bolded, now italicized.
Here's our font at 'SIZE=3', now bolded, now italicized.
Here's our font at 'SIZE=4', now bolded, now italicized.
Here's our font at 'SIZE=5', now bolded, now italicized.
Here's our font at 'SIZE=6', now bolded, now italicized.
Here's our font at 'SIZE=7', now bolded, now italicized.
Here's our normal (boring) font again.

If you look at the fonts carefully, you can probably see which size is the default for your browser. On mine, its 'SIZE=3', and that's probably typical. Also, notice how small the 'SIZE=1' font is. It may not be very readable on some screens (without your coke-bottle peepers, that is). Finally, take notice of the last line, which was included to demonstrate that this tag is an inline feature.

By the way, if you don't see any change in size in the above demonstration, your browser does not support the 'FONT' tag. However, this doesn't prevent you from using it in your HTML files, if you are careful to visualize how it will appear on the remote browser.

Overseer: Monty Northrup ...

... leave e-mail ...