rem/px-Tabelle zum Downloaden

Wenn du ein Webseiten-Projekt mit der CSS3 Schriftgrößen-Einheit rem umsetzen möchtest, ist es derzeit noch wichtig eine Pixel Fallback-Lösung für ältere Browser (z.B. IE8 und darunter) anzubieten. Um nicht immer wieder die korrekten rem-Werte ausrechnen zu müssen, habe ich eine praktische rem/px-Tabelle mit den vorbereiteten Werten zum Kopieren und Einfügen erstellt.


font-size:10px;
font-size:0.625rem;

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

font-size:12px;
font-size:0.75rem;

font-size:13px;
font-size:0.8125rem;

font-size:14px;
font-size:0.875rem;

font-size:15px;
font-size:0.9375rem;

font-size:16px;
font-size:1rem;

font-size:17px;
font-size:1.0625rem;

font-size:18px;
font-size:1.125rem;

font-size:19px;
font-size:1.1875rem;

font-size:20px;
font-size:1.25rem;

font-size:21px;
font-size:1.3125rem;

font-size:22px;
font-size:1.375rem;

font-size:23px;
font-size:1.4375rem;

font-size:24px;
font-size:1.5rem;

font-size:25px;
font-size:1.5625rem;

font-size:26px;
font-size:1.625rem;

font-size:27px;
font-size:1.6875rem;

font-size:28px;
font-size:1.75rem;

font-size:29px;
font-size:1.8125rem;

font-size:30px;
font-size:1.875rem;

font-size:31px;
font-size:1.9375rem;

font-size:32px;
font-size:2rem;

font-size:32px;
font-size:2.0625rem;

font-size:34px;
font-size:2.125rem;

font-size:35px;
font-size:2.1875rem;

font-size:36px;
font-size:2.25rem;

font-size:37px;
font-size:2.3125rem;

font-size:38px;
font-size:2.375rem;

font-size:39px;
font-size:2.4375rem;

font-size:40px;
font-size:2.5rem;

Du kannst dir die Werte direkt hier im Artikel kopieren oder die bereits vorbereitete rem.css Datei downloaden. Bei meinem aktuellen Projekt hatte ich die rem.css Datei einfach immer im Text-Editor geöffnet. Bei Bedarf konnte ich dann meine Werte einfach kopieren und im Stylesheet einfügen. Die Werte sind ausgehend von einer Standard-Browserschriftgröße von 16px. Diese kannst du garantieren, indem du im body tag die Schriftgröße auf 100% setzt body {font-size:100%;}.

Ich hoffe du kannst die Tabelle auch gut für deine Webseiten-Umsetzungen nutzen. Für den Fall, dass du größere oder kleinere Werte benötigst, kannst du die Tabelle fortsetzen, indem du den benötigten Wert durch 16 teilst. So bekommst du deinen richtigen rem-Wert.

