Exemple de cascade de font-size

body        { font-size:16px; font-family: verdana,arial,sans-serif; }
.boite1     { width:600px; height:280px; margin:10px auto; border:1px solid red; color:red; }
.boite1     { font-size:1em; }
.taille2    { font-size:100%; }
.boite2     { font-size:90%; color:green;  width:500px; height:200px; margin:0 auto; border:1px solid green; }
.boite3     { font-size:80%; color:blue; width:400px; height:150px; margin:0 auto; border:1px solid blue; }
.boite4     { font-size:70%; color:black; width:300px; height:100px; margin:0 auto; border:1px solid blue; }

<div class="boite1">
Voici du texte en 1em de base 16px<br />
<span class="taille2">Voici du texte à 100%=1em de base de 16px</span>
    <div class="boite2">
    Ce texte est à 90% du parent qui est de base 16px.
        <div class="boite3">
        Ce texte est à 80% du parent qui est à 90% de base 16px.      
            <div class="boite4">
            Ce texte est à 70% du parent qui est lui à 80% de son parent qui est lui-même à 90% de base 16px.
            </div>      
        </div>
    </div>
</div>

Voici du texte en 1em de base 16px
Voici du texte à 100%=1em de base de 16px

Ce texte est à 90% du parent qui est de base 16px.

Ce texte est à 80% du parent qui est à 90% de base 16px.

Ce texte est à 70% du parent qui est lui à 80% de son parent qui est lui-même à 90% de base 16px.