Ein Leitfaden zu CSS-Einheiten — Teil 2: Schriftbezogene Einheiten

Hinweis: Dieser Artikel wurde unter Zuhilfenahme von KI aus dem Englischen übersetzt. Hier geht’s zum Originaltext.

Falls du den ersten Teil dieser Artikelserie verpasst hast, starte hier!

CSS kennt viele verschiedene Einheiten, um Dimensionen zu beschreiben, die Spezifikation nennt das "Längen". Schriftbezogene Längeneinheiten erzeugen Werte – wie der Name schon sagt – die von der Schriftgröße ihres Elternelements abhängig sind. Es sind multiplikatorbasierte Werte, zum Beispiel 1.5em == 1.5 × $fontSize. Hier sind ein paar davon:

em ist eine Einheit, die relativ zur Schriftgröße des aktuellen Elements ist. Es ist eine typografische Einheit seit der Zeit des Metalltypendrucks und war ursprünglich eine Referenz auf die Breite des Großbuchstabens M (daher der Name). Beispiele!

Diese .box wird mit 18px Polsterung dargestellt, weil 1em relativ zu ihrer impliziten Schriftgröße ist:

Im nächsten Beispiel werden alle Listenelemente mit einem linken Rand von 3 × 12px = 36px dargestellt, weil font-size: 12px; die nächstliegende, vererbte Schriftgrößen-Deklaration ist.

em ist leicht zu verstehen, kann aber aufgrund der Natur der Schriftgrößenvererbung und der Kaskade in CSS zu unübersichtlichem und schlecht lesbarem Code führen. Es ist nicht immer klar, von welcher Schriftgröße du in einem bestimmten Moment ausgehst.

Das ist einer der Gründe, warum ich lieber... verwende:

Wie em ist rem relativ zur Schriftgröße, aber in diesem Fall immer zur Schriftgröße, die durch das Wurzelelement des Dokuments festgelegt wird (:root {…}, für Websites ist es das html-Element). In deiner gesamten CSS-Codebasis wird 1rem also immer in der gleichen Größe dargestellt. Aber die Frage ist: Welche Größe wird das in der Praxis sein?

Um das zu beantworten, lass uns kurz über Barrierefreiheit (a11y kurz gesagt) sprechen. Jeder Browser hat eine Standardschriftgröße und eine Methode für den Nutzer, diese zu ändern.

Das ist die Basis-Schriftgröße, die Nutzer auf deiner Website sehen, wenn sie nicht durch dein CSS verändert wird. Der Standard-Standard hier ist 16px, und laut dieser Studie ändern etwa 3% der Nutzer diese Einstellung, fast immer auf etwas Größeres als 16. Wenn es um das Internet geht, sind 3% ziemlich viele Millionen Menschen!

Wenn du jetzt so etwas machst...

... zerstörst du einen Teil der Barrierefreiheit für 3 Prozent der Leute. Diese Menschen sind darauf angewiesen, dass der Text größer skaliert wird, und deine statisch festgelegte Schriftgröße verhindert das.

Das bedeutet nicht, dass all dein Text >= 16px sein muss. Es bedeutet nur, dass Menschen, die größeren Text benötigen, auch größeren Text bekommen. Wenn also dein Design 14px für Fließtext verwendet, wird eine vom Nutzer eingestellte Browser-Schriftgröße von 20px (oder 125%) als 125% × 14px == 17.5px dargestellt.

Damit das sowohl für dein Design als auch für deine Nutzer funktioniert, verwende einfach rem für Schriftgrößen und verzichte auf das Setzen einer Basis-Schriftgröße:

Mehr Beispiele?

Schau dir diese vier Buttons an. Sie sehen für 97% aller Nutzer (die 16px-Menge) identisch aus:

Es wird kein Schriftgrößenkontext vererbt. Von links nach rechts:

• verwendet px für alles
• verwendet em für die Schriftgröße und px für das Padding
• verwendet em für alles
• verwendet rem für alles

Auf den ersten Blick scheinen alle vier Implementierungen gleichwertig zu sein. Aber schau, was passiert, wenn du die Standardschriftgröße des Browsers auf 24px (150%) änderst:

Von links nach rechts:

• font-size: 24px Diese Box hat sich überhaupt nicht verändert, weil wir die Standardeinstellung mit einem px-Wert überschreiben. Das ist schlechte Barrierefreiheit, der Nutzer sollte die Kontrolle darüber haben!
• font-size: 1.5em – besser, die Schrift ist größer, aber padding: 12px ist immer noch statisch, also hat sich das Padding nicht mit skaliert und der Designer wird wahrscheinlich unzufrieden sein (dazu neigen sie).
• padding: 0.5em – bisher am besten! Jetzt skaliert auch das Padding mit. 0.5em === 12px, weil die Schriftgröße in dieser Box 1.5em == 24px ist
• aber rem scheint identisch zu sein... warum sich damit beschäftigen?

Schau, was passiert, wenn diese in einem Container mit einer angegebenen Schriftgröße erscheinen, die sie erben:

• die erste ist immer noch zu klein
• die zweite ist viel zu groß und das Padding ist falsch
• unser Gewinner von vorher ist noch größer, weil sich das Padding anpasst
• Die mit rem ist wohl die "richtige" Lösung, weil sie mit der Schriftgrößeneinstellung des Nutzers skaliert, aber nicht von der Schriftgrößendeklaration eines Elternelements abhängig ist.

Fazit: Verwende rem-Einheiten, wenn du Text dimensionierst oder wenn du möchtest, dass etwas proportional zur Textgrößeneinstellung eines Nutzers ist. Einige Leute argumentieren, dass du rem für alles verwenden solltest. Andere sind anderer Meinung. Meiner Meinung nach gibt es hier keine endgültige Antwort. Es hängt von deinem Design, deinem Ansatz zur Barrierefreiheit und deinem Anwendungsfall ab. Sei dir der Unterschiede bewusst und entscheide – zusammen mit einem Designer – für jede deiner Komponenten, wie das Skalieren funktionieren soll. Sei konsequent und teste die Dinge mit verschiedenen Schriftgrößeneinstellungen des Browsers und Browserzoomstufen!

Es gibt zwei weitere relative Einheiten, die man in echten Projekten nie sieht: ex und ch.

ex bezieht sich auf die x-Höhe der aktuellen Schriftart. Chris Coyer erklärt es weiter:

Quelle: CSS Tricks

ch ist ähnlich, bezieht sich aber anstelle der x-Höhe der Schriftart auf die Breite des Zeichens 0 (pen).

Es wird eine weitere Reihe von Einheiten geben, die sich auf die Zeilenhöhe beziehen, aber keiner der Browser unterstützt sie bisher: lh und rlh.

Wie du siehst, gibt es viel zu entpacken, wenn du anfängst, all deine Optionen genauer zu betrachten. Und es kommt noch mehr! Im nächsten Teil werden wir prozentbasierte Einheiten besprechen.

Header-Foto von Jason Leung auf Unsplash