HTML and CSS Reference
Using these keywords makes changing font sizes easy; however, you may feel slightly limited by them. What's
more, the CSS specification provides a guideline to browser vendors that suggests what size of font these keywords
should relate to. Although browsers do a good job of adhering to the guidelines, you may find inconsistencies
When you use a percentage value, the font size is relative to the parent element's font size—that which is inherited.
Assuming the inherited font-size of an element is 16px, if you declare that element's font-size should be
50% , the calculated font-size is 8px.
Using percentages offers a wide range of control over the size of a font and also allows a font to be resized easily.
However, because percentages relate to different factors depending on the property they are used on, they don't al-
low for a consistent workflow during the creation of a website. More on this topic when comparing percentages and
ems in a moment.
Absolute Length Units
Absolute length units are those such as pixels (px), centimeters (cm), inches (in), and so on. Pixels are the most com-
mon absolute length unit and allow for very specific control over the size of a font. Absolute length units are fixed,
however, and should be used only when the output environment is known. Because many types of devices access the
web nowadays, it is wise to avoid absolute length units because although a font size of 16px on a desktop may look
perfectly readable, on a much smaller device, it may be too small. By using absolute length units, you also prevent
users from being able to increase the size of text via their browser's built-in functionality.
Relative units are those such as em and ex. On the modern web, ems are the suggested unit for font-size . Much
like percentages, font sizes that use relative units are calculated relative to the parent element's font size and can eas-
ily be scaled where necessary.
To help you better understand why relative units are important—and in the long run save you time—Figure 11-2
shows Cool Shoes & Socks in Opera's Mobile Emulator. On a small device, notice how small the font is? Although
the Cool Shoes & Socks page is sized well for reading on a desktop computer, it's difficult to read on a mobile
In Figure 11-3, I modified the body rule set to increase the font-size from 62.5% to 1.2em . Because all the
fonts relate to that font-size , they are all scaled up, too, making the entire page much more readable on smaller