typografie schnell und einfach global einrichten kadence theme thumbnail

Hinweis: Mit einem * gekennzeichnete Links sind sogenannte Partner-Links, d.h. dass ich eine Provision erhalte, wenn du über meinen Link einen Kauf tätigst. Für dich entstehen keine zusätzlichen Kosten.

Heute geht es um die Gestaltung der Texte auf deiner Website. Das Kadence Theme erlaubt es dir, die Typografie-Einstellungen für deine Texte global anzupassen. So kannst du unter anderem schnell verschiedene Schriftarten für deine Überschriften oder deinen Fließtext auf deiner Website ausprobieren.

Du hast noch keine eigene Kadence-Website? So einfach geht’s!

Kadence Quick Start Guide

In nur wenigen Schritten zur eigenen WordPress-Website

  • Hosting-Provider wählen – wenn du gerade erst startest, empfehle ich all-inkl.com*.
  • Domain registrieren – das ist oft direkt beim Hosting-Provider möglich.
  • Die aktuelle WordPress-Version auf deiner Domain installieren.
  • Das Kadence Theme installieren – für komplexere Websites empfehle ich, die Kadence-Pro-Erweiterung* ebenfalls zu installieren.
  • Um einen größeren Gestaltungsfreiraum zu erhalten, empfehle ich die Installation der Blockeditor-Erweiterung Kadence Blocks – auch hier gibt es eine Pro-Version* mit erweitertem Funktionsumfang.

Wo finde ich die globalen Typografie-Einstellungen des Kadence Themes?

Öffne den Customizer, dann klicke auf Colors & Fonts. Der letzte Menüpunkt Typografie öffnet die globalen Texteinstellungen.

global typography settings in customizer kadence theme

Die Fließtexteinstellungen des Kadence Themes

Die erste Einstellung Basis Schriftart bestimmt die Texteigenschaften des kompletten Fließtexts auf deiner Website – also von jedem Text, der keine Überschrift (H1 – H6) ist.

Hier hast du die Möglichkeit, die Farbe, die Schriftart, den Schriftstil und die Schriftgröße – jeweils für Desktop, Tablet und mobile Endgeräte – anzupassen.

settings base font kadence theme

Die Schriftfarbe einstellen

Als Farbe für die Basis-Schriftart empfehle ich, die 4. Farbe aus deiner globalen Farbpalette zu verwenden. In diesem Artikel erfährst du mehr über die globale Farbpalette.

Wenn du dir bei der Wahl deiner Schriftart unsicher bist, kannst du die vorgeschlagenen Schriftartpaarungen ausprobieren, die dir beim Klick auf das Ordnersymbol in der rechten oberen Ecke angezeigt werden. 

Eine Schriftart auswählen 

Falls du aber schon weißt, welche Schriftart du verwenden möchtest oder die komplette Auswahl an Schriftarten, die das Kadence Theme zu bieten hat, einsehen möchtest, dann klicke einfach auf den Namen der derzeitig ausgewählten Schriftart und ein Pop-Up öffnet sich, in dem dir alle verfügbaren Schriftarten angezeigt werden.

select global font paragraph text kadence theme

Deinen Schriftstil finden

Mit der Schriftstil-Einstellung im mittleren Reiter des Pop-Ups legst du die Schriftauszeichnung fest – d.h. du entscheidest, welche Schriftstärke benutzt und ob der Text kursiv dargestellt werden soll. 

set font style paragraph text kadence theme

Die Schriftgröße anpassen

Der rechte Reiter erlaubt es dir, die Schriftgröße, die Zeilenhöhe (Line Height), den Zeichenabstand (Letter Spacing) – jeweils für verschiedene Bildschirmgrößen – zu ändern. Außerdem kannst du alle Wörter automatisch mit einem großen oder kleinen Anfangsbuchstaben (1. bzw. 3. Option unter Transformieren) oder jedes Wort komplett in Großbuchstaben anzeigen lassen (2. Option).

set font size line height letter spacing globally kadence theme

Px, em, rem: Die Schriftgrößen-Einstellungen einfach erklärt

Du hast die Wahl, die Schriftgröße in einer von drei Maßeinheiten anzugeben: px, em, rem.

Pixel (px) ist am geläufigsten. Dies ist im Gegensatz zu den anderen beiden Optionen ein absoluter Wert.

Die em-Maßeinheit bezieht sich immer auf die Schriftgröße des Elternelements. Als Beispiel: Das Elternelement des Textelements besitzt eine Schriftgröße von 18px. Wenn dem Textelement eine Schriftgröße von 1,5 em gegeben wird, ist die absolute Schriftgröße des Textelements 18px*1,5=27px.

