HTML and CSS Reference
In-Depth Information
Setting the Font Size
Tammy would like the Welcome heading on her home page to be displayed in slightly
smaller text than is generally set by a browser's internal style sheet. The style to change
the font size is
Including too many fonts
can make your page
difficult to read. Don't
use more than two or
three typefaces within a
single page.
font-size:
size
;
where
size
is a length measurement. Lengths can be specifi ed in four different ways:
• with a unit of measurement
• as a percentage of the size of the containing element
• with a keyword description
• with a keyword expressing the size relative to the size of the containing element
If you choose to specify lengths using measurement units, you can use absolute units
or relative units.
Absolute units
are units that are fi xed in size regardless of the device
rendering the Web page. They are specifi ed in one of fi ve standard units of measure-
ment: mm (millimeters), cm (centimeters), in (inches), pt (points), and pc (picas). Points
and picas might not be as familiar to you as inches, millimeters, and centimeters. For
comparison, there are 72 points in an inch, 12 points in a pica, and 6 picas in an inch.
Size values for any of these measurements can be whole numbers (0, 1, 2 ...) or decimals
(0.5, 1.6, 3.9 ...). For example, if you want your text to be 1/2 inch in size, you can use
any of the following styles:
Use absolute units only
when you can predict or
fix the size and dimensions
of the output device.
font-size: 0.5in
font-size: 36pt
font-size: 3pc
Note that you should not insert a space between the size value and the unit
abbreviation.
Absolute measurements are appropriate when you know the physical properties of
an output device and want to fi x a size to a specifi c value. Of course, this is not often
the case with Web pages that can be displayed on a variety of devices and under several
possible screen or page resolutions. To cope with the uncertainty about how their pages
will be viewed, many Web page designers opt to use
relative units
, which are expressed
relative to the size of other objects within the Web page. One commonly used relative
unit is the
em unit
. The exact meaning of the em unit depends on its use in the style
sheet. If the em unit is used for setting font size, it expresses the size relative to the font
size of the parent element. For an
h1
heading, the parent element is the Web page body.
Thus, the style rule
h1 {font-size: 2em;}
sets the font size of
h1
headings to twice the font size of body text. If body text is dis-
played in a 12-point font, this style will cause
h1
headings to be displayed in a 24-point
font. On the other hand, if the
h1
heading is nested within another element, such as a
section
element, the size of the
h1
heading will be twice the size of text in that parent
element. Context is important when interpreting the effect of the em unit.
One of the great advantages of relative units like the em unit is that they can make
your page
scalable
, allowing the page to be rendered the same way no matter what font
size is used by the browser. Setting the font size of
h1
headings to 1.5em ensures the
heading will be 50% larger than the body text for all users.
Another way to create relative font sizes is to express the font size as a percentage.
Like the em unit, percentages are based on the font size of the parent element. The style
h1 {font-size: 200%;}
sets the font size of
h1
headings to 200%, or twice the font size of body text.
