CSS, HTML und Javascript mit {stil}

CSS font-size – Schriftgröße in HTML-Seiten

CSS font-size: px oder em, rem oder %?

font-size legt die Schriftgröße absolut durch numerische Werte für Pixel oder Punkte oder relativ in Prozent oder mit em / rem fest. Für die Anpassung der Schriftgröße an die Größe des Viewports hat CSS3 auch noch vw und vh eingebracht. Dazu gibt es noch die alten Schlüsselwörter wie »xx-large« oder »larger«.

Dennoch müssen wir die Angabe der Schriftgröße eher als Empfehlung sehen, denn die tatsächliche Schriftgröße hängt am Ende von der Auflösung und Größe des Monitors, von den Einstellungen des Benutzers und auch noch vom Browser ab. Schriftgrößen sind ein Wespennest.

Kleiner geht es nicht: Neun Pixel brauchen wir, damit der Text lesbar ist. Aber die Zeit der kleinen Schriften ist vorbei – die Auflösung der Monitore – selbst der Monitore auf den mobilen Geräten – ist so groß geworden, dass die Schrift auf Webseiten lesbarer gestaltet werden kann.

font-size
regelt die Größe der Schrift mit absoluten oder relativen Werten, durch numerische Werte oder Prozentangaben.

Relative Schriftgrößen: Prozent und EM

Eine elegante Methode für das Festlegen der Schriftgrößen einer Webseite setzt die Schriftgröße für das body-Tag. Würde font-size auf 100% bzw. 1em gesetzt, hätten wir wieder die vorgegebene Schriftgröße des reinen HTML.

Es gab eine Empfehlung in HTML: The Markup Language (an HTML language reference) / W3C Working Group Note 28 May 2013, und obwohl das Dokument nicht mehr fortgeschrieben wird und nur noch aus historischen Gründen im Web bleibt, liefert es immerhin einen Anhaltspunkt, wie Browser Schriftgrößen rendern sollen.

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; margin-before: 1em; margin-after: 1em }
h4 { font-size: 1.12em; margin-before: 1.33em; margin-after: 1.33em }
h5 { font-size: .83em; margin-before: 1.67em; margin-after: 1.67em }
h6 { font-size: .67em; margin-before: 2.33em; margin-after: 2.33em }
p { font-size: 1em; margin-before: 1em; margin-after: 1em }

Gleich, ob fontsize in %, px oder em angegeben wird: Der Größenabstand zwischen Überschriften wie h2 und Text in Absätzen mit dem p-Tag bleibt dabei erhalten.

Wenn exakte Größen auf der Webseite eine Rolle spielen, kann durchaus font-size: 14px gewählt werden. In diesem Fall würde alle Texte der Seite um etwas über 10% verkleinert, denn die Vorgabe ist 16px.

body {
    font-size: 0.94em; // oder
    font-size: 94%;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 150%;
       …
}

Die Angabe in % (ganzzahlig!) erlaubt feine Schrittweiten bei der Vergrößerung oder Verkleinerung um jeweils 1% – das spricht für die Verwendung von Prozent-Angaben für die Schriftgröße gegenüber der Angabe in px. Wichtig ist in jedem Fall – gleich ob px oder em oder % – dass die Abstände zwischen Absätzen nicht absolut, sondern relativ vorgegeben werden.

Wenn für CSS margin px für den Abstand zwischen p- oder h2-Tags gesetzt sind, ist px jetzt eine absolute Angabe (während die Vorgabe font-size: 14px für body eine relative Angabe war). Damit müsste bei allen Änderungen der Schriftgröße für das body-Element der CSS margin neu angepasst werden.

Eine relative Schriftgröße für body regelt also die Schriftgröße für alle Elemente einer Webseite, da alle Elemente innerhalb von body diese Eigenschaft erben. Diese Option wird auf vielen Webseiten genutzt, denn auf den meisten Webseiten wurde früher die »normale« Schriftgröße ein wenig reduziert, um die Inhalte übersichtlicher darzustellen. In modernen Layouts wird die Schriftgröße für die großen Monitore generell vergrößert.

Schriftgröße und CSS-Kaskade

Wer generell kleinere Schriften wünscht, spart durch diese Technik Schreibarbeit im Stylesheet. Doch der Effekt kann auch zurückschlagen – wer z.B. für das ul-Element eine Verkleinerung auf diesem Wege durchsetzen will, dem schlägt die Vererbung ein Schnippchen: Jedes tiefer verschachtelte Element erbt die CSS-Eigenschaft und die Listenelemente werden von Ebene zu Ebene immer kleiner.

  • Erste Ebene der ungeordenten Liste
  • Erste Ebene der ungeordenten Liste
    • Zweite Ebene der ungeordenten Liste
    • Zweite Ebene der ungeordenten Liste
      • Dritte Ebene der ungeordenten Liste
      • Dritte Ebene der ungeordenten Liste

