Tutorial 22: The Font of Foulness, Part I: Size Matters - HTML with Style | 3

Tutorial 22: The Font of Foulness, Part I: Size Matters

Font sizes using FONT

The first and most widely used use of the FONT element is to control font size. Take the following example, for instance:

<P>Check out our price list for a look at some 
<FONT SIZE="+4">big savings</FONT>!</P>

Subtle, no? The SIZE attribute works in the following way: There are seven font sizes, unimaginatively named "1" through "7". The default is 3. You can either explicitly set a font size by setting the SIZE attribute to one of the numbers between 1 and 7, or you can specify a relative font size by using a signed number like +4, as I've done above. This number will be added or substracted to the base font size (which is 3, but can be changed, as we'll see later). Here's a meaningless example that illustrates the seven font sizes:

<P>
<FONT SIZE="1">One</FONT>
<FONT SIZE="2">Two</FONT>
<FONT SIZE="3">Three</FONT>
<FONT SIZE="4">Four</FONT>
<FONT SIZE="5">Five</FONT>
<FONT SIZE="6">Six</FONT>
<FONT SIZE="7">Seven</FONT>
</P>
<P>
<FONT SIZE="-2">One</FONT>
<FONT SIZE="-1">Two</FONT>
<FONT SIZE="3">Three</FONT>
<FONT SIZE="+1">Four</FONT>
<FONT SIZE="+2">Five</FONT>
<FONT SIZE="+3">Six</FONT>
<FONT SIZE="+4">Seven</FONT>
</P>

FONT is bad because it is an text-level inline element that has to be used every time you change your font size (or other characteristics such as font face and color, as we'll see in the next tutorial). If you go the way of the Dark Side and start using it, you'll soon find hundreds of FONT elements all over your documents, increasing their size and making the source unreadable. The CSS way of using selectors to change the font sizes of various elements is much more elegant, useful and decreases download time immensely. The problem with CSS font sizing is that it's hideously broken, and replacing FONT elements with CSS isn't as straightforward as you might think; but before we go into that, let's look at some of FONT's Evil relatives. In the mean time, remember this about FONT: In general, avoid it like the plague.

https://www.internet.com/

Legal Notices.

URL: https://www.webreference.com/html/tutorial22/2.html

Produced by Stephanos Piperoglou
Created: June 14, 2000
Revised: June 15, 2000