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.

Eine Headline 1em

Eine Headline 1ch (0)

Eine Headline 1ex (x)


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

Eine Headline 1em

Eine Headline 1ch (0)

Eine Headline 1ex (x)


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:

Das ist eine lange Textzeile, die nach 15em umbricht.

Das ist eine lange Textzeile, die nach 15ch umbricht.

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.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

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

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.