Die rem-Maßeinheit ist ähnlich zu verstehen. Hier wird zur Berechnung des absoluten Pixelwertes jedoch die Schriftgröße des <html>-Elements statt des direkten Elternelements verwendet. Standardmäßig ist die Schriftgröße des <html>-Elements auf 16px gestellt. 

change font size globally

Ich persönlich benutze bei der Einstellung der Schriftgrößen immer diese Maßeinheit, da ich mir so keine Gedanken machen muss, welche Schriftgröße des Elternelement hat.

Der Vorteil der Verwendung der relativen em- bzw- rem-Maßeinheit ist die Skalierbarkeit der Schrift im Browser. Falls ein Benutzer – zum Beispiel aufgrund von Sehbeschwerden – die Schriftart in seinem Browser vergrößern möchte, so werden diese Einstellungen nur auf Texte mit relativen Größen angewendet. Für eine barrierefreie Website führt also kein Weg an den relativen Einheiten vorbei.

Die Zeilenhöhe richtig einstellen

change line height globally

Auch hier finden sich wieder die 3 Maßeinheiten px, em und rem. Zusätzlich kann man auch keine Maßeinheit auswählen, was meines Wissens nach das gleiche Ergebnis wie die em-Maßeinheit erzielt. 

Beide Varianten beziehen sich direkt auf die eingestellte Schriftgröße, weshalb ich eine der beiden auch als Maßeinheit für die Einstellung der Zeilenhöhe empfehlen würde. Mit einer Zeilenhöhe von 1,5 bzw. 1,5 em für den Fließtext kann man nichts falsch machen. Je nach Geschmack kann man den Abstand aber natürlich noch etwas vergrößern oder verringern.

Subscribe to my Newsletter

Join the Community

Get notified about new blog articles as soon as they are published.

Was ist mit dem Zeichenabstand?

Den Zeichenabstand belasse ich in 99% der Fälle auf dem Standardwert. Wenn man einzelne Worte mit einem weiten Zeichenabstand darstellen möchte, kann man das natürlich machen, aber für den kompletten Fließtext ist das nicht zu empfehlen, da sich die Lesbarkeit des Textes dadurch meistens verschlechtert.

Kursive Schriftart laden

load italic font styles

Wenn du Load Italic Font Styles aktivierst, wird die “wahre” kursive Schrift der ausgewählten Schriftart geladen, wenn du im Editor einzelne Wörter – oder Wortgruppen – kursiv darstellen möchtest. Falls diese Option nicht aktiviert ist, wird die sogenannte Faux-Italic-Variante der Schriftart benutzt, die sich optisch von der wahren Variante teils stark unterscheiden kann. Mehr dazu erfährst du hier.

Falls du einen kursiven Schriftstil für den gesamten Fließtext ausgewählt hast – also im Pop-Up im 2. Reiter Style – wird natürlich immer die “wahre” kursive Schrift geladen.

Die Überschriften ebenfalls anpassen

text settings headings kadence theme

Die Überschriften haben die gleichen Einstellungsoptionen wie die Basis-Schriftart. 

Der einzige Unterschied ist die Möglichkeit, die Schriftart für alle 6 Überschriftenarten (H1 – H6) an einer Stelle anzupassen. Wenn du bei Überschriften Schriftart Familie eine Schriftart ausgewählt hast, wird diese auf alle 6 Überschriftenarten angewendet, solange du bei einer Überschrift nicht explizit eine andere Schriftart eingestellt hast. 

set font family for all heading types kadence theme

Als Schriftfarbe empfehle ich hier, die 3. Farbe aus deiner Farbpalette anzuwenden. 

choose global heading font color kadence theme

Die Schriftgrößen sollten von der H1- bis zur H6-Überschrift natürlich absteigend sein, um die Hierarchie visuell korrekt darzustellen. Dass die Schriftgrößen für die verschiedenen Bildschirmgrößen auch kleiner werden sollten, je kleiner der Bildschirm ist, ist selbstverständlich.

Die globalen Einstellungen im Block-Editor

Alle Texteinstellungen, die du im Customizer angepasst hast, werden natürlich auch bei den textbasierten Blöcken – ob bei den Standard-Gutenberg-Blöcken oder den Kadence-Blöcken – übernommen.  

Um die globalen Texteinstellungen zu umgehen, kannst du bei dem jeweiligen Textblock ganz einfach die benötigten Einstellungen ändern, die dann ausschließlich für diesen einen Block angewendet werden. 

override global text settings in text blocks

Falls du anschließend die globalen Texteinstellungen im Customizer nochmal ändern solltest, wird dieser Block die neuen globalen Einstellungen nicht oder nur teilweise übernehmen, solange die jeweilige Texteinstellung in dem Block separat angepasst wurde. 

Pinne das Bild and teile diesen Beitrag!

typografie schnell und einfach global einrichten kadence theme pin 1

Ähnliche Beiträge