Text auszeichnen und ausrichten

Bis hierher ging es darum, welche Schrift in welcher Größe erscheint. Jetzt geht es um die Feinheiten daran: wie der Text in seiner Spalte sitzt, wie eine Unterstreichung aussieht und wann Großbuchstaben eine gute Idee sind.

01 / 04Ausrichten

text-align kennt vier Werte, und 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: eine Überschrift, eine Bildunterschrift, ein Knopf. 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, und der Grund 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 aus vier Teilen: -line für die Art der Linie, -color für ihre Farbe, -style für durchgezogen oder gewellt und -thickness für ihre Dicke.

Der Wert none an einem Link ist der häufigste Einsatz, und er ist mit Vorsicht zu genießen. Eine Unterstreichung ist im Fließtext das Merkmal, an dem Links erkannt werden, gerade für Menschen, die Farben schlecht unterscheiden. 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;
}

Der interessantere Fall 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 per Voreinstellung auf auto, der Browser unterbricht die Linie also 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, und 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;
}

Der Punkt daran: es ändert nur die Darstellung. Im DOM steht weiter der Originaltext. Kopiert jemand die Zeile, bekommt er die kleine Schreibweise, und Screenreader lesen sie ebenfalls normal vor. Deshalb ist es die richtige Lösung und Großbuchstaben im HTML die falsche.

Das kannst du dir bestätigen lassen, ohne etwas zu kopieren. Ganz unten im Reiter „Console” sitzt eine Eingabezeile. Tipp dort das hier ab und drück Enter:

document.querySelector(".rubrik").textContent

Die Antwort ist Aus dem Blog, also genau die Schreibweise aus dem Markup, während auf der Seite daneben Großbuchstaben stehen. Die Zeile ist JavaScript, und das lernst du in diesem Kurs nicht; abtippen genügt. Fragst du danach getComputedStyle(document.querySelector(".rubrik")).textTransform, kommt uppercase zurück. Zwei Antworten, zwei Ebenen: der Text ist klein, die Anweisung an den Browser lautet groß.

Dazu gehört fast immer letter-spacing. Großbuchstaben stehen von Haus aus zu eng beieinander, weil Schriften für gemischte Schreibweise entworfen sind. Ein Achtel der Schriftgröße ist ein guter Startwert.

Bei sehr großer Schrift geht es umgekehrt: dort wirken die Abstände zu weit, und ein leicht negativer Wert wie -0.02em macht die Überschrift kompakter. Dasselbe Prinzip hast du in Lektion 2.7 schon einmal gesehen, dort noch in Pixeln notiert.

Warum in em und nicht in Pixeln: die Laufweite soll zur Schriftgröße passen. Zwei Pixel sind bei 16px Schrift viel und bei 48px kaum sichtbar.

04 / 04Was man selten braucht

word-spacing verstellt die Wortabstände. Das braucht man fast nie, weil die Schrift sie besser kennt als du.

text-indent rückt die erste Zeile ein, wie im Buchdruck. Im Web ist das ungewöhnlich, weil Absätze dort durch Abstand getrennt werden und nicht durch Einzug. Beides zusammen ist immer zu viel.

Nützlich ist text-indent trotzdem, und zwar mit einem großen negativen Wert: so schiebt man Text aus dem sichtbaren Bereich, ohne ihn für Screenreader zu entfernen. Für diesen Zweck gibt es allerdings inzwischen sauberere Wege, nämlich die Technik aus Lektion 4.5: das Element winzig machen und beschneiden, statt seinen Text weit nach links zu schieben.