Text auszeichnen und ausrichten

Ein Text kann in der richtigen Schrift und Größe stehen und trotzdem holpern. Vielleicht sitzt er schlecht in seiner Spalte, die Unterstreichung hängt an den Unterlängen, oder Großbuchstaben stehen zu eng.

01 / 04Ausrichten

Die vier Werte von text-align kennst du aus jedem Textprogramm. Im Web sind zwei davon nützlich.

left ist der Normalfall für lateinische Schriften und die beste Wahl für Fließtext. center passt für kurze Dinge wie eine Überschrift, eine Bildunterschrift oder einen Button, aber für mehr als drei Zeilen ist es unbrauchbar, weil das Auge bei jeder Zeile den Anfang neu suchen muss.

right braucht man selten, meistens für Zahlen in Tabellen.

<p class="links">Links ausgerichtet: die rechte Kante ist unruhig, die Wortabstände dafür gleichmäßig. Im Web liest sich das am besten.</p>
<p class="blocksatz">Blocksatz: beide Kanten sind gerade, dafür reißen die Wortabstände Löcher in die Zeilen. Ohne Silbentrennung wird das schnell unschön.</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 18px;
  max-width: 28ch;
  border: 1px solid #d4d4d8;
  padding: 8px;
  margin-bottom: 12px;
}

.links {
  text-align: left;
}

.blocksatz {
  text-align: justify;
}

Bleibt justify, der Blocksatz. Im Druck sieht er gut aus, im Web meistens nicht. Schuld ist die fehlende Silbentrennung. Um beide Kanten gerade zu bekommen, dehnt der Browser die Wortabstände, und bei schmalen Spalten reißt das Löcher in die Zeilen.

Statt left und right gibt es außerdem start und end. Die richten sich nach der Leserichtung der Sprache und sind damit die bessere Wahl, sobald eine Seite auch auf Arabisch oder Hebräisch erscheinen soll. Mehr dazu in Lektion 16.2.

02 / 04Unterstreichen

text-decoration ist ein Shorthand, also eine Kurzschreibweise, die mehrere Eigenschaften in einer Zeile setzt. Hier sind es vier, -line für die Art der Linie, -color für ihre Farbe, -style für durchgezogen oder gewellt und -thickness für ihre Dicke. Mit allen vier Teilen in einer Zeile versteht ihn Safari erst seit Version 26.2 vom Dezember 2025. Für ältere Safaris stehen die Teile deshalb einzeln da.

Am häufigsten sieht man none an einem Link, und das ist mit Vorsicht zu genießen. Im Fließtext erkennt man Links an ihrer Unterstreichung, gerade wenn man Farben schlecht unterscheiden kann. Nimmst du sie weg, muss etwas anderes an ihre Stelle treten.

<p>Eine <a class="standard" href="#">normale Unterstreichung</a> wird um die Unterlängen von g, j und p herum unterbrochen und wirkt dadurch zerhackt.</p>
<p>Eine <a class="besser" href="#">Unterstreichung mit Abstand</a> liegt unter den Unterlängen und bleibt durchgezogen.</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 20px;
}

a {
  color: #2563eb;
}

.standard {
  text-decoration-line: underline;
}

.besser {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

Interessanter ist das Gegenteil, eine Unterstreichung, die besser aussieht. Die Standardlinie liegt so dicht am Text, dass sie den Unterlängen von g, j und p in die Quere kommt. Durchgeschnitten werden die Buchstaben trotzdem nicht. text-decoration-skip-ink steht von Haus aus auf auto, und damit unterbricht der Browser die Linie um jede Unterlänge herum. Das ist besser als ein Strich quer durchs g, sieht bei mehreren Unterlängen in einer Zeile aber zerhackt aus.

text-underline-offset schiebt die Linie so weit nach unten, dass sie unter den Unterlängen durchläuft und wieder durchgezogen ist. text-decoration-thickness macht sie dicker. Zusammen ergibt das eine Linie, die man als gestalterische Entscheidung erkennt.

03 / 04Großschreiben und sperren

text-transform: uppercase stellt Text in Großbuchstaben dar. lowercase macht das Gegenteil, capitalize schreibt jedes Wort groß.

<p class="rubrik">Aus dem Blog</p>
<h2>Warum CSS keine Fehler meldet</h2>
<p class="hinweis">Markier die Rubrik oben mit der Maus und kopier sie irgendwohin. Was ankommt, ist der Originaltext mit kleinen Buchstaben.</p>

.rubrik {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  color: #52525b;
  margin: 0 0 4px 0;
}

h2 {
  font-family: system-ui, sans-serif;
  margin: 0 0 16px 0;
}

.hinweis {
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

text-transform ändert nur die Darstellung. Im DOM steht weiter der Originaltext, und textContent liefert ihn so, wie er im HTML steht. Beim Kopieren landet in Chrome wie in Firefox der Originaltext in der Zwischenablage. Was ein Screenreader bekommt, entscheidet dagegen der Browser, und Chrome reicht ihm die Großbuchstaben weiter. Ins Stylesheet gehört die Großschreibung trotzdem, denn sie ist eine Frage der Gestaltung. Dort lässt sie sich mit einer Zeile wieder abschalten. Im HTML stünde sie fest.

Du kannst das auch ohne Kopieren nachprüfen, in der Eingabezeile der Console. Auf

document.querySelector(".rubrik").textContent

antwortet der Browser mit „Aus dem Blog“, also mit der Schreibweise aus dem Markup. Auf der Seite stehen trotzdem Großbuchstaben. Die Zeile ist JavaScript, und das lernst du in diesem Kurs nicht. Abtippen genügt. Fragst du nach getComputedStyle(document.querySelector(".rubrik")).textTransform, kommt dagegen uppercase zurück. Der Text ist klein, die Anweisung an den Browser lautet groß.

Dazu gehört fast immer letter-spacing, die Laufweite. Großbuchstaben stehen von Haus aus zu eng beieinander, weil Schriften für gemischte Schreibweise entworfen sind. Ich fange mit einem Achtel der Schriftgröße an.

Bei sehr großer Schrift ist es umgekehrt. Dort wirken die Abstände zu weit, und ein leicht negativer Wert wie -0.02em macht die Überschrift kompakter. Das Prinzip kennst du schon aus Lektion 2.7, dort stand es noch in Pixeln.

In em wächst die Laufweite mit der Schriftgröße mit. Zwei Pixel sind bei 16px Schrift viel und bei 48px kaum sichtbar.

04 / 04Was man selten braucht

Zwei Eigenschaften gehören noch in diese Gruppe. word-spacing setzt die Wortabstände, und die stimmen in der Schrift meistens schon. text-indent rückt die erste Zeile ein. Beide stehen in der CSS-Referenz, unter letter-spacing und word-spacing und unter text-transform und text-indent.

In der Aufgabe bekommen Rubriken und Links genau diese Feinheiten.