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, ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access