Percentage Measurements
One fairly reliable way to specify text size is in percent values. Percent values are calculated relative to the inherited size of the parent text. That “inherited” part is important, because it means that if you nest similar elements with percentage values, the affect is cumulative. It doesn’t take many levels of nesting before the text is unreadable.
In Figure 18-5, the
ul
element is set to a relative size
of 80%. If the body of the document is 16 pixels, that means the
ul
text will be 13 pixels (after
rounding). The nested ul
within that
list takes the same size setting (80%), but this time it is applied to
its inherited size (13 pixels), resulting in 10 pixel text, and so on
for each nested level.
Figure 18-5. Nested elements with percentage size values
- Style sheet
body {font-size: 24px;} ul {font-size: 80%;}
- Markup
<p>Lorem ipsum dolor sit amet.</p> <ul> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li><ul> <li>Consectetuer adipiscing</li> <li>Elit pellentesque</li> <ul> <li>Pharetra urna </li> <li>In laoreet tincidunt</li> </ul> </ul> </li> </ul>
Get Web Design in a Nutshell, 3rd 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.