Edit in JSFiddle

html {
  font-size: 20px;
  background-color: #d1e9ff;
}

body {
  font-size: 16px;
}

h1 {
  font-size: 16px;
  font-style: italic;
  color: #006CB2;
}

div {
  font-size: 1.2em;
}

span {
  font-size: 0.75em;
}

#startSizeBig {
  font-size: 48px;
}

ul {
  font-size: 0.82em;
}
<h1>
Schriftgrösse: 1.2em
</h1>
<br />
<div>Dies ist
  <div>ein hübsches
    <div>Vererbungsproblem
      <div>bei dem die Schrift
        <div>auf jeder Zeile
          <div>immer grösser wird
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<br />
<h1>
Schriftgrösse: 0.75em
</h1>
<br />
<div id="startSizeBig">
  <span>bei diesem Beispiel
    <span>wird die Schrift in jeder in-line Box
      <span>immer kleiner
        <span>bis es
          <span>schlussendlich
            <span>fast nicht mehr
              <span>lesbar ist.
              </span>
            </span>
          </span>
        </span>
      </span>
    </span>
  </span>
</div>
<br />
<h1>
Schriftgrösse: 0.82em
</h1>
<br />
<p>
Dies ist eine Liste mit Vererbungsproblemen:
</p>
<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
    <ul>
      <li>Unterpunkt 2.1</li>
      <li>Unterpunkt 2.2</li>
       <ul>
         <li>Unterunterpunkt 2.2.1</li>
         <li>Unterunterpunkt 2.2.2</li>
       <ul>
         <li style="font-size: 1rem;">Mit einer Grössenangabe in rem kann dies verhindert werden wenn nötig.</li>
        </ul>
      </ul>
    </ul>
</ul>