Mit Webfonts einfach Initialen erstellen

Wer schon einmal vor der Herausforderung gestanden ist, Initialen in eine Website einzubinden, der hat feststellen müssen, dass handwerklich elegante Lösungen bzw. Tipps dafür Mangelware sind. Für WordPress-Benutzer gibt es zwar Plugins, das Ergebnis kann aber den Ansprüchen eines passionierten Schriftsetzers nicht gerecht werden. Also ist der Mann respektive die Frau selbst!

Grundsätzliches zu Initialen: Initialen sind ausgeschmückte Buchstaben (meist Großbuchstaben) am Anfang eines Textes, entweder in Textfarbe oder mehrfarbig, die ihren Ursprung im 7.–8. Jahrhundert haben. Ausführlichere Erklärungen gibt es bei Wikipedia und dem von mir sehr geschätzten Typolexikon.

Und so geht es…

Wer nun seinen Text etwas aufhübschen will, der darf selbst Hand anlegen. Und das gestaltet sich, wie ich nach einiger Recherche feststellen durfte, gar nicht so schwierig. Zuerst musste ich mich entscheiden, wie die zukünftigen Initialen aussehen sollten. Eine Versalie aus der Grundschrift mit einem passenden Rahmen zu versehen, das war mir zu einfach. Außerdem war es mir für den Kontext, in dem ich die Initiale verwenden wollte, nicht anspruchsvoll genug. Es blieb mir nichts anders übrig, als mich auf die Suche nach einer passenden Schrift zu machen. Fündig wurde ich in der „Goudy Initials“, digitalisiert von Dieter Steffmann (der auf seiner Website übrigens auch noch andere, sehr gut aufbereitete historische Schriften bereit hält).

Die Wahl der Waffen

Mit dem Online Font Converter habe zuerst ich die Webfont-Formate erstellt. Benötigt werden für eine browserübergreifende korrekte Darstellung die Formate woff2woffeot und svg. Die umgewandelten Dateien habe ich dann in ein eigens erstelltes Font-Verzeichnis im Content-Folder kopiert. Der Ordnung halber habe ich für jede Schriftfamilie ein eigenes Verzeichnis erstellt. Falls man mehrere Schriften verwendet, wird das sonst schnell unübersichtlich. Danach habe ich in der style.css von WordPress die Schriften wie folgt geladen:

@font-face {
font-family: 'goudy_initialenregular';
src: url('/wp-content/fonts/goudyinitialen/goudyini-webfont.eot');
src: url('/wp-content/fonts/goudyinitialen/goudyini-webfont.eot?#iefix') format('embedded-opentype'),
     url('/wp-content/fonts/goudyinitialen/goudyini-webfont.woff2') format('woff2'),
     url('/wp-content/fonts/goudyinitialen/goudyini-webfont.woff') format('woff'),
     url('/wp-content/fonts/goudyinitialen/goudyini-webfont.ttf') format('truetype'),
     url('/wp-content/fonts/goudyinitialen/goudyini-webfont.svg#goudy_initialenregular') 
format('svg');
font-weight: normal;
font-style: normal;
}

In meinem Fall habe ich aus Ermangelung an weiteren Schriftschnitten sowohl bei font-weight als auch bei font-style den Wert normal gewählt. Wenn mehrere Schnitte einer Schrift vorliegen, müssen hier die entsprechenden Werte ausgetauscht werden.

Sodann habe ich den Klassenselektor für die Initialen erstellt. Sieht aus wie folgt:

p.initiale:first-letter {
font-size: 90px;
line-height: 75px;
padding-top: 10px;
padding-right: 8px;
padding-left: 3px;
color: #2c2e83;
float: left;
font-family: 'goudy_initialenregular';
font-weight: normal;
font-style: normal;
}

Durch das Pseudoelement first-letter stelle ich sicher, dass nur das erste Zeichen des Textblocks angesprochen wird. Mir schwebte eine über drei Zeilen gehende Initiale vor, die vom Rest des Texts umflossen wird. Deshalb habe ich sie mit float: left linksbündig gestellt und den Innenabstand durch padding eingestellt. Das ist von Schrift zu Schrift verschieden und muss individuell angepasst werden.

Das fertige Beispiel

Das fertige Ergebnis sieht dann wie unten aus. Den Text habe ich mir von Jakob Bidermann, einem Dramatiker aus dem 17. Jahrhundert, entliehen. Denn wer mit Initialen um sich wirft, sollte natürlich passendes Textmaterial in petto haben. Als Grundschrift habe ich die Goudy Old Style gewählt, damit Initiale und Grundschrift aufeinander abgestimmt sind.

In den Annales Ecclesiasticae des Abraham Bzovius wird unter dem Jahre 1212 eine Legende erzählt von einem Wucherer Jacobus, der um diese Zeit gestorben sein sei, mit vielen Sünden der Unbarmherzigkeit beladen. Die Waagschale der Sünden hob die der guten Werke weit empor beim göttlichen Gerichte, und er wurde nur dadurch vor der Verdammung errettet, dass Maria die Gebete, die er ihr zeitlebens gewidmet hatte, auf die leichte Waagschale legte (in Gestalt eines Kranzes von Rosen) und so diese zum Sinken brachte.

Endlich hatte ich eine saubere Lösung, die gut anzusteuern und leicht zu implementieren ist. Falls noch Fragen auftauchen, stehe ich gerne zur Verfügung. Und wenn es funktioniert hat, freue ich mich natürlich über entsprechendes Feedback. 🙂

By | 2017-10-12T16:02:49+00:00 Oktober 9th, 2017|Blog, Typographie|0 Comments

Leave A Comment