HTML and CSS Reference
In-Depth Information
The catch here is that several units of measure are available. Perhaps the simplest is the
percentage size, relative to the current font size being used. So, to make the font twice as
large as it is currently, just use the following:
<p>
This text is normal sized, and this text is
<span style=”font-size: 200%”>
twice that size
</span>
.
</p>
A number of length units are also available that you can use to specify the font size in
absolute terms. I discuss the popular ones in Lesson 10. In the meantime, just know that
there are two kinds of length units:
relative units
and
absolute units
. Relative units are
sized based on the size of other elements on the page and based on the dots per inch set-
ting of the user's display. Absolute units are sized based on some absolute reference. For
example, the
pt
(point) unit is measured in absolute pixels. To set your text to be exactly
12 pixels high, the following specification is used:
<p style=”font-size: 12px”
>This text is 12 pixels tall.<
/p
>
CAUTION
One thing to watch out for: When you specify units in CSS, you
must leave no spaces between the number of units and unit spec-
ification. In other words,
12pt
and
100%
are valid, and
12 pt
and
100 %
aren't.
You can do another thing with the
font-size
property that's not possible with the
<font>
tag: specify line height. Let's say you want to use double-spaced text on your
page. Before CSS, the only way to achieve the effect was to use the
<br>
tag inside para-
graphs to skip lines, but this approach is fraught with peril. Depending on how the user
has sized her browser window, pages formatted using
<br>
in this manner can look truly
awful. To set the line height using CSS, you can include it in your font size specification,
like this:
font-size: 100%/200%
. In this case, the size of the font is
100%
—the default—
and the line height is
200%
, twice the standard line height.
DO
DON'T
Do list backup fonts when specifying a
font family to make it more likely that
your users will have one of the fonts
you specify.
Do take advantage of the ability to
change the line height to improve
readability.
Don't use too many different fonts on
the same page.
Don't use absolute font sizes with CSS
if you can help it, because some
browsers won't let users alter the text
size if you do so.
