If you apply CSS font-size to the body element how do you handle nesting tags and inheritance?

Question

I am redesigning a site with a lot of old content. The primary design change is making the site elastic to fill various screen sizes. I am using the font-size in the body element as the mechanism to do this and setting any measurements to ems. This works as expected but I am having trouble when I find a nested element that also has font-size specified. In the example below I show how inserting a span tag inside of a p tag that has a class with font-size assigned to it causes the font-size to be inherited and essentially applied twice. I know this is how it works but how do I deal with it? I run into this a lot with links and lists and styles for bolding text.

The reason the body gets set to 1em is so that I can detect screen resolution and change the value of the font-size to make the entire design shrink or grow proportionally. All of the design elements have been converted from px to em.

Nice example here: http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

I think the only way around it is to edit the existing posts and updating the styles used to new ones this into consideration. There are hundreds of posts....really hoping there may be something I am missing.

This is a basic example. Any suggestions?

    <style type="text/css">
    html {
        font-size:100%;
    }
    body {
        font-size:1em;
    }
    .smalltext, ul, a {
        font-family: "Century Gothic", Arial, sans-serif;
        font-size: .75em;
    }
    .boldNavy {
        font-family: "Century Gothic", Arial, sans-serif;
        font-size: .75em;
        font-weight:bold;
        color:navy;
    }
    </style>

    <div>
      <p class="boldNavy">Here is the bold text as it should appear</p>
      <p><a href="#">A Link as it should appear</a></p>
      <p class="smalltext">Text as it should appear, now look at what happens when you put tags inside each other.</p>
      <p class="smalltext"><span class="boldNavy">The bold text is smaller here since it is inheriting font-size from the p tag.</span> this is my regular text <a href="#">and a link</a>.  The paragraph goes on and on...</p>
      <ul>
        <li><span class="boldNavy">Bullet List 1</span><br />
          This is the description and <a href="#">a link</a></li>
        <li><span class="boldNavy">Bullet List 2</span><br />
          This is the description and <a href="#">a link</a></li>
      </ul>
    </div>

Answer 1

Setting e.g. font-size: .75em does not cause inheritance. Quite the opposite: it prevents inheritance. But it sets the font size to 3/4 of the font size of the parent element. This seldom makes sense (it normally makes the font too small if the parent element font size was normal copy text size), but most importantly, just don’t set font size that way if you don’t mean it.

There is no magic cure to font size settings (though there is a lot of snake oil being merchandised). For example, if you wish to reduce font size for a list of links—you shouldn’t, but let’s assume you do—then set font-size on the ul containing the list, and leave it that. It would be pointless (even absurd) to also set reduced font size on a elements inside such a list, for example.