Das Schriftbild ist Teil deines Website-Designs und nimmt wichtigen Einfluss auf deren Wirkung. Die global geltenden Design-Einstellungen stammen von der verwendeten Vorlage (Template), die Schriftarten für die unterschiedlichen HTML-Elemente sind in der Regel in der style.css des Templates gespeichert. Erfahre mehr über Typografie-Regeln und die Verwendung verschiedener Schriftarten auf deiner Website.
1. Verschiedene Schriftarten global im Template definieren
2. Verschiedene Schriftarten global per CSS-Code definieren
3. Erweiterungen zur Einbindung verschiedener Schriftarten
4. WP Edit erweitert den Editor um die Auswahl der Schriftart
5. Mit Google Fonts Typography Formatierungen individuell definieren
Zusammenfassung
Verschiedene Schriftarten: Designregeln für die Verwendung auf einer Website
Für die Website-Typografie bestehen Grundregeln beziehungsweise Empfehlungen, die dir bei einem harmonischen und fürs Auge angenehmen Erscheinungsbild helfen sollen:
- Weniger ist mehr: Wähle zwei Schriftarten aus und nicht mehr.
- Mische Schriftarten des gleichen Typs nicht, also zum Beispiel nicht zwei Serifenschriften.
- Arbeite mit maximal drei oder vier Schriftgrößen.
- Achte auf die Lesbarkeit – schnelle Lesbarkeit ist das Ziel!
Die Regeln sind nicht bindend – es ist deine Website und das Design ist deine Entscheidung.
1. Verschiedene Schriftarten global im Template definieren
Häufig nutzen Templates nur eine Schriftart. Anpassungen sind über den Customizer möglich. Öffne den Customizer über das Backend und wähle „Global>Typografie“ aus. Hier findest du je nach Vorlage unterschiedliche Einstellmöglichkeiten. Zum Beispiel kannst du im Standard-Template Twenty Seventeen die Schriftart nach Bedarf global für Paragrafen und Überschriften auswählen.
Abbildung: Globale Typografie-Einstellungen für verschiedene HTML-Elemente erfolgen über den Customizer des Templates.
2. Verschiedene Schriftarten global per CSS-Code definieren
Eine weitere Möglichkeit für fortgeschrittene Anwender ist die Bearbeitung der Datei style.css, die im Ordner der aktiven Vorlage gespeichert ist. Hier ist die Schriftart für verschiedene HTML-Elemente definiert. Beispiel:
body {
font-family: „Hoefler Text“, „Baskerville Old Face“, Garamond, „Times New Roman“, serif;
font-weight: 400;
font-size: 1em;
line-height: 1.8;
margin: 0;
}
Im Beispiel ist „Hoefler Text“ die Standardschrift des body-Elements. Die erste Schriftart in der Aufzählung definiert die zu verwendende Wunschschrift, die folgenden sind Alternativen, falls der Browser des Seitenbesuchers die erste nicht anzeigen kann.
Wichtig: Damit die Änderungen beim Update des Templates erhalten bleiben, musst du diese im Child-Theme speichern.
3. Erweiterungen zur Einbindung verschiedener Schriftarten
Um die global geltende Konfiguration der Schriftarten auf einfache Weise zu überschreiben, musst du jedem Textelement per Editor eine eigene Schriftart zuweisen können. Der Standard-Editor integriert diese Funktion nicht, lässt sich jedoch erweitern.
4. WP Edit erweitert den Editor um die Auswahl der Schriftart
Abbildung: Füge dem Editor die Schaltfläche Font Family und Font Sizes hinzu.
WP Edit stellt für die Bearbeitung von Seiten und Beiträgen zusätzliche Werkzeuge bereit. Damit ergänzt du den Editor um die Schaltflächen „Font Family“ und „Font Sizes“. Öffne dafür nach der Installation die Einstellungen von WP Edit und wähle die benötigten Schaltflächen aus.
5. Mit Google Fonts Typography Formatierungen individuell definieren
Möchtest du zum Beispiel für eine Überschrift erster Ordnung eine andere Schriftart verwenden, als für eine Überschrift zweiter und dritter Ordnung? Mit der Erweiterung Google Fonts Typography wählst du die Schriftart für die verschiedenen Formatierungen übersichtlich aus.
Die Google-Fonts-Bibliothek enthält mehr als 800 Schriftarten, auf die du mit dieser Erweiterung zugreifst. Über die Live-Vorschau kannst du das Aussehen der verschiedenen Schriftarten schnell testen und dann entscheiden.
Hinweis: Du musst die Verwendung der Google Fonts in deinen Datenschutzbestimmungen erwähnen oder besser die verwendeten Schriften lokal in deinem Webspace speichern.
Zusammenfassung
Häufig nutzen Designer für Überschriften und den Fließtext verschiedene Schriftarten. Dabei gilt: Weniger ist mehr, beschränke dich also möglichst auf zwei Schriftarten. Die globale Einstellung erfolgt über den Template-Customizer oder für Fortgeschrittene im CSS-Code. Zusätzlich gibt es Erweiterungen zum Hinzufügen weiterer Schriftarten und für die Integration der Font-Family-Schaltfläche in den Editor. Damit nimmst du individuelle Formatierungen vor und überschreibst die globalen Einstellungen.
Bildnachweis: Unsplash
