Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Peter Müller 6. Februar 2013

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

Diskussionen über die bes­te Art und Weise, die Schriftgröße bzw. den Schriftgrad zu defi­nie­ren sind wahr­schein­lich so alt wie das Web. Neben den tra­di­tio­nel­len Kandidaten wie px, em und % gibt es mit rem einen neu­en Bewerber, der das Beste der ande­ren Einheiten in sich ver­eint.

Von der Wurzel her betrachtet

Früher mal Standard: Schriftgrad per em oder %

Bis etwa 2008 galt es als weit­ge­hend als Best Practice, den Schriftgrad im CSS so fle­xi­bel wie mög­lich zu defi­nie­ren. Dazu wur­den die Einheiten em oder % ein­ge­setzt, rela­tiv zur Standardeinstellung im Browser, die nor­ma­ler­wei­se bei 16px liegt.

Diese fle­xi­ble Mischung ser­vier­te den Nutzern damals das bes­te Lese-Erlebnis, denn vie­le Browser hat­ten noch kei­nen Seitenzoom und der IE6 konn­te mit px defi­nier­ten Text über­haupt nicht zoo­men, jeden­falls 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 rela­tiv zu irgend­et­was, meist zum Eltern-Element, und bei em ist das nicht anders:

  • Bei einer Box-Modell-Eigenschaft wie margin-bottom ori­en­tiert 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äu­fig ein gewünsch­ter Effekt ist.
  • Bei der Schriftgröße hin­ge­gen 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 klei­ner.

Fast wie bei Alice im Wunderland. Mal zu groß, mal zu klein, aber so rich­tig pas­sen tut’s dann doch nie.

Die vorübergehende Emanzipation des px

Im Februar 2009 hielt Jens Grochtdreis in sei­nem Blogartikel “Die lei­di­ge Sache mit der Schriftskalierung” ein kur­zes Plädoyer für die Pixel. Moderne Browser hat­ten damals einen Seitenzoom und der IE6 wur­de als Gegenargument immer weni­ger wich­tig.

Ein Jahr spä­ter ver­öf­fent­lich­te Gerrit van Aaken einen Beitrag mit dem Titel “Warum ich Pixel für CSS-Schriftgrade ver­wen­de”. In der Diskussion unter Gerrits Bekenntnis zu px ging es hoch her, aber beson­ders bemer­kens­wert ist Kommentar #22 , in dem eine Einheit namens rem erwähnt wird, die den meis­ten Webdesignern bis dahin weit­ge­hend unbe­kannt war.

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

Seit etwa 2011 wird das rem lang­sam aber sicher bekann­ter, denn es ver­eint die Vorteile von pxund em. Es ist genau­so fle­xi­bel wie sein älte­rer Bruder em, umgeht aber des­sen 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 erhal­ten, teilt man ein­fach die gewünsch­te Pixelgröße durch den Ausgangswert 16. Im CSS könn­te eine sol­che Schriftgrad-Definition wie folgt aus­se­hen:

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 die­se Weise lässt sich ganz ein­fach eine Kaskade von Schriftgraden auf­bau­en. Um den Schriftgrad irgend­wann ein­mal grö­ßer oder klei­ner 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 tat­säch­lich hat die Geschichte nur einen ein­zi­gen Haken: Alte Browser, wie immer. Auf http://caniuse.com/rem kann man sich einen guten Überblick ver­schaf­fen, und der sieht gar nicht so schlecht aus:

Can I use Rem units?

Die eigent­li­chen Schwachpunkte lie­fern der IE vor Version 9 sowie Opera Mini. Für die­se bei­den und alle ande­ren alten Browserkollegen kann man in sei­nen Stylesheets ein Pixel-Fallback ein­bau­en, dass für das obi­ge Beispiel so aus­se­hen könn­te:

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 über­schrei­ben im Rahmen der Kaskade den px-Wert mit dem rem-Wert, älte­re hin­ge­gen neh­men die px-Anweisung und igno­rie­ren die zwei­te Zeile. Perfekt.

Links zum Beitrag:

(dpe)

Peter Müller

Peter Müller

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 "Einstieg in WordPress", "Flexible Boxes" oder "Einstieg in CSS".