18 Kommentare

  1. Godehard 19. Juli 2012

    Ist es nicht einfacher einmal html { font-ize: 62.5%} zu schreiben und dann 22px=2.2rem, 32px=3.3rem etc. ?
    Oder übersehe ich da was?

    • Einfacher ist das mit Sicherheit, aber sobald du ein Element vergisst, wird die Schrift mit 10px dargestellt. Noch einfacher ist die Verwendung von Sass. Ich habe mir für die Berechnung der Schriftgrößen einfach ein paar Funktionen geschrieben. Das erspart das Rechnen und auch eine Tabelle ist nicht mehr nötig:
      Meine Sass-Funktionen zur Berechnung der Schriftgrößen

  2. Hallo Ellen,

    mit »rem« habe ich mich schon einmal im Ansatz auseinandergesetzt und würde es zukünftig auch gerne einsetzen wollen. Ratet ihr dazu? In der Vergangenheit habe ich fast ausschließlich mit »em« Werten gearbeitet.

    Lieber Gruß

  3. Wurde mein Kommentar gesperrt? Für mich bleibt die Frage, warum man rem einsetzen sollte, wenn doch ohnehin noch Pixelangaben notwendig sind.

  4. Sebastian 2 20. Juli 2012

    rem ist eher als Alternative zu em gedacht denke ich. Warum man welche Einheiten verwenden sollte/kann/darf darüber gibt es hier andere Artikel. Pixel sind absolut, rem/em relativ. rem ist eher als Alternative zu em gedacht und benötigt einen Fallback…

    • Ich glaube eher, dass ich der einzige bin, der das hier versteht: Das Fallback überdeckt doch die eigentliche Lösung, womit rem redundant ist:

      font-size:10px;
      font-size:0.625rem;

      führt überall zum selben Ergebnis wie

      font-size:10px;

      Warum sollte man dann den ersten Ansatz wählen, der mehr Bandbreite, Wartungsaufwand, Ladezeit, …., … benötigt?

      • Sebastian 2 23. Juli 2012

        Ach so meintest du das.
        Nein aber das stimmt glaube ich nicht.
        CSS wird ja von oben nach unten gelesen, dadurch haben Angaben die weiter unten stehen mehr Gewicht. Der Browser liest meiner Meinung nach:
        font-size: 10px -> führt aus
        font-size: 0.625rem -> überschreibt die Pixelangabe und führt aus, der Browser der das nicht kann, der interpretiert das einfach nicht.
        Oder seh ich das falsch???

        • Und jetzt noch einen Schritt weiterdenken: Was macht der Browser mit den Angaben?

          font-size: 10px -> Schriftgröße auf 10px setzen
          font-size: 0.625rem -> Schriftgröße auf 16*0,625 = 10px setzen

          Wir haben also zweimal die Schriftgröße auf 10px gesetzt, haben doppelt so viel Platz verbraucht und eine zusätzliche Berechnung eingefügt. Zudem müssen wir künftig zwei Zeilen warten.

          Meine Frage bleibt daher: Was haben wir gewonnen?

        • Sebastian 2 23. Juli 2012

          Wir haben in dem Moment was gewonnen, wenn der User seine Standartschriftgröße ändert, 16 px sind immer 16 px, während 1rem auch 20px sein können. Fallbacks sind immer so ne Sache, nervend, aber notwendig. In diesem Fall würde ich eher em verwenden anstatt px, das ist aber wieder ein anderes Thema.

        • Dein Anwendungsfall also: Beim Erstellen ist es absolut wichtig, dass auch alte Browser genau die gleichen Größen verwenden. So sehr, dass wir die Größe unserer CSS-Datei um 20% erhöhen. Später aber, wenn wir alles etwas größer wollen, ändern wir nur die Root-Größe, lassen die Pixelwerte wie sie sind und pfeifen auf die älteren Browser.

          Okay, da passt es. Erscheint mir nur nicht gerade praxisnah.

        • Sebastian 2 25. Juli 2012

          Jo wenn es darum geht pfeif ich auf alte Browser. Durch den Fallback geb ich den Leuten die alte Browser noch verwenden, die best mögliche Ausgabe. Und natürlich ist das Praxisnah! Ich glaub das nennt man progressive enhancement. Wenn auf alten Browsern eine Seite genauso aussehen und reagieren soll wie auf neuen, dann müsste man u.A. auf border-radius, box-shadow, text-shadow, @font-face, css3 selektoren, :before, :after, uvm. verzichten. Jeder solls so machen wie er will.

        • Auf die Gefahr hin, dass ich mich wiederhole: Wenn du das beste für alte Browser herausholen willst, wirst du stets auch die Pixelwerte anpassen müssen. Wenn sie dir egal sind brauchst du gar keine Angabe, da Browser über recht vernünftige Standardgrößeneinstellungen verfügen, die der Nutzer nach eigenem Bedarf anpassen kann.

          So oder so: Entweder die Pixel- oder die Rem-Angabe ist somit für die Katz. Es ist eben alles andere als praxisnah sich heute um alte Browser zu sorgen und sie morgen vollständig zu ignorieren. Es ist vorher festzulegen, welche Plattformen man unterstützen will. Ändert sich das während der Wartung, hat man große Fehler in der Anforderungsanalyse gemacht.

  5. Umrechnen von px zu rem ist hier nach nicht notwendig:
    http://snook.ca/archives/html_and_css/font-size-with-rem

    Auch ist in dem kurzen Artikel gut erklärt worin der generelle Unterschied zwischen px und em besteht, weshalb dann auch bei der Verwendung von rem die Einheit em auf keinen Fall als Fallback verwendet werden kann/sollte. (<- Bezogen auf Tipps und Diskussionen weiter oben)

Hinterlasse eine Antwort

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