Maßeinheiten für Schriftgrößen im Webdesign
Im Web gibt es verschiedene Einheiten, um die Schriftgröße zu definieren. Wir erklären was es damit auf sich hat.
Ohnehin ist die Angabe der Schriftgröße unabhängig von der Einheit mehr eine Empfehlung. Die tatsächlich angezeigte Größe hängt von der Auflösung und Größe des jeweiligen Geräts und vom Browser ab.
Absolute Einheiten:
Pixel und Punkt. Punkt kommt ursprünglich aus dem Printbereich, Pixel verwendet man in CSS. Ein Gerätepixel wiederum ist die kleinste kontrollierbare Einheit auf einem Bildschirm. Sowohl ein Punkt als auch ein CSS-Pixel können – je nach Auflösung des Geräts – aus einem Vielfachen von Gerätepixeln bestehen. Dass wieder häufiger die Bezeichnung Punkt auftaucht, hat weniger mit dem klassischen Punkt aus dem Print zu tun als mit dem Bedarf nach einer auflösungsunabhängigen Einheit, die nicht Gefahr läuft, mit einem Gerätepixel verwechselt zu werden. Google nennt diese Einheit übrigens dips (density-independent pixel).
Relative Einheiten:
Prozent, em und rem. Bei Prozentangaben wird die Schrift relativ zur Schriftgröße des Elternelements dargestellt. Ist diese 16 Pixel, ergibt eine Angabe von 50 Prozent eine Schriftgröße von 8 Pixel. em (= equal to M, also ungefähr die Breite des Buchstabens M) ist eine weitere relative Einheit, die sich zumindest bei der Größe der Schriften sehr nahe zur Prozentangabe verhält. Ein em entspricht 100 Prozent der Schriftgröße der Schrift des Elternelements.
Auch rem (= root em) ist eine relative Einheit. Der Unterschied zu em liegt im Bezugspunkt, in der Vererbungsregel. Mit em verhält es sich in etwa wie mit einer streng hierarchischen Befehlskette: Ein em weiß immer nur, was für das übergeordnete HTML-Element gilt und kann sich nur darauf beziehen. Je tiefer die Verschachtelung, je länger also die Kette wird, desto weniger entspricht der angewendete em-Wert in seiner tatsächlichen Größe dem ursprünglich definiertem em-Wert. rem hingegen bezieht sich konsequent auf den ursprünglichen definierten Wert, was deutlich übersichtlicher ist. rem kam erst in CSS3 hinzu und wird noch nicht von allen Browsern unterstützt.
Noch viel mehr Infos und Meinungen zum Thema Webtypografie, inspirierende Beispiele sowie eine Buchempfehlung und 10 Tipps für gute barrierefreie Webtypografie finden Sie in PAGE 10.2019, die Sie hier bestellen können.
[10009]
Das könnte dich auch interessieren
