Die CSS-Einheiten em, ch und ex

Dieser Artikel ist eine Ergänzung zum Artikel Pixel, em und rem – was ist der Unterschied?

Die Einheiten character unit (ch) und ex sind ähnlich wie em relative Einheiten. Sie beziehen sich auf die Schriftgröße wie sie im nächsthöheren Container definiert ist.

1em entspricht einfach der im umgebenden Container definierten Schriftgröße. Manchmal liest man, die Höhe von 1em entspräche der Breite des Buchstabens „M“ einer Schrift, aber das kommt nicht ganz hin.
1ch entspricht der Breite der Ziffer „0“ (Null) einer Schrift. Die Einheit ex bezieht sich auf die Höhe des Buchstaben „x“ (x-height) der Schrift.

Schauen wir uns mal an wie das in der Praxis aussieht. Die folgenden zwei Beispiele basieren auf diesem Code-Schnipsel.

<div class="container" style="font-size:40px;"> 
<h2 style="font-size:1em">Eine Headline 1em </h2> 
<h2 style="font-size:1ch">Eine Headline 1ch (0)</h2> 
<h2 style="font-size:1ex">Eine Headline 1ex (x)</h2> 
</div>Code-Sprache: HTML, XML (xml)

Damit man besser erkennen kann, was passiert, habe ich die Schriftgröße des Containers auf 40px gesetzt.

Beispiel 1 Schrift „Courier New“
In dieser Schrift sind alle Buchstabe gleich breit. Dadurch braucht die Schrift mehr Platz.

Beispiel 2 Schrift „Fira Sans“
Bei dieser Schrift sind die Buchstaben unterschiedlich breit, das Schriftbild ist harmonischer. Die Schrift braucht dadurch weniger horizontalen Raum.

Wann passt welche Einheit?

Die Einheiten ch und em kann man gut zum „Zählen“ von Zeichen verwenden. Wenn ich zum Beispiel erreichen möchte, dass eine Textzeile ab einer gewissen Länge umbricht, kann ich so etwas schreiben:

<div class="container" style="font-size:20px;"> 
<p style="max-width:15em">Das ist eine lange Textzeile, die nach 15em umbricht.</h2> 
<p style="max-width:15ch">Das ist eine lange Textzeile, die nach 15ch umbricht.</h2> 
</div>Code-Sprache: HTML, XML (xml)

Die Darstellung sieht so aus:

Der Umbruch erfolgt bei em und ch an unterschiedlichen Stellen, weil die Einheiten von unterschiedlichen Maßen ausgehen. Bei em ist es (in etwa) die Breite des Buchstabens „M“, bei ch die Breite der Ziffer Null. Besonders exakt funktioniert das Zählen allerdings nicht, es läuft immer ein bisschen auf Trail and Error hinaus.

character unit (ch) für Zahlen

Wenn Zahlen im Spiel sind, kann ch eine gute Alternative zu em sein. Bei einem Formularfeld, das ein Datum enthält, kenne ich die genaue Anzahl der Zahlen. Wenn ich die Breite vom Formularfeld in ch angebe, dann kann ich seine Breite exakt auf diese Anzahl anpassen.

Ein Anwendungsfall für die Einheit ex (x-Höhe) ist mir bisher noch nicht untergekommen.