CSS-Tipp: rem als Einheit für Schriftgröße nutzen

rem hat dieses mal nichts mit Musik zu tun, sondern es ist der Begriff der CSS3-Schriftgrößeneinheit rem (= root em) gemeint. rem verhält sich genauso wie em mit dem einzigen Unterschied, dass das sich der rem-Wert am Root-Element orientiert (also an der Schriftgröße, für body bzw. html), statt sich wie em an der Schriftgröße des jeweiligen Eltern-Elements zu orientieren.

CSS em im Vergleich zu rem
Vergleich der Schriftgrößen-Einheiten em und rem, bei 16px Standard-Browserschriftgröße.

Wenn im Root-Element ( z.B. body {font-size: 100%} ) der Wert auf 100% gesetzt wird, entspricht das in den meisten Browsern einer Standard-Schriftgröße von 16 Pixel. An diesem Standard-Wert kann man sich jetzt orientieren und alle weiteren Schriftgrößen in rem definieren.

Pixel in rem umrechnen

Für eine Schriftgröße von 18px (z.B. für Überschriften in der Sidebar) ist der Schriftgrößen-Wert also font-size: 1.125rem. Umgerechnet werden können Pixel-Werte, indem man den Pixelwert durch 16 teilt (18/16 = 1.125) Vorausgesetzt man geht von der 16px Standard-Schriftgröße aus und die font-size des Root-Elements ist auf 100% gesetzt.

CSS rem erklaert

Im Gegensatz zu em ist die Berechnung der korrekten Schriftgröße sehr viel einfacher. Denn falls ein Element in einem Eltern-Element verschachtelt ist, muss die Schriftgröße nicht mehr im Verhältnis zu der Schriftgröße des Eltern-Elments berechnet werden, sondern der Teilwert bleibt immer 16 Pixel. Das kann einem bei mehrfach verschachtelten Elementen (z.B. bei verschachtelten Kommentaren) so einiges an Kopfschmerzen ersparen.

Browser-Kompatibilität

Das einzige Problem bei der Nutzung von rem ist, dass die CSS3 Schrifteinheit leider nicht von älteren Browsern (z.B. Internet Explorer 8 + darunter) unterstützt wird. Daher ist es nötig, eine Fallback-Lösung in px im Stylesheet zu definieren. Diesen Pixelwert setzt du einfach über den font-size Wert in rem:

h3.widget-title {
font-size: 18px;
font-size: 1.125rem;
}

Auf diese Weise können moderne Browser die rem-Einheit nutzen und für ältere Browser steht der Pixel-Wert als Fallback-Lösung parat.

WordPress Blank-Theme mit rem

Möchtest du ein WordPress-Theme mit der rem font-size Einheit erstellen, kannst du das _s Blank-Theme von Automattic als Grundlage für deine eigene Theme-Erstellung nutzen. Im _s Theme ist die rem-Einheit + Fallback-Pixelwert bereits standardmäßig unterstützt.

Mehr zum Thema rem

Hast du bereits Erfahrungen mit der Nutzung von rem als Schriftgrößeneinheit? Wie ist dein Feedback und hast du weitere Tipps zur Nutzung? Über deinen Kommentar freue ich mich sehr!

