CSS/Wertetypen/Schriftbezogene Längeneinheiten
- 15min
- leicht
Dieser Artikel beschreibt die Schriftbezogenen Längeneinheiten. Diese Einheiten beziehen sich nicht auf eine feste Maßeinheit wie Pixel, sondern auf andere Größen innerhalb des Dokuments.
Inhaltsverzeichnis
em – Bezug auf die aktuelle Schriftgröße
Der Begriff em ist mehrdeutig.Dieser Artikel behandelt die CSS-Maßeinheit em. Für das gleichnamige HTML-Element zur Textauszeichnung siehe HTML/Elemente/em.
Feste Größen wie px passen nicht immer gut zu Text und Layout. Eine Angabe in px beschreibt eine feste Größe: Ein Text mit 16px bleibt immer 16 Pixel groß, egal welche Schriftgröße der Benutzer einstellt oder auf welchem Gerät die Seite angezeigt wird.
Bei em ist die Größe dagegen abhängig von der aktuellen Schriftgröße. Dadurch können sich Texte und andere Elemente gemeinsam vergrößern oder verkleinern. Das ist besonders nützlich, weil Abstände, Schaltflächen oder andere Elemente oft zur Schrift passen sollen. Wenn die Schrift größer wird, wachsen diese Elemente automatisch mit.
Mit em beschreibt man also nicht eine feste Größe, sondern ein Verhältnis zur Schriftgröße. Es orientiert sich an der vom Browser berechneten Schriftgröße des Elements; dabei wird die Seitenlänge des Gevierts als Referenz verwendet. Das Geviert ist ein Quadrat, dessen Seitenlänge dem Mindestzeilenabstand der verwendeten Schrift entspricht, grob sind dies auch die Abmessungen des Großbuchstabens "M".
Zum Beispiel bedeutet 1em: so groß wie die aktuelle Schriftgröße. Hat ein Element eine Schriftgröße von 16px, entspricht 1em also 16px. Wird die Schriftgröße auf 20px geändert, entspricht 1em auch 20px.
Wird die Schriftgröße selbst (font-size) mit em angegeben, bezieht sich der Wert auf die Schriftgröße des Elternelements.
Dieses Beispiel aus dem Formulare-Tutorial zeigt die Vorteile von em:
.btn-em {
padding: 0.9em 1.4em;
background: oklch(0.7 0.1 120);
color: black;
border-radius: 0.4em;
border: none;
cursor: pointer;
font-size: var(--base-font);
box-shadow: 0 .2em .4em gray;
color: white;
text-shadow: 0 -.05em .05em #333;
}
In diesem Beispiel wurden alle Werte bis auf die Dicke des Rands in em notiert. Bei einer späteren Änderung der Schriftgröße skalieren die Werte für (Innen)-Abstände, Ränder und Schatten einfach mit. Dadurch bleiben die Proportionen erhalten.
Gleichzeitig entsteht so ein Single Point of Truth: Die Schriftgröße wirkt als zentrale Bezugsgröße, von der sich alle weiteren Maße ableiten. Ändert man diesen einen Wert, passt sich das gesamte Erscheinungsbild konsistent an — ohne dass man jede einzelne Eigenschaft manuell nachjustieren muss.
- Buttons mit CSS gestalten
Sauberes CSS ohne Chaos:
Gestaltung mit Variablen und SPOT
rem – Bezug auf die Basis-Schriftgröße
Ein Problem bei der Verwendung relativer Größen wie em zeigte sich besonders bei verschachtelten Elementen. Da sich ein em-Wert immer auf die Schriftgröße des jeweiligen Elternelements bezieht, werden die Werte entlang der Verschachtelungskette weitervererbt und erneut berechnet. Dadurch können sich Größen unbeabsichtigt vergrößern.
Beispielsweise bedeutet 1.25em bei einem Element mit einer Schriftgröße von 16px eine Größe von 20px. Befindet sich darin ein weiteres Element mit ebenfalls 1.25em, wird dieser Wert jedoch nicht erneut mit 16px berechnet, sondern mit den bereits vergrößerten 20px – das Ergebnis sind 25px.
Mit rem (engl: root-em) wurde eine Möglichkeit geschaffen, diese Kettenreaktion zu vermeiden. Ein rem bezieht sich immer auf die Schriftgröße des Wurzelelements (in HTML das html-Element) und nicht auf das jeweilige Elternelement. Dadurch bleibt die Bezugsgröße unabhängig von der Verschachtelung immer gleich.
Wenn beispielsweise die Schriftgröße des <html>-Elements 16 px beträgt, entspricht 1rem immer 16px, 1.25rem immer 20px und 2rem immer 32px – egal, wie tief das Element im Dokument verschachtelt ist.
:root { font-size: 1em; }
ul { font-size: 1.25em; }
aside ul { font-size: 1.25rem; }
Die Schriftgröße von ul beträgt 1.25em ausgehend von der im Elternelement vorhandenen (berechneten), bzw im root-Element festgelegten Schriftgröße.
Für Listen, die sich innerhalb von aside befinden, gilt die Schriftgröße von 1.25rem, die sich auf das Wurzel-Element :root bezieht.
<ul>
<li>Möbel nach Ihren Wünschen
<ul>
<li>Küchenmöbel</li>
<li>Regale und Schrankwände</li>
<ul>
<li>Sperrholz</li>
<li>Furnier</li>
<li>Massivholz</li>
</ul>
<li>Badezimmermöbel</li>
</ul>
</li>
<li>Haustüren</li>
<li>Gartenzäune</li>
<li>Reparaturen</li>
</ul>
Fazit:
Links wird jede ul größer, sodass …
-
uleine berechnete Schriftgröße von 20px -
ul ulvon 25px -
ul ul ulvon 32.5px hat.
Rechts behält jedes Listenelemente seine Schriftgröße von 1.25em, da sie vom Wurzelelement :root aus berechnet wird.
- Größenangaben
- absolute Werte
- relative Werte
- instrinsische Abmessungen
ch, ex & Co - die Exoten
Es gibt noch weitere relative Einheiten, die man in realen Projekten (fast) nie sieht. In der Spec gibt es weitere, hier nicht beschriebene Einheiten. (6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units)[1]
ex – Überbleibsel aus dem Print-Design
In der traditionellen Typografie beschreibt ex die Höhe des Kleinbuchstabens „x“ – eines Buchstabens ohne Ober- und Unterlängen. Diese Größe, die sogenannte x-Höhe, ist ein wichtiges Merkmal einer Schrift und beeinflusst wesentlich deren Erscheinungsbild und Lesbarkeit.
Obwohl ex bereits von Anfang an in CSS vorgesehen war, wird die Einheit heute nur selten verwendet. Der Grund dafür ist, dass die tatsächliche x-Höhe von der verwendeten Schriftart abhängt und daher nicht immer vorhersehbar ist. Für viele Layoutaufgaben sind deshalb besser kontrollierbare Einheiten wie em, rem oder Pixelwerte geeigneter.
Ist in der Schriftart keine x-Höhe definiert, so gilt 1ex = 0.5em.
body { font-size: 20px; max-width: 40em; }
div { display: inline-block; }
.ex { border: 2ex solid red; font-size: 2ex; }
#div2 { font-size: 4ex; }
.px { border: 20px solid red; }
#div4 { font-size: 40px; }
Die Schriftgrößen der beiden div-Elemente der Klasse ex wird als Vielfaches der x-Höhe der Schriftgröße des Elternelements (hier body) festgelegt. Diese ist zudem abhängig von der verwendeten Schriftart.
Die Rahmenbreiten dieser Elemente richten sich wiederum nach der x-Höhe der Schrift des Elements selbst.
Beispiel: Die x-Höhe der (für alle betreffenden Elemente) verwendeten Schriftart sei 0.4 und die Schriftgröße des Elternelements sei 16px. Es ergibt sich für das erste div-Element eine Schriftgröße von 16px (2 * 0.4 * 20px), die Rahmenbreite beträgt jedoch für dieses Element jedoch nur 12.8px (2 * 0.4 * 16px).
ch
Die Einheit ch (character unit) entspricht der Breite des Zeichens „0“ der verwendeten Schrift. Sie wurde eingeführt, um Größen an die Zeichenbreite einer Schrift anzupassen. Besonders nützlich ist ch bei der Begrenzung von Textbreiten, da sich damit beispielsweise eine Zeilenlänge von etwa 60 Zeichen angeben lässt. Bei Monospace-Schriften entspricht 1ch genau einer Zeichenzelle, bei proportionalen Schriften dient sie nur als Näherungswert.
:root { font-size: 1em; }
.em {max-width: 15em;}
.ex {max-width: 15ex;}
.ch {max-width: 15ch;}
Die Schriftgröße der Klasse ch wird als Vielfaches der 0-Breite der Schriftgröße des Elternelements (hier body) festgelegt. So hat jede Zeile bei 15ch auch 15 Zeichen. Diese ist zudem abhängig von der verwendeten Schriftart.
lh – Zeilenhöhe
Die lh (line-height unit) ist eine relative Längeneinheit, die im Allgemeinen dem berechneten Wert der line-height des Elements entspricht, für das sie verwendet wird, umgerechnet in eine absolute Länge.
[2][3][4]. Es gibt eine wichtige Ausnahme: um einen Selbstbezug zu vermeiden, wird bei line-height-Eigenschaft und alle font--Eigenschaften die line-height des Elternelements als Berechnungsgrundlage verwendet.
Manchmal ist es sinnvoll, die Zeilenhöhe zum Maßstab zu nehmen, so beim Vertikalen Rhythmus oder um Inline-SVG-Icons passgenau zu formatieren:
.icon {
background: #dfac20;
border-radius: 50%;
display: inline-block;
vertical-align: top;
margin-left: 1em;
}
.em {
width: 1em;
height: 1em;
}
.lh {
width: 1lh;
height: 1lh;
}
Die Icons sollen den gesamten verfügbaren Raum der Zeile ausfüllen. Mit einer Festlegung in em müsste man herumprobieren und eine Magic Number verwenden.
Mit der lh-Einheit ist dies ein Kinderspiel!
- Spalten (mit columns)
- columns
- columns-rule
- column-span
- Vertikaler Rhythmus
Siehe auch
Weblinks
Quellen:
- ↑ CSSWG.org: 6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units (CSS Values and Units Module Level 4)
- ↑ Relative length units based on font (mdn)
- ↑ W3C: lh Unit (CSS Values and Units Module Level 4) W3C Working Draft, 6 April 2023
- ↑ Line-height tricks made simpler with the ‘lh’ CSS unit Dan Cătălin Burzo
