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 size values, which you’ll need to
understand before you can explore larger
and
smaller
. First, though, we need to explore how
fonts are sized in the first place.
In fact, the actual 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. 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, ...
Get Cascading Style Sheets: The Definitive Guide, Second Edition 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.