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.

Nested elements with percentage size values

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.