Schriftgrößen mit rem-Werten

Die Benutzung der relativen Schriftgröße em hat bei mir immer etwas für Bauchschmerzen gesorgt. Zwar ist die Nutzung einer vererbbaren, relativen Größeneinheit sehr flexibel, bringt es aber doch einige Schwierigkeiten mit sich. Das Problem ist für mich, dass hier immer vom Elternelement ausgegangen wird, wo es schwierig wird den Überblick zu behalten. Ändert sich was in der Struktur kommt man nicht drum herum die drunterliegenden verschachtelten Ebenen zu kontrollieren und nachzubessern..

Ausgehend von einem Basiswert von 62,5%, ergibt es sich folgendermaßen.

body{font-size: 62.5%;}       //setz Basis auf 10px
h1{ font-size: 2em; }         //20px
p { font-size: 1.5em; }       //15px
.content{ font-size: 1.5em;}  //15px
.content p {font-size: 1.5em;} //22.5px

Dies ist einer der Gründe warum ich em immer gerne ignoriert habe. Hier ein Fiddle, was ich vorbereitet habe. Wildes ausprobieren natürlich erwünscht.

Der rem-Wert

Nun habe ich aber zum ersten Mal von rem - oder root em gehört. Wie der Name schon sagt, ist der em-Wert nun nicht relativ von der Elternklasse, sondern von der Wurzel - dem root/body - der Seite. Es wird also im body (oder html) nur einmal die Basisgröße angegeben und der rem-Wert errechnet sich aus dieser Größe.

Hier für gibt es eine einfache Formel: Pixelgröße / Rootgröße = rem-Wert

Wurde also im Root eine Größe von 14px angegeben und ein Element soll den Wert von 12px bekommen, rechnet man 12/16 und bekommt den Wert von 0,75rem.

body{font-size: 62.5%;}       //setz Basis auf 10px
h1{ font-size: 2rem; }         //20px
p { font-size: 1.5rem; }       //15px
.content{ font-size: 1.2rem;}  //12px
.content p {font-size: 1.5rem;} //15px

Hier eine Version des oben verlinkten Beispiels mit rem-Werten. Auch hier ist Ausprobieren erwünscht.

Kompatibilität

Aktuelle Browser unterstützen rem bereits. Nur die älteren Internet Explorer kennen dieses Problem nicht. Wer also den IE bis Version 8 unterstützen will, wird nicht um einen Fallback drum rum kommen. Dieser ist aber relativ simpel.

font-size: 0.75rem; /*gute browser*/
font-size: 12px; /*böse Browser*/

Klingt erstmal unsinnig rem überhaupt zu nutzen, wenn sowieso ein px-Wert angegeben werden muss. Aber in Zeiten von CSS Preprozessoren ist dieses dank Mixins eigentlich kein Problem mehr.

@baseFontSize: 20;
.font-size(@font-size: @baseFontSize) {
    @rem: (@font-size / @baseFontSize);
    font-size: @font-size * 1px;
    font-size: ~"@{rem}rem"; 
}

Less Beispiel

Fazit

Ich werde jetzt nicht anfangen alle bestehenden Projekte auf rem umzustellen, aber in Zukunft wird es für mich sicherlich eine Option sein. Besonders im Bereich des Responsive Designs sehe ich da große Vorteile.

Links