Haftpflicht Blogger
Virtual Server von Host Europe

CSS3: Schriftgrößenangaben in px, em oder rem?

| 3. Februar 2016 | Keine Kommentare

SEO -Ausgangssituation:

Bei der Größenangabe z.B. für eine Schrift hat man verschiedene Maßeinheiten, die man verwenden kann. Unter anderem sind dies

  • px   Pixel
  • %    Prozent
  • em 
  • rem  (root em)

In neueren Stylesheets findet man augenblicklich des öftern Definitionen wie diese

/*————————————————————–
# Typography
————————————————————–*/
body,
button,
input,
select,
textarea {
    color: #000;
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

wobei die doppelte font-size Angabe im Stylesheet irritiert.

Ist das nun ein Copy/Paste Fehler?  Jeder Webseitenprogrammierer lernt doch in der ersten Stunde, dass spätere, identische Eigenschaftsdefinitionen die Vorangegangenen überschreiben.

Hintergrund:

Die Maßeinheit px (Pixel) ist eine fixe Maßeinheit, die man nur noch mit Bedacht verwenden sollte. Sinnvoll ist diese noch bei Bildern, aber ansonsten sind relative Größenangaben in der Einheit em zu bevorzugen.

Vorteile bei der Verwendung von relativen Größenangaben

  • Ermöglicht Responsive Design (Smartphone, Tablet, PC)
  • Konformität zu Accessibility Standards (Behindertengerechte Darstellung)

Umrechnung der Größeneinheit

Jeder Internetbrowser (Firefox, Chrome, Internet Explorer, …) hat eine Größengrundeinstellung (100%).  Bei den meisten Browsern entspricht dies einer Schriftgröße von 16px und ist mit 1em gleichzusetzen

Standardwert = 100% = 16px = 1em = 1rem

Unterschied em zu rem

Die Einheiten em und rem sind beides relative Einheiten. Der Unterschied liegt im Bezugspunkt, in der Vererbungsregel.  Während em sich stets am Eltern-Element (Parent) orientiert und es dadurch zu einer kaskadierenden Anwendung der Größenangabe kommt, bezieht sich rem (root em) immer auf die Größenangabe des html-Elements und bleibt damit für jedes Element (auch bei Ineinanderverschachtelungen) gleich groß.

Beispiel zur Verdeutlichung:

Das Listenelement li mit der Maßeinheit em bzw. rem definiert.

CSS3-REM

 

Browser und CSS3

Mit dem Hintergrundwissen zu em und rem läßt sich nun auch die „vermeintlich“ unsinnige Doppeldefinition

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

bei der Eingangs gewählten Schriftgrößendefinition verstehen.

Die Maßeinheit rem ist erst in CSS3 hinzugekommen und wird noch nicht von allen Browsern/Browserversionen unterstützt.  Für Browser, die rem als Maßeinheit noch nicht unterstützen, muß eine alternative Definition in Pixeln (Fallback-Fall) gegeben sein.  Wegen der Überschreibungsregel bei CSS bzgl. vorangegangener Definitionen ist es hierbei wichtig, dass die Größenangabe mit der rem-Einheit nach der Pixelangabe erfolgt.

 

 

Links:

[1] W3C Web Style Sheets : em, px.pt,cm, in

[2] Wikipedia : em (Schriftsatz)

 

 

 

 

 

Stichworte: ,

Kategorie: CSS

Schreibe einen Kommentar

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