Size Does Matter - I Shot the Serif - HTML with Style

I Shot the Serif

Size Does Matter

Next in line comes the font-size property.

The font-size property

The font-size property accepts various types of values. One is an absolute size. There are five absolute font sizes, called Mini, Toyota, Volvo, Cadillac and GMC. Oh OK, there are actually seven, and they're called xx-small, x-small, small, medium, large, x-large and xx-large. But you get the picture. medium is the default font size, and each absolute size is scaled by a constant factor.

A little interlude here: CSS1 defined that this factor should be 1.5, and stated that this might not be right for different media. The authors of CSS2 decided that this was too large for them and so reduced it to 1.2. As usual, the authors of Explorer and Navigator took a completely different stand on this, but you can expect the different absolute sizes to be larger or smaller than each other, since they have fixed values in both browsers (skipping ahead to something we'll discuss in a future tutorial, these are identical to the seven sizes used in FONT SIZE="foo">, just in case you know what that is, which you shouldn't unless you've been cheating), but these values are relatively reasonable and will usually produce the desired effect with something like the following:

<P><SPAN STYLE="font-size: xx-large">xx-large</SPAN></P>
<P><SPAN STYLE="font-size: x-large">x-large</SPAN></P>
<P><SPAN STYLE="font-size: large">large</SPAN></P>
<P><SPAN STYLE="font-size: medium">medium</SPAN></P>
<P><SPAN STYLE="font-size: small">small</SPAN></P>
<P><SPAN STYLE="font-size: x-small">x-small</SPAN></P>
<P><SPAN STYLE="font-size: xx-small">xx-small</SPAN></P>

The second type of font size is a relative size, and that can be either smaller or larger. As these should probably indicate to you, they make the font larger or smaller, compared to the value it initially had (more on initial values when we discuss inheritance and cascading, so just take my word on it for now). If the font had an absolute size, this will skip one absolute size up or down, i.e. if the font had a size of x-large, giving it a relative size of smaller will make it large, and so on. If the font size is not one of the seven absolute sizes, it is scaled down or up by a reasonable factor. Surprisingly enough, Internet Explorer 4.0 handles this quite well. Navigator 4.0, on the other hand, tends to be a bit unreliable, so don't depend on a smaller followed by a larger to get you back where you started, as illustrated by something like this:

<DIV STYLE="font-size: xx-large"><P>Some text</P>
<DIV STYLE="font-size: smaller"><P>Some text</P>
<DIV STYLE="font-size: smaller"><P>Some text</P>
<DIV STYLE="font-size: smaller"><P>Some text</P>
<DIV STYLE="font-size: smaller"><P>Some text</P>
<DIV STYLE="font-size: smaller"><P>Some text</P>
<DIV STYLE="font-size: smaller"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
<DIV STYLE="font-size: larger"><P>Some text</P>
</DIV></DIV></DIV></DIV></DIV></DIV></DIV>
</DIV></DIV></DIV></DIV></DIV></DIV></DIV>

The example starts off with an absolute size of xx-large and then makes it smaller six times (making the smallest line theoretically equivalent to xx-small) and then makes is larger seven times, which should give us one step larger than xx-large for the last line, as it is with Explorer. Navigator, however, gives us a much larger result in the end. But the desired effect (i.e. to make the font larger) is achieved.

You can also specify the font size as a percentage, which is similar to a relative size. The size is scaled by the percentage relative to the default, like this:

<DIV STYLE="font-size: x-large">
<P><SPAN STYLE="font-size: 200%">Double</SPAN> Normal <SPAN
STYLE="font-size: 50%">Half</SPAN>.
</DIV>

Lengths as font sizes

Lastly, you can specify a font size as a length. A length is a special type of value in CSS, and we will discuss the various types of lengths in depth in a future tutorial. Suffice it to say, for now, that a length is a number, followed by a unit. One of the most useful units is the point, that is a popular unit of font size. The following example specifies various font sizes:

<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "https://www.w3.org/TR/REC-html40/loose.dtd">
<TITLE>Length Font Size Examples</TITLE>
<STYLE TYPE="text/css" MEDIA="screen">
#two { font-size: 2pt; }
#ten { font-size: 10pt; }
#twelve { font-size: 12pt; }
#fourteen { font-size: 14pt; }
#seventytwo { font-size: 72pt; }
.example { font-family: Garamond, Times, serif; }
</STYLE>
<BODY>
<P ID=two>2 point Serif</P>
<P ID=ten>10 point Serif</P>
<P ID=twelve>12 point Serif</P>
<P ID=fourteen>14 point Serif</P>
<P ID=seventytwo>72 point Serif</P>

So if it isn't your family and it isn't your size, maybe your weight is your problem? Or you just have the wrong style? Maybe you just have to face the fact that you're a variant...

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 20, 1998
Revised: Nov 3, 1998