Die Baseline, deutsch Grundlinie, ist die gedachte Linie, auf der die Buchstaben einer Zeile stehen. Buchstaben wie p und g reichen mit ihrer Unterlänge darunter, alle anderen setzen auf ihr auf. Von der Baseline aus misst die Typografie Zeilenabstand, x-Höhe und Versalhöhe.
- Baseline
Die gedachte Linie, auf der die Buchstaben einer Zeile stehen.
Beispiel: „Das Icon sitzt auf der Baseline des Textes daneben und wirkt deshalb wie eingesetzt.“Auch: Grundlinie, Schriftlinie.
Abgrenzung zu Baseline bei web.dev: Unter diesem Namen führen die Browserhersteller seit 2023 eine Kennzeichnung, ob eine Webtechnik in allen großen Browsern funktioniert. Mit der Schrift hat das nichts zu tun.
Wofür die Baseline gebraucht wird
Laut Google Fonts ist sie der Bezugspunkt, von dem aus andere Maße gemessen werden. Die Zeilenhöhe reicht von Baseline zu Baseline, und in einem Basislinienraster stehen die Baselines aller Zeilen auf gemeinsamen Linien.
Baseline in CSS
CSS richtet an der Baseline aus, wenn Elemente verschiedener Größe in einer Zeile stehen. vertical-align: baseline ist der Standard für Inline-Elemente, und in Flexbox setzt align-items: baseline Elemente so, dass ihre Texte auf einer Linie stehen, auch wenn die Schriftgrößen verschieden sind.
.preis {
display: flex;
align-items: baseline;
gap: 0.25rem;
}Wenn die Baseline nicht stimmt
Ein Button-Text, der neben einem Eingabefeld eine Spur höher sitzt, oder ein Preis, dessen Euro-Zeichen nicht auf der Linie der Zahl steht: Solche Versätze fallen auf, auch wenn sie nur zwei Pixel betragen.