Chapter 4, Lesson 11
Chapter 4, Lesson 11![[INDEX]](icon_bki.gif){kind=icon}
Ch
4,
L
11 -
Changing Relative Font Size
If you already know how to change the relative size of fonts, you can skip this lesson.
The '<FONT></FONT>' tag pair's 'SIZE=' attribute gives us the ability to control font size in the received document. Most of the time, though, we are not concerned about exactly what size the font is, as much as it's relative size compared to the text around it. For example, in this paragraph, the text which emphasizes the tag and attribute name is made one size larger than the default text size. I really have no idea what size or type of text is being displayed on your browser, and it really makes no difference to me. What I do want, however, is that the emphasized text show up "just a bit" larger than default text . In other words, I wanted to evoke a small, measured relative change in font size.
The HTML 'FONT' tag's 'SIZE=' attribute allows for specification of relative changes to font size. After the 'SIZE='attribute name, where we would normally insert the attribute value, we instead tell the browser how it should calculate the value. If we want to have the browser change to a font 2 sizes larger than the default font, we specify an attribute value of '+2', like so:
'SIZE=+2'
We can use any integer we want, although if we specify something ridiculous, like say '+25', the browser simply provides its largest font (equivalent to 'SIZE=7').
By using the ''-'' (minus) sign, relative 'SIZE' values can be used to make fonts smaller. For example:
'SIZE=-1'
makes the the font one size smaller than the current font. Lets see some demos:
Here's our normal (default) font. <FONT SIZE=+2>Here it is <B>2</B> sizes larger</FONT><BR> Here's our normal (default) font. <FONT SIZE=+25>Here it is <B>25</B> sizes larger (we wish...)</FONT><BR> Here's our normal (default) font. <FONT SIZE=-1>Here it is <B>1</B> size smaller</FONT><BR> Here's our normal (default) font. <FONT SIZE=-20>Here it is <B>20</B> sizes smaller (Eeeek!)</FONT><BR> Here's a trick to demonstrate "nesting": <FONT SIZE=-2>A <FONT SIZE=-1>B <FONT SIZE=-0>C <FONT SIZE=+1>D <FONT SIZE=+2>E <FONT SIZE=+3>F <FONT SIZE=+4>G <FONT SIZE=+3>H <FONT SIZE=+2>I <FONT SIZE=+1>J <FONT SIZE=+0>K <FONT SIZE=-1>L <FONT SIZE=-2>M </FONT></FONT></FONT></FONT></FONT></FONT> </FONT></FONT></FONT></FONT></FONT></FONT> </FONT>
Here's our normal (default) font.
Here it is 2 sizes larger
Here's our normal (default) font.
Here it is 25 sizes larger (wishful thinking...)
Here's our normal (default) font.
Here it is 1 size smaller
Here's our normal (default) font.
Here it is 20 sizes smaller (Eeeek! I don't think so...)
Here's a trick to demonstrate "nesting":
A B C
D E F
G H I
J K L
M
Notice how, in the second line, we specified a relative size of '+25' (an absurd number). And in the fourth line, we specified a relative size of '-20' (equally absurd). The browser, detecting our brazen action, provided us with the largest and smallest font, respectively.
A couple of things should be noted about these font controls. First, they are tag pairs, and therefore require a closing tag. Secondly, they can be nested. (Recall, we first introduced "nesting" in the chapter on 'BLOCKQUOTES'). The last line demonstrates nesting of the 'FONT' tags.
Here's a little hint for making sure you've nested with the correct number of tags: count the tags; the number of opening tags (of a particular type) should be the same as the number of closing tags.
By the way, if you don't see any change in size in the above demonstration, your browser does not support the 'FONT' tag. (I'm sure you'll live without it, as my mother used to say...)
... leave e-mail ...