23 Kommentare

  1. Das ist ein guter CSS-Tipp. Wegen der Browser-Kompatibilität war ich immer etwas skeptisch, aber durch SASS (oder Less), den entsprechenden Mixins und den so automatisch generierten Fallbacks gibt es ja fast keinen Grund mehr rem nicht zu benutzen.

  2. Thomas Sausen 10. Juli 2012

    REM nutze ich seit Ende 2011 regelmäßig. Hatte gerade mich mit EMs angefreundet und dann las ich einen Blogartikel über REM. Der Fallback ist ja recht simpel. Insgesamt kann ich mich nicht beschweren.

  3. Sehr interessant Ellen. Vielen Dank für Deinen Beitrag :-) erde ich ebenfalls in der Form mal einsetzen, aktuell nutze ich nur “em” und hadere des öfteren mit der “kaskadierten Vererbung” :-) Aber dank der Fallbacks, sicher bereits einsetzbar.

  4. Liebe Ellen

    Vielen Dank für den Artikel. Rem macht doch die ganze Rechnerei, die durch em entsteht einfacher.
    Doch noch eine Frage: Was für Vorteile bringen em/rem gegenüber px? Das Problem wegen Textzoom/Seitenzoom sollte doch langsam keines mehr sein.
    Habe jetzt immer mit px gearbeitet, aber bin mir nicht sicher ob ich mich doch einmal mit em versuchen sollte. Aber sehe noch zu wenig Vorteile.

    Gruss Kerim

  5. Sebastian 11. Juli 2012

    Ich benutze schon eine Weile rem für meine Layouts, nicht nur für Schrift. Bin mir grade nicht sicher, aber kann man als fallback auch em benutzen?
    @kerim: wenn du relative Einheiten verwendest, hast du den Vorteil, das sich dein Layout auch anpasst, wenn der User als standart Browser Schriftgröße z.B 18px setzt, o Ä.
    Einen Nachteil habe ich bei rem festgestellt: wenn ich möchte dass alle Schriften (Überschriften usw.) die selbe line-height abhängig von der jeweiligen Schriftgröße haben, kann ich diesen nicht in rem angeben. Bsp.: font-size: 1.5em (24px); line-height: 1.5em (36px);
    Während: font-size: 1.5rem(24px); line-height: 1.5rem (24px).
    Man müsste das mischen, werd ich später mal versuch.
    Ich möchte mich für die Form entschuldigen, aber ich schreibe grad auf dem Smartphone in der u-Bahn.

    VG

  6. Vielen Dank für den Artikel. Ich kannte bis gerade eben die Einheit “rem” noch gar nicht. Nun habe ich wieder etwas dazu gelernt ;)

  7. @Sebastian: Besten Dank für Deine kurze Erklärung!
    Doch was spielt die Standartschriftgrösse des Users für eine Rolle? Mit em oder rem wird diese als Grundlage genommen, aber die ganze Typo und das Layout wird immer noch durch den Webdeveloper bestimmt. Klar kann man so auf die Vorlieben des Users eingehen, wenn dieser zum Beispiel eine grössere Standartschriftgrösse gewählt hat (falls dies überhaupt einige tun, bzw. wissen, dass dies möglich ist), aber ob ich 1em oder 1.25em schreibe hat doch den grösseren Einfluss.

    Ein Webauftritt sieht nirgends gleich aus wie anderswo, davon gehe ich immer aus. So sollten doch bereits im Konzept einige Überlegungen stecken, wie erreicht werden soll, das der Content möglichst gut präsentert wird, auf allen möglichen Medien.

    Wie gross ist der Unterschied, bzw. der Vorteil wenn man mit em statt mit px arbeitet?
    Momentan bin ich wohl noch etwas fest von den px überzeugt, aber werde mich am Besten auch einmal auf em/rem einlassen müssen. Überall wird empfohlen mit em anstelle von px zu rechnen, doch den wirklich überzeugenden Argumente bin ich bis jetzt noch nicht begegnet.

    Wie sieht es bei mobilen Geräten aus? Interpoliert zum Beispiel ein iPhone 4S 16px anders als 1em, oder ist die Standartschriftgrösse bereits auf 32px festgelegt? Unter Android kenne ich nur die Möglichkeit den Standartwert mit % zu verstellen.

    Naja, vielleicht habe ich auch einfach wichtiges übersehen.
    Gruss Kerim

  8. Ich habe mal, gehört das es bei Mobilen Geräten, jedoch Probleme gibt wenn man rem benutzen tut. Hat jemand da schon erfahrungen gesammelt, wäre angehnemer zum umrechnen von px nach em z.b

    lg

  9. Sebastian 16. Juli 2012

    Mobile Geräte machen mit Schrift teilweise sowieso komische Sachen, zB. die Schriftgröße bei p-tags automatisch vergrößern. Dagegen helfen extra Anweisungen.
    Zu den Vorteilen von em gehört u.A., dass das Layout bei vergrößerter nicht gesprengt wird und die Zeilenlänge sich anpasst. Darum verwende ich beispielweise em auch für Layoutelemente (oder % und em). Bilder können in em angegeben damit sie mit dem Text wachsen. Kurzum mit em kann man eben relativ gleichaussehende Layouts anbieten. Es gibt einfach keinen Grund em NICHT zu benutzen. Aber ich bin generell derMeinung, dass man für Layouts nur noch relative Angaben (% für Breite usw.) verwenden sollte einfach um Seiten zugänglicher zu machen. 80% sind bei einer Bildschirmauflösung von 800px, eben 80% des verfügbaren Platzes, bei 1200px sinds auch 80%. Für mich gibt es einfach keinen logischen Grund noch Pixel zu benutzen.
    Vielleicht kommt hier ja nochmal ein Artikel zu den Vorteilen elastischer oder flexibler Layouts und dementsprechend die Erklärung für die Vor- und Nachteile.. ;)

  10. @Sebastian: Vielen Dank für den Linktipp, habe ganz vergessen dass ich mich noch gar nid bedankt hatte.

    Ja, eigentlich spricht nichts gegen die Verwendung vom em, ausser vielleicht die ganze Rechnerei. Diese bringt aber ja auch Vorteile mit sich.

    Gruss Kerim

  11. Hallo Ellen.

    Unglaublich, hat man sich auch dieses Problems angenommen. Sich ständig neue Dinge drauf zu schaffen geht grad noch. Doch wie in diesem Fall, etwas das einem über Jahre Probleme bereitet hat aufzufrischen, fällt viel schwerer. Vor allem wenn man mangels existierenden Lösungen, das bereits irgendwann innerlich vollständig abgehakt hatte. Da sucht man dann irgendwann nicht mehr nach neuen Lösungen. Dieses em vererben von den übergeordneten Elemente nervt mich seit Begin von CSS(1). Umso schöner, wenn man das so ganz nebenbei davon erfährt.

    Vielen Dank für dein update

  12. Hallo zusammen,

    ich bin gerade erst über den Artikel hier gestolpert und auch wenn dieser nicht mehr “taufrisch” ist, möchte ich doch noch kurz einige Anmerkungen loswerden, die mir weder in dem Beitrag selber, noch in den Kommentaren deutlich genug zur Sprache gekommen sind.

    Zunächst mal an alle, die sich hier als strikte Verwender von ‘em’ für die Schriftgröße “geoutet” haben – sorry, aber kann mir mal einer von euch erklären, warum ihr nicht ‘%’ verwendet? Der einzige Unterschied ist doch, dass man bei ‘em’s für die gewünschte Schriftgröße diese durch die Basis-Schriftgröße (oder die des Elternelements) teilt und bei Prozenten diesen Wert einfach noch mit Hundert multipliziert.

    Also das ist schon mal kein Argument/ Grund dafür, für die Schriftgröße ‘em’ zu verwenden, geschweige denn irgendein Vorteil gegenüber Prozentangaben.

    IMHO liegt der wahre Vorteil und Nutzen von ‘em’s im Bereich des Layouts, weil es die einzige Möglichkeit darstellt Container bspw. in der Breite an die Schriftgröße anzupassen, um so eine Beschränkung der Zeilenlänge zu erreichen und somit eine bessere Lesbarkeit zu gewährleisten.
    Das ist vor allem interessant (von Vorteil) gewesen, als die Browser noch keine “Full-Page-Zoom” Funktion hatten und der User nur die Möglichkeit hatte, über die Änderung der Schriftgröße eine vergrößerte/ verkleinerte Darstellung zu erreichen und ansonsten sehr viele “starre” Layouts bei der kleinsten Änderung “auseinander gefallen” sind. Letzteres spielt heutzutage keine Rolle mehr, da mittlerweile alle relevanten Browser über eine entsprechende Full-Page-Zoom Funktion verfügen.

    ‘REMs’ sind ein echte Vereinfachung und zwar dahingehend, dass man dadurch eben die Möglichkeit hat, relative Schriftgrößen anzugeben, die stets dieselbe Basisgröße haben.

    Aber auch hier zeigt sich in meinen Augen wieder die allenthalben vorhandene “Inkonsistenz” oder gar “Verwirrung” bei der Weiterentwicklung der Standards, denn warum gibt es keine ‘RPs’ ~ root percentages!? Die hätten doch jetzt auch noch problemlos zu den “Viewport-percentage lengths” gepasst …!

    Letztere neuen Einheiten könnten hilfreich sein bei dem Problem der Schriftgrößen, speziell bei Überschriften, welchem man sich beim “Responsive Design” gegenüber sieht. Allerdings ist die Browserunterstützung bisher noch nicht so doll.

    Als Fazit zu den ‘REMs’ – eine Erleichterung, bzw. Vereinfachung, aber keine “revolutionäre Neuerung”. Relative Schriftgrößenangaben sind mit Sicherheit sinnvoll und ‘REMs’ von daher ein nutzbares neues Feature.

    Gruß
    Gunther

    • monaalexandra 5. Januar 2013

      Hallo Netsurfer/Gunther,

      nur um das mal kurz hier einzuwerfen, ein Grund, warum ich zum Beispiel keine Prozentangabe für Schriften verwende ist, dass Webkit-Browser einen Render-Bug damit haben. Hat man Eine Schriftgröße in % gesetzt und hat z.B. einen Slider mit CSS3-transitions auf der Seite, flackert das Schrift Rendering :(

      Die netten Sachen wie “-webkit-font-smoothing” usw. scheinen bisher nicht zu helfen. Deshalb bleibe ich auch bei Schriften bei den EM/REM ;)

      Liebe Grüße,
      Mona

  13. Hallo Ellen,

    danke für Deinen Blog.
    Kurze Frage:

    Muss es nicht im rechten (rem) Teil der Grafik
    Parent-Div=1.125 rem (16px)
    anstatt
    Parent-Div=1.125 rem (18px)

    Danke im Voraus
    andy

  14. Mhm. Sind die Werte wirklich direkt umrechenbar? Warum wird dann im offiziellen TwentyTwelve WordPress Template folgendermaßen umgerechnet?

    font-size: 11px;
    font-size: 0.785714286rem;

  15. Gunther 5. Mai 2013

    Ich nochmal …!

    Am Anfang des Artikels steht:”Wenn im Root-Element ( z.B. body {font-size: 100%} ) der Wert auf 100% gesetzt wird, entspricht das in den meisten Browsern einer Standard-Schriftgröße von 16 Pixel.”

    Das ist imho insofern “verwirrend/ irreführend”, als dass das Root Element einer HTML Datei das Element, und nicht das Element ist.

    Wer also (warum auch immer) eine Änderung der font-size für vornimmt und dann REMs verwendet, dürfte ggf. verwundert sein, warum nicht das erwünschte Ergebnis herauskommt …!

    Zur Vereinfachung kann man die Schriftgröße des Root Elements auch auf 62,5% setzen, also: html {font-size: 62.5%;}
    Ausgehend von einer Standard-Schriftgröße von 16px entspricht das dann 10 Pixel.
    Somit kann man jetzt seine beabsichtigten Schriftgrößen in ‘rem’ sehr einfach in Pixelwerte (für den Fallback) umrechnen: rem * 10 = px

    Und die “Basis-Schriftgröße” für das Body Element setzt man dann auf 160%, bzw. 1.6rem: body {font-size: 160%; font-size: 1.6rem;}

    Damit hat man dann erreicht, dass die Schriftgröße des Body Elements der vom User eingestellten Standard-Schriftgröße entspricht (da: X * 62,5% * 160% = X ist), und man für seine gewünschten Schriftgrößen sehr einfach die passenden REM (und PX) Werte setzen kann.

    Die Usability bleibt auch gewahrt, weil die vom User eingestellte Standard-Schriftgröße auch weiterhin “respektiert” wird, da REM ja eine relative Größe ist.

    @monaalexandra: Der Webkit Bug sollte somit auch nicht auftreten, da Webkit ja die REM Angabe auswertet (nicht getestet).

    Gunther

    • he gunther, das ist supercool :) habs grad mal getestet und das funktioniert einwandfrei, so ist das “umrechnen” fallback wesentlich entspannter :D

  16. kann man das mit dem REM auch so hier machen?

    html { font-size:10px;}

    p { font-size:16px; /*für Browser, die REM nicht verstehen*/
    font-size:1.6rem }

    Damit liese sich doch das Ganze besser eingeben, statt ständig von px in rem umzurechnen.
    Oder gibt es dabei ein Problem, daß ich grad nicht sehe?

Hinterlasse eine Antwort

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