Begrenze Textblöcke mit u-w--m auf angenehme Lesebreite. Nutze t-color--muted nur für Nebeninformationen — nie für den Haupttext.
1. Zeilenlänge
Text ist am besten lesbar bei etwa 60 bis 75 Zeichen pro Zeile. Wird die Zeile länger, verliert das Auge beim Zeilenwechsel die Spur — man liest dieselbe Zeile zweimal oder springt eine über.
In einem breiten Container passieren schnell 120 Zeichen. Deshalb:
| Klasse | Wofür |
|---|---|
u-w--m |
Fließtext — der Normalfall |
u-w--l |
Tabellen, Listen, breitere Inhalte |
u-w--full |
volle Breite — nur für Bilder und Layout |
Setze die Klasse am Container, der den Text umschließt, nicht am Text-Widget selbst — dann gilt sie für alle Inhalte darin.
2. Dezente Farbe sparsam einsetzen
t-color--muted macht Text zurückhaltender. Das ist nützlich für:
- Datum, Autor, Kategorie
- Zähler („13 Artikel“)
- ergänzende Hinweise unter einem Feld
Nicht für Fließtext, den jemand wirklich lesen soll. Dezente Farben haben weniger Kontrast — auf einem Laptop bei Tageslicht oder für ältere Augen wird das anstrengend.
3. Textgröße nicht zu klein wählen
t-text--xs ist für Fußnoten und Meta-Angaben gedacht — nicht für normalen Inhalt. Wenn ein Textblock zu viel Platz braucht, kürze ihn, statt ihn zu verkleinern.
Faustregel: Alles, was ein Besucher lesen muss, bekommt mindestens t-text--s. Der Standard bleibt t-text--m.
4. Absatzlänge
Nicht das System, aber genauso wichtig: Ein Absatz sollte selten länger als vier bis fünf Zeilen sein. Am Bildschirm liest niemand Blocktürme — auch nicht, wenn der Inhalt gut ist.
t-text--center) ist für Überschriften und kurze Aussagen gedacht. Bei mehr als drei Zeilen wird er schwer lesbar, weil jede Zeile an einer anderen Stelle beginnt.