Schriftgröße in REM

Der Falle für %- und EM-Angaben mit den schrumpfenden (oder wachsenden) Schriftgrößen durch die CSS-Kaskade könnten wir durch die Angabe vom REM vermeiden.

rem funktioniert wie em, aber bleibt relativ zum root-Element der Seite statt relativ zum Eltern-Element.

0.75rem sind 12px (1rem ist 16px – die Normschrift in HTML-Seiten.)

Für alte Browser kann ein Fallback durch Pixel angegeben werden:

p, li { 
    font-size: 12px; 
    font-size: 0.75rem;
}

px Pixel • Konsistente Schrift, festes Layout

px Schriftgrößen | Zwar wird durch Schriftgrößen in Pixeln eine konsistentere Darstellung erreicht, aber auf dem 13-Zoll Monitor eines Notebooks wird eine Schrift mit 10 px bei einer Bildschirmauflösung von 1024x640 Pixeln anders wirken als auf einem 22-Zoll-Monitor mit einer Auflösung von 1680 x 1050 Pixeln.

%, em / rem / ex für Schriftgrößen

Sowohl relative Angaben wie em, % als auch absolute Angaben wie px haben Vor- und Nachteile. em/rem oder % für die Schriftgröße ist eine elegante Lösung, die dem Benutzer die Anpassung an die eigenen Sehgewohnheiten erlaubt, während sich mit Schriftgrößen in px ein pixelgenaues Layout umsetzen lässt.

Im Grunde genommen ist es egal, ob ich die Schriftgröße in em, ex, rem oder px angegebe.

Das W3C empfiehlt zwar »em« bzw. »rem«, aber die Empfehlung stammt noch aus der Zeit, als der Benutzer Schriftgröße bei der Angabe von »px« nicht ändern konnte. Heute kann jeder Browser auf Anweisung des Benutzers die Schriftgröße ändern, gleich ob %, px oder em.

Auf jeden Fall aber können wir nicht vorhersagen, wie groß die Schrift jetzt tatsächlich auf den verschiedenen Systemen erscheinen wird.

Angaben in absoluten Maßen wie pt oder cm sind vollkommen unvorhersehbar, denn wir wissen nie, ob das System des Besuchers die Umrechnung in die Pixel des Monitors korrekt durchführt. Zudem braucht diese Umrechnung natürlich auch Zeit und verlangsamt den Aufbau der Seite.

font-size je nach Viewport: vw, vh, vmin, vmax

Die Unwägbarkeiten der Schriftgrößen potenzieren sich mit dem responsiven Webdesign. Von einem großen Monitor halten wir einen größeren Abstand als von einem iPhone. CSS trägt dem Rechnung durch neue Werte für die Schriftgröße: vw, vh und vmin bzw. vmax. Eine Einheit vw bedeutet 1% der Viewport-Achse (Breite – vw oder Höhe – vh).

Read meRead meRead meRead me
  • 1vw = 1% der Breite des Viewports
  • 1vh = 1% der Höhe des Viewports
  • 1vmin = 1vw oder 1vh, je nachdem, welcher Wert der kleinere ist
  • 1vmax = 1vw oder 1vh, je nachdem, welcher Wert der größere ist

KYLEJLARSON / Iphone 5 Abmessungen und Auflösungen

font-size – Schriftgröße

Numerische Angabe der Schriftgröße
cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
Schriftgröße in Prozent angeben
vergrößert oder verkleinert die Schriftgröße. Werte, die kleiner als 100% sind, reduzieren die Größe, größere Werte vergrößern die Schriftgröße. Bei 100% bleibt die Schrift unbeeinflusst.
Relative Schriftgrößen
  • larger
  • smaller
Die effektive Schriftgröße wird durch die Kombination von Monitor, Benutzervorlieben und Browser bestimmt.
Absolute Schriftgrößen
  • xx-small
  • x-small
  • small
  • medium (Voreinstellung – beim Fließtext in p-Tags sind das 1em oder 16 Pixel)
  • large
  • x-large
  • xx-large

Die effektive Schriftgröße wird durch die Kombination von Monitor, Benutzervorlieben und Browser bestimmt.

xx-smallsmallmediumlargex-large
pxx-smallsmallmediumlargex-large
Faktor3/58/916:53:2
Hh6h5h4h3h2