Initialen – Anfangsbuchstaben gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Initialen (lateinisch initium ‚Anfang‘, ‚Beginn‘;) sind schmückende Anfangsbuchstaben, die als erste Buchstaben von Kapiteln oder Abschnitten verwendet werden.[1] Sie sind eine gute Möglichkeit, ansonsten eher lang(weilig) aussehende Texte aufzulockern.


Initialen mit initial-letter

Browserunterstützung
caniuse.com

Mit initial-letter gibt es eine CSS-Eigenschaft, die Initialen typografisch sauberer beschreibt als die klassische Lösung mit font-size, line-height und float. Die Eigenschaft gehört zum CSS Inline Layout Module und legt fest, wie viele Textzeilen ein Anfangsbuchstabe einnehmen soll und bis zu welcher Zeile er abgesenkt wird.[2]

Üblicherweise wird initial-letter mit dem Pseudo-Element ::first-letter kombiniert:

CSS initial-letter ansehen …
.initial-3-zeilen::first-letter {
  /* 3 Zeilen hoch und 3 Zeilen tief abgesenkt */
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

.initial-3-zeilen-1-zeile-versenkt::first-letter {
  /* 3 Zeilen hoch, aber nur bis zur 1. Zeile abgesenkt */
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
}

/* nur für unterstützte Browser gestalten */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .initial-gestaltet::first-letter {
    /* 3 Zeilen hoch, bis zur 5. Zeile abgesenkt */
    -webkit-initial-letter: 3 5;
    initial-letter: 3 5;
    margin-right: 0.5rem; /* Abstand zum Fließtext */
    font-weight: bold;
    background: gold;
    border: thick solid steelblue;
    color: #c32e04;
    padding: 1em; /* Initialen dürfen wie Boxen gestaltet werden. */
  }
}

Der erste Wert von initial-letter beschreibt die Größe des Initials in Zeilen. Ein Wert von 3 bedeutet also: Der Anfangsbuchstabe soll drei Textzeilen hoch sein. Der optionale zweite Wert beschreibt, bis zu welcher Zeile das Initial abgesenkt wird. Bei initial-letter: 3 1 ist das Initial drei Zeilen hoch, steht aber nur auf der ersten Zeile; bei initial-letter: 3 wird der zweite Wert weggelassen und das Initial verhält sich wie ein klassisches, abgesenktes Drop Cap.

Der große Vorteil gegenüber der alten Float-Technik: Das Initial bleibt Teil des normalen Inline-Layouts. Die Browser können Zeilenhöhe, Grundlinien und das Umfließen des Textes besser berechnen. Gleichzeitig lassen sich Initialen weiterhin mit Eigenschaften wie color, background, border, padding und margin gestalten.

Beachte: Stand August 2026 ist initial-letter noch nicht in allen Browsern gleich gut verfügbar. Safari benötigt zurzeit noch -webkit-initial-letter; Firefox unterstützt die Eigenschaft noch nicht. Die Support-Tabelle von Can I use zeigt deshalb nur teilweise Unterstützung.
Beachte: Die verwandten Eigenschaften initial-letter-wrap und initial-letter-align sind derzeit noch Spezifikation und werden in Safari, Chrome und Firefox nicht sichtbar umgesetzt. Die Spezifikation zeigt zu initial-letter-wrap: all; ein Beispiel mit Initial und umfließendem Text.

Ältere Möglichkeiten der Gestaltung

Mit dem Pseudo-Element :first-letter kannst du den ersten Buchstaben oder die erste Ziffer eines Elements separat ansprechen und gestalten.[3][4]

Initial ansehen …
p::first-letter {
  font-size: 300%;
  color: red;
  font-weight: bold;
}
Beachte: Stehen vor dem ersten Buchstaben bzw. der ersten Ziffer Satzzeichen, z. B. ein Anführungszeichen, werden von ::first-letter alle Zeichen bis zum ersten Buchstaben bzw. der ersten Ziffer erfasst. Welche Satzzeichen das außer dem Anführungszeichen noch betrifft, kann hier ausprobiert werden. Wird ein Sonderzeichen nicht als Satzzeichen erkannt, z. B. das Sternchen (*), funktioniert ::first-letter nicht.
Beachte: Einige Browser erhöhen durch die größere Schriftgröße automatisch den Zeilenabstand.

Invertierte Initiale

Oft werden Initialen durch eine Umkehrung von Text- und Hintergrundfarbe (Farb-Inversion) gestaltet:

