Nicht nur bei Randmenüs können unschöne Dinge passieren, wenn ein Benutzer die Schriftgröße in seinem Browser verändert. Mit relativen Style-Angaben skalieren alle Texte mit der Schriftgröße und behalten ihre Proportionen. Dadurch werden die Texte nicht umgebrochen und sie fallen auch nicht „aus dem Rahmen“.
Die em-Angabe bezeichnet die relative Gesamthöhe eines Fonts mit Leerräumen und bezieht sich auf die Schriftgröße des Elternelements.

<div style="font-size:21px;“> (21px absolut als Elternelement)
  <div style="font-size:0.9em;"> (90% -> 18px)
    <div style="font-size:0.9em;"> (90% -> 16px)
    </div>
  </div>
</div>

An der Ausgabe der drei verschachtelten DIV-Container des Beispiels erkennt man recht gut, wie sich die relative Änderung des zweiten und dritten DIV-Containers auf die Darstellung auswirkt:

(21px absolut als Elternelement)

(90% entspricht 18px)

(90% entspricht 16px)