„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten wie px, em und % gibt es mit rem einen neuen Bewerber, der das Beste der anderen Einheiten in sich vereint.

Von der Wurzel her betrachtet

Früher mal Standard: Schriftgrad per em oder %

Bis etwa 2008 galt es als weitgehend als Best Practice, den Schriftgrad im CSS so flexibel wie möglich zu definieren. Dazu wurden die Einheiten em oder % eingesetzt, relativ zur Standardeinstellung im Browser, die normalerweise bei 16px liegt.

Diese flexible Mischung servierte den Nutzern damals das beste Lese-Erlebnis, denn viele Browser hatten noch keinen Seitenzoom und der IE6 konnte mit px definierten Text überhaupt nicht zoomen, jedenfalls nicht ohne einen Eingriff in die Systemeinstellungen.

Sowohl bei em als auch % gab es in der Praxis aber Probleme mit der Vererbung der Schriftgrößen. Eine Prozentangabe ist immer relativ zu irgendetwas, meist zum Eltern-Element, und bei em ist das nicht anders:

  • Bei einer Box-Modell-Eigenschaft wie margin-bottom orientiert sich em an der Schriftgröße des Elements selbst. Ändert sich die Schriftgröße, ändert sich der Abstand, was zum Beispiel im Fließtext häufig ein gewünschter Effekt ist.
  • Bei der Schriftgröße hingegen gilt als Basis für ein em die Schriftgröße des Eltern-Elements. Eine Angabe von zum Beispiel 0.875em wird also bei jeder Verschachtelung ein Stückchen kleiner.

Fast wie bei Alice im Wunderland. Mal zu groß, mal zu klein, aber so richtig passen tut’s dann doch nie.

Die vorübergehende Emanzipation des px

Im Februar 2009 hielt Jens Grochtdreis in seinem Blogartikel „Die leidige Sache mit der Schriftskalierung“ ein kurzes Plädoyer für die Pixel. Moderne Browser hatten damals einen Seitenzoom und der IE6 wurde als Gegenargument immer weniger wichtig.

Ein Jahr später veröffentlichte Gerrit van Aaken einen Beitrag mit dem Titel „Warum ich Pixel für CSS-Schriftgrade verwende„. In der Diskussion unter Gerrits Bekenntnis zu px ging es hoch her, aber besonders bemerkenswert ist Kommentar #22 , in dem eine Einheit namens rem erwähnt wird, die den meisten Webdesignern bis dahin weitgehend unbekannt war.

Das „root em“: rem als neuer Stern am Schriftgrad-Himmel

Seit etwa 2011 wird das rem langsam aber sicher bekannter, denn es vereint die Vorteile von pxund em. Es ist genauso flexibel wie sein älterer Bruder em, umgeht aber dessen Nachteile bei der Vererbung, weil sich das „root em“ immer auf das Stammelement <html> bezieht (nicht auf <body>).

Um den Wert für rem zu erhalten, teilt man einfach die gewünschte Pixelgröße durch den Ausgangswert 16. Im CSS könnte eine solche Schriftgrad-Definition wie folgt aussehen:

1
2
3
4
html { font-size: 100%; } /* Browserdefault, 16px  */   
h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */  
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */   
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

Auf diese Weise lässt sich ganz einfach eine Kaskade von Schriftgraden aufbauen. Um den Schriftgrad irgendwann einmal größer oder kleiner zu machen, muss man nur die Basis ändern. Das Verhältnis von Fließtext zu Überschrift bleibt dabei immer gleich.

Das Fallback für alte Browser mit px

Das klingt fast zu gut um wahr zu sein, aber tatsächlich hat die Geschichte nur einen einzigen Haken: Alte Browser, wie immer. Auf http://caniuse.com/rem kann man sich einen guten Überblick verschaffen, und der sieht gar nicht so schlecht aus:

Can I use Rem units?

Die eigentlichen Schwachpunkte liefern der IE vor Version 9 sowie Opera Mini. Für diese beiden und alle anderen alten Browserkollegen kann man in seinen Stylesheets ein Pixel-Fallback einbauen, dass für das obige Beispiel so aussehen könnte:

1
2
3
4
5
6
7
8
9
10
11
12
13
html { font-size: 100%; }   
h1 { 
font-size: 28px; 
font-size: 1.75rem; 
}   
h2 { 
font-size: 22px; 
font-size: 1.375rem; 
}    
p { 
font-size: 14px; 
font-size: 0.875rem; 
}

Moderne Browser lesen und überschreiben im Rahmen der Kaskade den px-Wert mit dem rem-Wert, ältere hingegen nehmen die px-Anweisung und ignorieren die zweite Zeile. Perfekt.

Links zum Beitrag:

(dpe)

Ich bin Autor, Dozent und Webworker. Meine Spezialität ist es, komplizierte und 'trockene' Sachverhalte auf einfache und unterhaltende Weise darzustellen. Sie kennen mich vielleicht durch meine Bücher wie "Websites erstellen mit Contao 3", "Flexible Boxes" oder "Einstieg in CSS" (aka "das neue Little Boxes").

Sortiert nach:   neueste | älteste | beste Bewertung
Johannes
Gast

Sollte man für den Fallback wirklich die Einheit px verwenden oder doch lieber em?

Philipp
Gast

Habe von rem noch nie was gehört, hört sich aber sehr interessant an. Ich werde das mal ausprobieren, danke für den Beitrag!

Thomas
Gast

Mit SASS/LESS mixins kann man das Fallback ja automatisch einfügen, ist also kein mehraufwand (und man spart sich sogar das umrechnen von Pixeln) z.B.

