Versalien: wann Großbuchstaben helfen und wann sie schaden

Versalien helfen, wenn der Text kurz ist: eine Eyebrow über einer Schlagzeile, ein Label, ein Button, ein Datum oder eine Schlagzeile aus zwei oder drei Wörtern. Sie schaden, wenn der Text lang wird. Großbuchstaben haben alle dieselbe Höhe, deshalb wird ein Wort in Versalien zu einem schlichten Rechteck statt zu einer erkennbaren Form, und ein ganzer Satz davon liest sich langsamer und wirkt wie Geschrei. Kurz und mit etwas mehr Laufweite eingesetzt, bringen Großbuchstaben Ordnung und Autorität; für alles verwendet, ebnen sie die Hierarchie ein.

Warum Versalien schwerer zu lesen sind

Kleinbuchstaben haben Oberlängen (b, d, h, k) und Unterlängen (g, p, y). Zusammen geben sie jedem Wort eine eigene Kontur, an der geübte Leser vertraute Wörter erkennen, ohne sie zu buchstabieren. In Versalien liegt jeder Buchstabe zwischen denselben zwei Linien. Die Kontur wird zum Kasten, und das Auge muss bei jedem Buchstaben genauer hinsehen. Bei zwei oder drei Wörtern ist das in Ordnung. Bei einem Absatz ermüdet es.

Wann Versalien funktionieren

• Eyebrows und Kicker: eine kleine Kategorie oder ein Datum über der Schlagzeile, etwa NEU oder FOLGE 12. Versalien zeigen dem Leser: Das ist ein Label, kein Inhalt.
• Navigation und Buttons: kurze, schnell erfassbare Wörter, bei denen alle Einträge von derselben Art sind.
• Kurze Schlagzeilen aus einem bis drei Wörtern: SALE, JETZT OFFEN, AUSVERKAUFT. Die Form des Blocks wird Teil des Designs.
• Wortmarken und Logos: Viele starke Logos stehen in Versalien, weil das Wort dort als festes Bild gesehen und nicht gelesen wird.
• Datenlabels und Tabellenköpfe: Kurze Überschriften in Versalien über den Spalten halten sie von den Werten darunter getrennt.

Wann Versalien schaden

Vor Schreibschriften muss man besonders warnen: Ihre Großbuchstaben sind dafür gemacht, Wörter zu beginnen, nicht nebeneinander zu stehen, und ein Wort in Schreibschrift-Versalien ist oft kaum lesbar. Auch der Ton zählt. Versalien wirken laut, das passt zu einem Sale und ruiniert eine Entschuldigung. Wenn du allgemeiner zwischen Schreibweisen für Überschriften wählst, behandelt Satzschreibweise oder Title Case die leiseren Optionen.

Wie viel Laufweite Versalien brauchen

Schriften sind für Kleinbuchstaben abgestimmt. Großbuchstaben mit ihren geraden Seiten und breiten Formen wirken in der Standardlaufweite gedrängt. Öffnest du die Laufweite, bekommt jeder Buchstabe Luft und das Wort lässt sich leichter erfassen. Je kleiner der Text, desto mehr Raum braucht er. Laufweite erklärt das Tracking allgemein; für Versalien nimmst du diese Startwerte.

Große Versalien brauchen bei schwierigen Paaren wie AV, LT und TY womöglich auch manuelles Unterschneiden, weil die Standardlücke dort zu groß wirkt. Tracking und Kerning erklärt den Unterschied zwischen den beiden Anpassungen.

text-transform uppercase in CSS verwenden

Schreib die Wörter in deinem HTML in normaler Schreibweise und setze die Großbuchstaben per CSS. Kopieren, Suchergebnisse und Übersetzungstools bekommen dann natürlichen Text, und du vermeidest, dass ein Screenreader ein in Großbuchstaben getipptes Wort für eine Abkürzung hält und buchstabiert. Außerdem kannst du deine Meinung später ändern, ohne etwas neu zu tippen.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

Setze auch das Attribut lang der Seite. text-transform folgt Sprachregeln, was bei Wörtern wie dem türkischen i mit Punkt wichtig ist, und die MDN-Referenz beschreibt, wie jede Sprache behandelt wird. Übersetzte Labels sind oft länger als englische, und Versalien machen sie noch breiter, lass in Buttons und Tabs also Platz.

Versalien in Social-Media-Posts

Auf dem Handy halten sich Großbuchstaben bei kleinen Größen oft besser als kleine Kleinbuchstaben, weil ihre Formen einfacher sind. Darum eignen sie sich für die winzigen Details eines Posts: ein Datum, ein Handle, eine Seitenzahl im Karussell. Für die Schlagzeile nimmst du Versalien nur, wenn sie sehr kurz ist; sonst liest sich normale Schreibweise im Moment des Vorbeiscrollens schneller. Eine kräftige Schlagzeilenschrift hilft in beiden Fällen. Textaufbau für Social-Media-Posts zeigt, wie die Ebenen zusammenpassen.

In Gradiently schreibt der Designer Schlagzeilen und Details für dich und setzt sie in deinem Mark, und jedes Wort bleibt danach im Studio editierbar. Auto-Ink hält kleine Labels in Versalien so lesbar wie die Schlagzeile, indem es für jede Zeile helle oder dunkle Schrift aus der Palette des Marks wählt.