Initial ansehen …
p {
  color: #3983ab;
}
p::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
}

Positionierung

Die häufigsten Varianten sind eine Positionierung …

  1. bündig im Text
  2. mittig in der 1. Zeile und
  3. links neben dem Text
Positionierung von Initialen ansehen …
p::first-line {
  line-height: 100%;
}
 
p::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
  font-weight: bold;
  padding: 0.2em 0.1em;
  margin: 0.2em 0.2em 0 0.1em;
  border: 2px dashed white;
  box-shadow: 0 0 0 .1em #3983ab;
  float: left;
  line-height: 1.5em;
}
 
p.mittig::first-letter {
  line-height: 1.0em;
  margin: -0.5em 0.2em 0 0.1em;
}
 
p.links::first-letter {
  margin-left: -1.1em;
}

In diesem Beispiel wurde die Zeilenhöhe der 1. Zeile mit ::first-line {line-height: 100%} an die des Textes angepasst.

Durch das float:left wird die Initiale in den Text eingepasst. Die Zeilenhöhe des ::first-letter setzt sich aus der Höhe des Buchstabens, des Rands und des Paddings zusammen. Im zweiten Absatz wurde diese Zeilenhöhe verringert und ein negativer Margin nach oben gesetzt, damit die Initiale mittig dargestellt wird.

Im unteren Beispiel wurde die Initiale mit margin-left: -1.1em; nach links verschoben.

Letzte Raffinessen

Am wirkungsvollsten wirken Initialen mit einer besonderen Schrifttype.

Initial ansehen …
p::first-line {
  line-height: 1em;
}
 
p:nth-of-type(1)::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
  float: left;
  line-height: 1.5em;
  font-weight: bold;
  padding: 0.1em 0.3em 0.1em 0;
  margin: 0.2em 0.2em 0 0;
  border: 2px dashed white;
  box-shadow: 0 0 0 .1em #3983ab;
  font-family: "Edwardian Script ITC", "Brush Script MT", cursive;
}

In diesem Beispiel wurde für das Initial eine besondere Schrifttype festgelegt. Ist diese Schrift nicht vorhanden, wird eine Systemschrift geladen.

Empfehlung: Damit nicht jeder Absatz ein Initial erhält, kann man mit :first-of-type oder :nth-of-type(1) nur den ersten Absatz ansprechen.

Grafiken als Initialen

Man kann anstelle dieser CSS-Effekte auch eine externe Grafik einbinden. Dazu wird mit der Methode des Image-Replacement der erste Buchstabe (diesmal als platziert) unsichtbar gemacht und dann dem Anfangsbuchstaben eine SVG-Grafik als Hintergrundbild gegeben werden.

Initial ansehen …
p span {
  /* Image-Replacement */
  color: transparent;

  display: inline-block;
  float: left;
  width: 98px;
  height: 106px;
  margin-right: 0.3em; 
 
/* Hintergrundbild */
  background-image: url("https://wiki.selfhtml.org/images/7/77/Initiale_E.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

<p>
  <span>E</span>s war einmal eine kleine süße Dirne, 
  ...
</p>

Dieses Beispiel unterscheidet sich von den vorangegangenen dadurch, dass der Anfangsbuchstabe zusätzlich in ein span-Element gesetzt wurde.

Das span-Element dient als Fläche für das Hintergrundbild, das mit background-size: contain; passend skaliert wird.

Beachte: Die Verwendung von externen Hintergrund-Grafiken hat einige Nachteile:
  • Benutzer von Screen-Readern oder einer kontrastreichen Ansicht im Browser sehen weder die (Hintergrund-)Grafik noch den Text
  • Jede externe Grafik benötigt einen Http-Request und verlangsamt so den Seitenaufbau.
  • Wenn du den Text änderst, muss auch das CSS angepasst und gegebenenfalls eine neue Grafik erstellt werden.

Weblinks

  1. ↑ Wikipedia: Initiale
  2. ↑ W3C: CSS Inline Layout Module Level 3: Creating Initial Letters
  3. ↑ css-tricks.com: Drop Caps
  4. ↑ honkiat.com: Paragraph Dropcap with CSS’s :first-line and :first-letter Elements

Abgerufen am 25.08.2026
von "http://wiki.selfhtml.org/wiki/Initialen_%E2%80%93_Anfangsbuchstaben_gestalten"