initial-letter: Klassische Drop Caps ohne Float-Hacks umsetzen

1. Das klassische Problem: Drop Caps mit float nachbauen

Bevor es initial-letter gab, bestand die einzige Möglichkeit für eine vergrößerte Initiale darin, den ersten Buchstaben in ein eigenes span zu packen, ihn mit float: left aus dem normalen Textfluss zu lösen und die font-size so lange manuell zu erhöhen, bis die Initiale optisch über etwa drei bis vier Zeilen reichte. Das Ergebnis war nie wirklich präzise, weil float keine Beziehung zur tatsächlichen Zeilenanzahl kennt.

Zusätzlich musste die Zeilenhöhe des umfließenden Textes manuell mit der Höhe der Initiale abgeglichen werden, damit der Buchstabe nicht über die letzte umflossene Zeile hinausragt oder zu früh endet. Änderte sich später die Schriftart oder die Basisschriftgröße des Absatzes, brach diese fein austarierte Berechnung regelmäßig, und die gesamte Initiale musste von Hand neu vermessen werden.

2. Die Syntax von initial-letter: Größe und Sink-Zeilen

Die Property initial-letter nimmt einen oder zwei numerische Werte entgegen. Der erste Wert legt fest, über wie viele Zeilenhöhen die Initiale in der Höhe reicht, zum Beispiel initial-letter: 3 für eine über drei Zeilen reichende Initiale. Ein zweiter, optionaler Wert legt fest, in wie vielen Zeilen die Initiale absinkt, also wie viele umflossene Zeilen tatsächlich vom Buchstaben eingerückt werden.

Fehlt der zweite Wert, übernimmt der Browser automatisch denselben Wert wie den ersten, sodass Größe und Sink-Anzahl standardmäßig übereinstimmen. Ein abweichender zweiter Wert ist nützlich, wenn eine optisch sehr große Initiale gewünscht ist, die aber nur über zwei Zeilen tatsächlich Text verdrängen soll, etwa bei dekorativen Schwungbuchstaben mit viel Weißraum im oberen Bereich.

p.lead::first-letter {
  initial-letter: 3; /* Groesse 3 Zeilen, Sink automatisch 3 */
  font-weight: 700;
}

p.lead-large::first-letter {
  initial-letter: 4 3; /* optisch 4 Zeilen hoch, verdraengt nur 3 Zeilen Text */
  font-weight: 700;
}

3. initial-letter-align: die Feinausrichtung der Initiale

Standardmäßig richtet der Browser eine Initiale so aus, dass sie mit der Grundlinie der letzten umflossenen Zeile abschließt. Die Property initial-letter-align erlaubt es, diese Ausrichtung feiner zu steuern, etwa mit dem Wert alphabetic für die klassische Grundlinien-Ausrichtung oder cap-height, wenn die Oberkante der Initiale exakt mit der Cap-Height der ersten umflossenen Zeile fluchten soll.

Diese Feinjustierung ist besonders bei Serifenschriften spürbar, weil die Rundungen von Buchstaben wie O oder Q optisch minimal über die Grundlinie hinausragen müssen, um nicht zu schweben. Ohne diese Kontrolle mussten Designer solche optischen Korrekturen früher mit zusätzlichen, transformbasierten Verschiebungen von Hand nachbilden.

4. Zeilenanzahl kontrollieren: mehrzeilige Initialen bei responsiven Layouts

Bei responsiven Layouts ändert sich die line-height eines Absatzes häufig zwischen Mobile und Desktop, etwa weil auf kleineren Bildschirmen ein engerer Zeilenabstand gewünscht ist. Ein großer Vorteil von initial-letter gegenüber der float-Technik zeigt sich genau hier: Die Initiale berechnet ihre tatsächliche Schriftgröße bei jedem Reflow neu auf Basis der aktuell geltenden Zeilenhöhe, wodurch sie über exakt die angegebene Zeilenanzahl reicht, egal ob der Absatz gerade zwei oder drei Zeilenhöhen misst.

Der zweite, optionale Wert von initial-letter erlaubt außerdem, die visuelle Größe von der tatsächlichen Zeilenverdrängung zu entkoppeln. Ein Wert wie initial-letter: 5 3 erzeugt eine optisch sehr dominante Initiale, die aber nur drei Textzeilen tatsächlich einrückt, was bei dekorativen Displayschriften mit viel internem Weißraum am oberen Zeichenrand sinnvoll ist. Wird kein zweiter Wert angegeben, übernimmt der Browser automatisch denselben Wert für Größe und Sink, was für die meisten redaktionellen Anwendungsfälle die einfachere und robustere Wahl bleibt.

5. Grundlegendes Beispiel: eine Initiale über drei Zeilen

Im einfachsten Fall wird initial-letter auf das Pseudo-Element ::first-letter des ersten Absatzes eines Artikels angewendet. Der Browser berechnet daraufhin automatisch, wie stark die Initiale vergrößert werden muss, damit sie exakt drei Zeilenhöhen des umgebenden Fließtextes einnimmt, ganz ohne manuelle font-size-Berechnung.

