Font Size
The methods for determining font size are both very familiar and very different.
In a fashion very similar to the font-weight
keywords bolder
and lighter
,
the property font-size
has relative-size keywords called larger
and
smaller
. Much as we saw with relative font
weights, these keywords cause the computed value of
font-size
to move up and down a scale of absolute
values, which we’ll need to understand before we can explore
larger
and smaller
. First,
though, we need to explore how fonts are sized in the first place.
In fact, the relation of the font-size
property to
what you actually see rendered is determined by the font’s
designer. This relationship is set as an em
square
(some call it an em
box) within the font itself. This em square, and thus the font size,
doesn’t have to refer to any boundaries established by the
characters in a font themselves. Instead, it refers to the distance
between baselines when the font is set without any extra leading
(line-height
in CSS). It is quite possible for
fonts to have characters that are taller than the default distance
between baselines. For that matter, a font might be defined such that
all of its characters are smaller than its em square. Some
hypothetical examples are shown in Figure ...
Get Cascading Style Sheets: The Definitive Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.