I Shot the Serif
Size Does Matter
|
| ||||
| ||||
|
|
Next in line comes the font-size property.
The font-size property
| Property: | font-size |
| Accepted values: | An absolute or relative font size, a length, or a percentage |
| Initial value: | medium |
| Applies to: | All Elements |
| Inherited: | Yes |
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>
xx-large
x-large
large
medium
small
x-small
xx-small
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>
Double Normal Half.
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" "http://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...