Wichtig ist, dass ::first-letter nur den allerersten Buchstaben eines Blockelements erfasst, auch wenn dieser Buchstabe von anderen Inline-Elementen wie einem span umschlossen ist. Bei mehrsprachigem Content mit einleitenden Anführungszeichen kann das zu unerwarteten Ergebnissen führen, weshalb ein Test mit den tatsächlichen Inhalten immer sinnvoll ist.

article > p:first-of-type::first-letter {
  initial-letter: 3;
  font-weight: 800;
  color: #4a1d96;
  padding-inline-end: 0.35rem;
  font-family: "Georgia", serif;
}

6. Styling kombinieren: Farbe, Schriftart und Schatten

Da ::first-letter ein normales Pseudo-Element ist, lassen sich alle üblichen Typografie- und Effekt-Properties darauf anwenden: eine andere Schriftfamilie für einen bewussten Kontrast zum Fließtext, eine Akzentfarbe aus dem Corporate-Design, oder ein dezenter text-shadow für mehr visuelle Tiefe. Kombiniert mit initial-letter entsteht so eine vollwertige, editoriale Initiale, ohne ein zusätzliches Bild oder SVG einzubinden.

Ein häufiger Stilbruch besteht darin, für die Initiale eine komplett andere Display-Schrift zu verwenden als für den restlichen Fließtext, etwa eine dekorative Serifenschrift in einem sonst serifenlosen Artikel. Solche Kontraste funktionieren gut, solange die Initiale klar als gestalterisches Element und nicht als Fehler in der Schriftauswahl erkennbar bleibt.

article > p:first-of-type::first-letter {
  initial-letter: 3;
  font-family: "Playfair Display", serif;
  font-weight: 900;
  color: #6d28d9;
  text-shadow: 2px 2px 0 rgba(109, 40, 217, 0.15);
  padding-inline-end: 0.4rem;
  line-height: 1;
}

7. Anwendungsfälle: Blog-Artikel, Magazin-Layouts und E-Mail-Newsletter

Drop Caps eignen sich vor allem für redaktionelle Inhalte mit langen Fließtext-Absätzen, etwa Blog-Artikel, digitale Magazine oder ausführliche Newsletter-Ausgaben, bei denen eine visuelle Betonung des Einstiegs gewünscht ist. Für kurze UI-Texte, Formularhinweise oder Produktbeschreibungen im Onlineshop ist die Technik dagegen selten passend, weil sie dort eher als Stilbruch statt als bewusste Gestaltung wirkt.

Bei mehrspaltigen Magazin-Layouts markiert die Initiale zusätzlich klar den Beginn eines neuen Artikels oder Abschnitts, was die Orientierung für Leser verbessert, die eine Seite überfliegen statt linear zu lesen. Diese Orientierungsfunktion war historisch einer der Hauptgründe, warum Initialen im Print-Design überhaupt entstanden sind, lange bevor CSS existierte.

8. Fallback für Browser ohne initial-letter-Unterstützung

Fehlt die Unterstützung für initial-letter, ignoriert der Browser die Property und der erste Buchstabe wird normal groß dargestellt, ohne dass ein Fehler entsteht. Wer den gestalterischen Effekt trotzdem auf möglichst vielen Browsern erreichen will, kann als Fallback die klassische float-Technik hinterlegen und sie per @supports not gezielt nur dann aktivieren, wenn initial-letter fehlt.

Diese doppelte Absicherung bedeutet zwar etwas mehr CSS-Code, garantiert aber, dass die Initiale in praktisch jedem Browser sichtbar bleibt, nur mit leicht unterschiedlicher Präzision der Ausrichtung. Für die meisten Projekte reicht es allerdings aus, den nativen Fallback ohne Initiale zu akzeptieren, solange der Effekt rein dekorativ ist und keine Information trägt.

/* Fallback zuerst: klassische Float-Technik */
@supports not (initial-letter: 3) {
  article > p:first-of-type::first-letter {
    float: left;
    font-size: 3.2em;
    line-height: 0.85;
    padding-right: 0.4rem;
    font-weight: 800;
  }
}

/* Moderne Loesung, wo verfuegbar */
@supports (initial-letter: 3) {
  article > p:first-of-type::first-letter {
    initial-letter: 3;
    font-weight: 800;
  }
}

9. initial-letter im Vergleich zur klassischen float-Technik

Der entscheidende Unterschied zwischen beiden Techniken liegt in der Präzision: initial-letter berechnet die passende Schriftgröße auf Basis der tatsächlichen Font-Metriken und der gewünschten Zeilenanzahl, während die float-Technik auf einer geschätzten font-size beruht, die bei jeder Schriftart neu kalibriert werden muss.

Auch die Wartbarkeit unterscheidet sich deutlich: Ändert sich später die Basisschriftgröße des Fließtextes, passt sich eine mit initial-letter gesetzte Initiale automatisch an, während eine mit float gesetzte Initiale von Hand neu ausgemessen werden muss. Für neue Projekte ist initial-letter deshalb fast immer die bessere Wahl, sofern der Browser-Support für das jeweilige Publikum ausreicht.

10. Zusammenfassung

11. FAQ: initial-letter: Das Wichtigste auf einen Blick