@mixin font-size($px) {
font-size: $px * 1px;
font-size: 16 / $px * 1rem;
}

li {
@include font-size(12);
}

trackback

[…] […]

basti1350
Gast

Oh man, ich kann mich da noch an eine Diskussion mit einem Hardcore-Pixel-Verfechter auf einer anderen Seite erinnern… Gut das rem langsam aber sicher ankommt. Endlich kann man auf die Rechnerei mit em-Werten verzichten. Zum Fallback: hab auch eher zu em tendiert, aber wenn man sich schon die Rechnerei mit em macht für den Fallback, braucht man rem nicht mehr, also wie Herr Müller schon geschrieben hat ist px hierfür in Ordnung.

Eugen Kraft
Gast
Mir ist nicht ganz klar, warum die Vererbung hierbei als Problem gesehen wird. Sie ist ja durchaus so gedacht und wie alle Werte im CSS kann man auch diese falsch einsetzen. Wenn man dein Codebeispiel ansieht… html { font-size: 100%; } /* Browserdefault, 16px */ h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */ h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */ p { font-size: 0.875rem; } /* 14/16 = 0.875 */ …und es bliebe weitgehend bei diesen Definitionen, würde auch bei em als Maßeinheit keinerlei Probleme auftauchen und es würde sich auf die selbe Weise verhalten.… Read more »
Ralph Segert
Gast

Ich hatte es gestern noch mit rem versucht bei einer etwas komplizierten Skalierung einer zweizeiligen zentrierten Überschrift und einem Absatz, aber der Bezug zur Basis stellte sich nicht her. Jetzt weiss ich, warum. Nehmen Sie einfach HTML statt Body. ;)

Michael
Gast

Hatte rem bislang noch nicht wirklich beachtet. Wird sich dank diesem Beitrag sicherlich ändern. Toll erklärt! Danke!

Thomas Weitzel
Gast

REMarkable Peter – Danke!

Johannes
Gast

Gibt es eigentlich ein Skript, damit auch die Internet Explorer 8 und 7 rem verstehen und korrekt wiedergeben?

Vielhuber David
Gast

Interessant, man kann sich ja durchaus eine Vereinigung der beiden Welten vorstellen: Kritische Designelemente in der Navigation, die nicht in der Schriftgröße verändert werden sollten, werden pixelgenau gesetzt und Überschriften und Fließtext mit REM.

Lina
Gast

Da freut sich der Nutzer aber, wenn er die Navigation nicht lesen kann.

Yves Goergen
Gast
Ich kenne diese Pixeldiskussion nicht, vllt. weil ich mich nie daran beteiligt habe. Ich verwende einmal px ganz oben, den Rest setze ich mal so, mal so. Früher hab ich die Größeneinstellung meines Browsers mal tatsächlich verwendet – das scheint außer mir aber niemand zu tun, wie es sich anhört. Die 16px waren mir für unstyled Text zu groß, da hab ich sie auf 12px gestellt. Wenn jetzt jemand mit 16px rechnet und 75% angibt, kann ich nix mehr erkennen. Was soll das ganze also? Darf ich die 16px-Einstellung nicht mehr verändern (wofür ist sie dann da?), oder darf ich… Read more »
Felix
Gast
Ja, die Festlegung von 16px ist Mist. Wenn, dann sollte die Festlegung so sein, dass bei jedem Gerät abhängig von der Auflösung des Displays diese Grundeinstellung so gewählt ist, dass der Text eben so groß ist wie am Desktop ursprünglich 16px. Ich verwende Prozent resp. em, damit das eben leicht einstellbar ist. Die Vorteile der Vererbung finde ich wichtiger als deren Nachteile. Mit rem gibt es aber eine zusätzliche relative Bezugsgröße. So kann ich das so machen, dass sich mit einer Größeneinstellung über die Website nur die Schriftgröße für Fließtext ändert, aber nicht die für Titel oder andere Elemente, bei… Read more »
Christian Hanne
Gast

Ist die Handhabung der Anfangsschriftgröße denn standardisiert? Dachte das läge in der Hand der Browserentwickler. Opera wählt zum Beispiel die vom User eingestellte Systemschriftgröße als Standardwert. Allerdings ist das derzeit glaube ich der einzige Browser der aus der Reihe tanzt.

Daniel Riemer
Gast

Rätsle momentan auch, ob die Einheit „px“ als Fallback wirklich die bessere Lösung ist. Bei starren Layouts ist das sicherlich praktikabel, wenn es sich aber um ein responsives Layout handelt, bei dem beispielsweise die Schriftgröße für die Desktop-Variante global vergrößert werden soll, wird das schon schwieriger. Denn dann müssen im Grunde alle in „px“ angegebenen Werte noch einmal definiert werden, da sich ja nicht relativ vergrößern. Hier wäre dann wohl „em“ die sicherere Bank als Fallback. Da kommen dann aber die Probleme mit den Vererbungen bei Verschachtelungen wieder ins Spiel… Vom Regen in die Traufe.

Johanna
Gast

Wie ist das, wenn im Tablet der eine Browser die Schrift zu gross ausgibt und der andere zu klein? Gibt es da eine Lösung?

Danke!

trackback

[…] Größe der Bildschirmauflösung anpassen können. Dies kann man schnell mit einer entsprechenden CSS-Notierung der Schriftgrößen in REM erreichen. Hier solltest du einige Tests machen, denn zu kleine Schriften auf einer Smartphone- […]

wpDiscuz