23 Kommentare

  1. Wie ist das, wenn im Tablet der eine Browser die Schrift zu gross aus­gibt und der ande­re zu klein? Gibt es da eine Lösung?

    Danke!

  2. Rätsle momen­tan auch, ob die Einheit „px“ als Fallback wirk­lich die bes­se­re Lösung ist. Bei star­ren Layouts ist das sicher­lich prak­ti­ka­bel, wenn es sich aber um ein respon­si­ves Layout han­delt, bei dem bei­spiels­wei­se die Schriftgröße für die Desktop-Variante glo­bal ver­grö­ßert wer­den soll, wird das schon schwie­ri­ger. Denn dann müs­sen im Grunde alle in „px“ ange­ge­be­nen Werte noch ein­mal defi­niert wer­den, da sich ja nicht rela­tiv ver­grö­ßern. Hier wäre dann wohl „em“ die siche­re­re Bank als Fallback. Da kom­men dann aber die Probleme mit den Vererbungen bei Verschachtelungen wie­der ins Spiel… Vom Regen in die Traufe.

  3. Ja, die Festlegung von 16px ist Mist. Wenn, dann soll­te die Festlegung so sein, dass bei jedem Gerät abhän­gig von der Auflösung des Displays die­se Grundeinstellung so gewählt ist, dass der Text eben so groß ist wie am Desktop ursprüng­lich 16px. Ich ver­wen­de Prozent resp. em, damit das eben leicht ein­stell­bar ist. Die Vorteile der Vererbung fin­de ich wich­ti­ger als deren Nachteile. Mit rem gibt es aber eine zusätz­li­che rela­ti­ve 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 ande­re Elemente, bei denen das eher das Layout unbrauch­bar machen wür­de.

    Heute muss man ziem­lich auf­wen­dig erst das ver­wen­de­te Display eru­ie­ren – inklu­si­ve, ob es ein Touch-Display oder ein Fernseher ist – und so die Größe für Fließtext, kleins­ten Text und Schaltflächen spe­zi­ell aus­lie­fern.

    Für einen Unfug hal­te ich die Vorgangsweise bei den meis­ten Browsern, dass nicht nur Schrift, son­dern der gesam­te Inhalt ska­liert wird und dabei sogar bei Liquid design auch die Breite über die Fensterbreite hin­aus­geht.

    Früher hielt ich das für einen Unfug, weil das eh die Browser anbie­ten, aber dadurch wird es sinn­voll, eine Schriftgrößen-Änderung auf der Website anzu­bie­ten. So kann man die Schriftgröße ein­stel­len so groß wie man will und die Zeilenlänge bleibt inner­halb des Fensters. Die Qualität von Grafiken lei­det sehr unter der Skalierung und bei die­sen ist es zumeist auch nicht nötig, dass die­se ska­liert wer­den. Wichtig ist es nur für nor­mal gro­ßen Fließtext und klei­nen Fließtext (small).

    Wer die wich­tigs­ten Elemente wie div, p, ul/li etc. mit einer ande­ren Schriftgröße als 1em vor­de­fi­niert, der hat frei­lich ein Problem mit em und Prozent bei der Verschachtelung. Etwaige ver­blei­ben­de Fehler kann man ja abfan­gen. Beispielsweise: small small { font-size: 100% }

    • Ist die Handhabung der Anfangsschriftgröße denn stan­dar­di­siert? Dachte das läge in der Hand der Browserentwickler. Opera wählt zum Beispiel die vom User ein­ge­stell­te Systemschriftgröße als Standardwert. Allerdings ist das der­zeit glau­be ich der ein­zi­ge Browser der aus der Reihe tanzt.

  4. Ich ken­ne die­se Pixeldiskussion nicht, vllt. weil ich mich nie dar­an betei­ligt habe. Ich ver­wen­de ein­mal px ganz oben, den Rest set­ze ich mal so, mal so.

    Früher hab ich die Größeneinstellung mei­nes Browsers mal tat­säch­lich ver­wen­det – das scheint außer mir aber nie­mand zu tun, wie es sich anhört. Die 16px waren mir für unsty­led Text zu groß, da hab ich sie auf 12px gestellt. Wenn jetzt jemand mit 16px rech­net und 75% angibt, kann ich nix mehr erken­nen. Was soll das gan­ze also? Darf ich die 16px-Einstellung nicht mehr ver­än­dern (wofür ist sie dann da?), oder darf ich kei­ne px-Angabe für mei­ne Webseite machen? Es ist so oder so Mist.

    Im Web gibt es nun­mal kei­ne 100%ige Sicherheit. Ich gestal­te mei­ne Seiten so, wie ich sie für die meis­ten am bes­ten les­bar hal­te. Wer es anders braucht, muss sich mit sei­nem Browser einig wer­den. Sollte heu­te kein Problem mehr sein.

  5. Interessant, man kann sich ja durch­aus eine Vereinigung der bei­den Welten vor­stel­len: Kritische Designelemente in der Navigation, die nicht in der Schriftgröße ver­än­dert wer­den soll­ten, wer­den pixel­ge­nau gesetzt und Überschriften und Fließtext mit REM.

  6. Gibt es eigent­lich ein Skript, damit auch die Internet Explorer 8 und 7 rem ver­ste­hen und kor­rekt wie­der­ge­ben?

  7. Hatte rem bis­lang noch nicht wirk­lich beach­tet. Wird sich dank die­sem Beitrag sicher­lich ändern. Toll erklärt! Danke!

  8. Ich hat­te es ges­tern noch mit rem ver­sucht bei einer etwas kom­pli­zier­ten Skalierung einer zwei­zei­li­gen zen­trier­ten Überschrift und einem Absatz, aber der Bezug zur Basis stell­te sich nicht her. Jetzt weiss ich, war­um. Nehmen Sie ein­fach HTML statt Body. ;)

    • Das ist wohl der häu­figs­te Fehler beim “rem”, wohl weil die Schriftgröße frü­her ja fast immer im “body” defi­niert wur­de.

      Selbst Ethan Marcotte höchst­per­sön­lich schreibt in sei­nem ansons­ten lesens­wer­ten Artikel “Type stu­dy: Sizing the legi­ble let­ter” tat­säch­lich “But the rem is sized rela­ti­ve to the root of your document—in other words, the value set on the body ele­ment.”

      Da kommt man schon einen Moment ins Zweifeln, wenn das so jemand schreibt, aber falsch bleibt falsch. Root ist “html” und nicht “body”.

      • Ich sin­ge grad en Lied davon, was es heißt, den ver­in­ner­lich­ten Workflow über den Haufen zu wer­fen, um respon­si­ve-like zu ent­wi­ckeln. Von daher kann ich gut ver­ste­hen, wenn man öfter mal in der Sackgasse lan­det ;)

  9. Mir ist nicht ganz klar, war­um die Vererbung hier­bei als Problem gese­hen wird.
    Sie ist ja durch­aus so gedacht und wie alle Werte im CSS kann man auch die­se falsch ein­set­zen.

    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 blie­be weit­ge­hend bei die­sen Definitionen, wür­de auch bei em als Maßeinheit kei­ner­lei Probleme auf­tau­chen und es wür­de sich auf die sel­be Weise ver­hal­ten.
    Ein H2 kann nicht in einem H1 auf­tau­chen, ein P nicht in einem H2. Auf Containerelemente ( ) gehör­ten em ja noch nie – außer man hat sich etwas dabei gedacht.

    Gleichzeitig beraumt man sich mit rem der Möglichkeit Bereiche spe­zi­fisch zu ändern, ohne jeden Wert auf “alt­mo­di­sche” Weise anzu­pas­sen – z.B.: Den Footer für Smartphone-Größen im Verhältnis deut­lich zu ver­grö­ßern und leich­ter klick­bar zu machen oder aus­schließ­lich die Navigation auf Tablets zu ver­klei­nern und die Content-Schrift grö­ßer zu belas­sen. Mit em ist bei­des durch einen ein­fa­chen Wert auf dem jewei­li­gen Strukturcontainer mög­lich, mit rem müss­te wie­der jeder Wert ein­zeln geän­dert wer­den. Wie siehst du das?

    • In dem simp­len Beispiel könn­te man auch ein­fach “em” set­zen, aber in kom­ple­xe­ren kann das mit “em” schon mal komisch wer­den.

      Mir gefällt der kon­kre­te Ausgangspunkt, den mir das Stammelement lie­fert, aber es spricht über­haupt nichts dage­gen, dass du beim “em” bleibst, wenn es für dich bes­ser passt.

  10. Oh man, ich kann mich da noch an eine Diskussion mit einem Hardcore-Pixel-Verfechter auf einer ande­ren Seite erin­nern… Gut das rem lang­sam aber sicher ankommt. Endlich kann man auf die Rechnerei mit em-Werten ver­zich­ten. Zum Fallback: hab auch eher zu em ten­diert, 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 geschrie­ben hat ist px hier­für in Ordnung.

  11. Mit SASS/LESS mixins kann man das Fallback ja auto­ma­tisch ein­fü­gen, ist also kein mehr­auf­wand (und man spart sich sogar das umrech­nen von Pixeln) z.B.

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

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

  12. Habe von rem noch nie was gehört, hört sich aber sehr inter­es­sant an. Ich wer­de das mal aus­pro­bie­ren, dan­ke für den Beitrag!

  13. Sollte man für den Fallback wirk­lich die Einheit px ver­wen­den oder doch lie­ber em?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.