Web Design in a Nutshell, 3rd Edition

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>