Revolutionierung der WordPress-Typografie mit Full Site Editing und theme.json

Schriftzüge sind das Rückgrat des Internets, trotz der Vielzahl an Medienformaten. Das bedeutet, dass die Schriftarten, die du für deine Website auswählst, ein wichtiger Aspekt deines Layouts und Designs sind.

WordPress-Typografie kann Stimmungen hervorrufen, bei der Markenbildung helfen und vieles mehr. Das Full Site Editing (FSE) in WordPress legt die Anpassung der Typografie in die Hände der Nutzer – und die Datei theme.json hilft Entwicklern, WordPress-Themes zu erstellen, die dies nutzen.

Dieser Artikel befasst sich mit der WordPress-Typografie für FSE und theme.json. Dabei geht es auch um wichtige Zusammenhänge wie die verwendete Technologie, technische Überlegungen und die Entwicklung der Verwendung von Schriftarten im Design.

Typografie im Web: eine kurze Geschichte

Wenn du dir die ersten Web-Designs ansiehst, wirst du feststellen, dass die Schriftarten trotz der Vielfalt der Layouts einheitlich dargestellt wurden. Das liegt zum Teil an der Verfügbarkeit und zum Teil an der Notwendigkeit. Kurz gesagt: Ohne die Technologie, die wir heute haben, können Wörter im Web nur die Schriftarten verwenden, die auf deinem Computer verfügbar sind.

Ein „Websurfer“ Mitte bis Ende der 90er Jahre hätte nur eine Handvoll vorhersehbarer Schriftarten zur Verfügung: Times New Roman, Arial, Helvetica, Georgia und Verdana. Die beiden letztgenannten sind von Microsoft in Auftrag gegebene Schriften, die unabhängig von der Zeit gut für das Web geeignet sind.

Diese primitive Auswahl ist konsistent und verlässlich, aber es fehlt ihr an Flexibilität. Dienste wie Google Fonts und Adobe Fonts nutzen das WOFF-Dateiformat, um dir Zugang zu einer Bibliothek mit Tausenden von Schriften zu verschaffen, die du ganz einfach einbetten kannst.

Damit hast du mehr Möglichkeiten, die Lesbarkeit zu verbessern, unverwechselbare Designs zu erstellen und das Nutzererlebnis (UX) für deine Website anzupassen. Zu den Nachteilen gehören mögliche Leistungseinbußen (z. B. eine Verschiebung des Inhaltslayouts), die Abhängigkeit von Drittanbieterdiensten, um das wichtigste Element auf deiner Website anzuzeigen, und Datenschutzbedenken.

Dies veranlasst viele Webdesigner/innen dazu, auf Schriftbibliotheken zu verzichten und die Verwendung von Systemschriftarten zu überdenken. Die schnellere Verarbeitung und die Kontrolle, die du über die Anwendung eines „Systemschriften-Stacks“ hast, der nativen Schriften den Vorrang gibt und auch Fallback-Optionen nutzt, ist ein solider Ansatz.

WordPress und Typografie

WordPress legt großen Wert auf Typografie, damit du ansprechende und lesbare Inhalte erstellen kannst. Die Standard-Themes von WordPress verwenden durchgängig Schriftarten, die ein Gleichgewicht zwischen Ästhetik und Funktionalität herstellen.

Die aktuellen Standard-Themes verwenden Systemschriftarten für eine saubere, moderne und leistungsstarke Darstellung. Ältere Standard-Themes verwenden Schriftpaare wie Noto Sans und Noto Serif (für Twenty Fifteen) und Montserrat und Merriweather (für Twenty Sixteen).

Um diesen typografischen „Kreislauf des Lebens“ zu zeigen, verwendet Twenty Sixteen Helvetica und Georgia als Ausweichoptionen. Das Standardtheme von Twenty Ten verwendet nur Helvetica, Arial und Georgia:

Diese Entscheidungen geben den Ton für das WordPress-Design in den einzelnen Themes an. Sie können dich aber auch dazu inspirieren, genau darauf zu achten, wie du die Typografie einsetzt – und dabei hilft dir WordPress FSE.

Eine kurze Einführung in Full Site Editing und theme.json

FSE und theme.json sind von zentraler Bedeutung dafür, wie du die Typografie in WordPress verwaltest, daher ist es wichtig, beide zu verstehen. FSE nutzt den Block-Editor und fügt weitere Funktionen hinzu, um zum Site-Editor zu werden.

Er vereinheitlicht die Optionen für die Gestaltung deiner Website in vielerlei Hinsicht:

• Du nutzt den Bearbeitungsansatz der Blöcke für die gesamte Website, nicht nur für deine Inhalte.
• Eine Vorlagenbibliothek ist Teil der Einrichtung, so dass du diese mit denselben Werkzeugen bearbeiten kannst wie deine Inhalte.
• Das Styling findet ebenfalls im Site Editor statt und bietet ein globales Einstellungsschema.
• Der Site-Editor benötigt keinen Code, um eine der verfügbaren Optionen zu implementieren. So wird die Lücke zwischen Entwicklung und Endnutzerdesign geschlossen.

Du kannst die Datei theme.json als eine Entwicklungsversion von FSE betrachten. Du brauchst Kenntnisse der JavaScript Object Notation (JSON), um mit der Datei arbeiten zu können, aber das ist für die meisten Website-Betreiber kein Problem. Sie ist eine zentrale Konfigurationsdatei für die Verwaltung deiner globalen Stile und Einstellungen.

Für jede Einstellung wird ein Schlüssel/Wert-Paar von option:value verwendet, das du auf verschiedene Weise implementieren kannst:

• Festlegung von globalen Farbpaletten.
• Einrichten von Schriftfamilien und -größen.
• Konfigurieren von blockspezifischen Stilen.
• Abstände und Layout-Einstellungen verwalten.

Mit theme.json kannst du konsistentere und anpassbare Themes erstellen, ohne dass du benutzerdefiniertes CSS benötigst (obwohl auch das möglich ist). Die Anpassungsfähigkeit und Flexibilität von theme.json macht dies zu einer Schlüsselkomponente bei der Entwicklung von Themes für WordPress. Optimal ist es, wenn du beides auf unterschiedliche Weise für dein gesamtes Themendesign verwendest – und die Typografie ist da keine Ausnahme.

Einrichten der Typografie im WordPress-Site-Editor

Wenn du weißt, wie man den Block-Editor benutzt, kannst du auch den Site-Editor verwenden. In WordPress navigierst du zum Bildschirm Erscheinungsbild > Editor. Hier wird der Startbildschirm für den Seiteneditor angezeigt:

Der Bildschirm Stile in der linken Navigation bietet dir einige globale Design-Optionen, die auch Änderungen an der Typografie beinhalten:

Für die meisten Anwendungsfälle sind individuelle Einstellungen für verschiedene typografische Aspekte von größerem Nutzen. Es gibt zwei kleine Symbole am oberen Rand des Stile-Bildschirms, die weitere Optionen öffnen: das Stilbuch und das Stiftsymbol Stile bearbeiten.

Außerdem kannst du Typografieoptionen auf Elementebene und für jeden Block festlegen.

Die Schriftbibliothek

Auf dem Bildschirm Stile bearbeiten > Typografie wird die Schriftbibliothek angezeigt, obwohl sie im Seiteneditor nicht explizit so heißt. Damit kannst du Schriften und Schriftarten auf verschiedene Weise bearbeiten:

• Du kannst eigene Schriftarten hochladen und verwalten.
• Es gibt eine Option, um Google Fonts direkt in WordPress zu verwenden.
• Du kannst Schriftensammlungen mit PHP erstellen.

Um die Schriftbibliothek im Bereich Typografie in der Seitenleiste des Site-Editors aufzurufen, klicke auf das Symbol Schriftarten verwalten:

Auf der Registerkarte Bibliothek siehst du die aktuell registrierten Schriftarten für dein Theme und welche davon aktiv sind:

Wenn du auf eine davon klickst, kannst du einzelne Schriftarten aktivieren oder deaktivieren:

Auf der Registerkarte Hochladen kannst du mit einem Drag-and-Drop-Upload-Dialog deine eigenen Schriften in den Formaten TTF, WOFF, WOFF2 und OTF installieren.

Die Registerkarte Schriftarten installieren stellt eine Verbindung zu Google Fonts her, damit du diese Bibliothek in deinem Thema nutzen kannst. Beachte, dass bei diesem Ansatz die Schriftarten von deiner Website heruntergeladen und bereitgestellt werden und nicht von einem Google CDN:

Hier wählst du die Schriftarten, die du installieren möchtest, aus der umfangreichen Liste aus und klickst dann auf die Schaltfläche Installieren. Sobald die Erfolgsmeldung erscheint, werden diese Schriften auf der Registerkarte Bibliothek angezeigt:

Jetzt kannst du die Schriftarten wie jede andere auf deiner Website verwenden. Jetzt musst du sie an deine Bedürfnisse anpassen.

Das Style Book

Eine der Gefahren beim Auswählen und Einstellen von Schriftarten ist, dass du nicht weißt, wie sie in Kombination mit Farbschemata, Layouts und Formatierungen aussehen werden. Das Style Book ist von unschätzbarem Wert, denn es ermöglicht dir eine Vorschau deiner Typografieeinstellungen für verschiedene Elemente.

Wenn du auf das Augensymbol klickst, öffnet sich das Stilbuch, das fünf Registerkarten enthält:

• Text: Hier kannst du mit Absätzen, Überschriften, Listen und anderen Elementen arbeiten, die sich auf Text konzentrieren.
• Medien: Hier kannst du Bilder, Videos und Audiodesign-Präsentationen anpassen.
• Design: In diesem Bereich werden strukturelle Designaspekte wie Spalten, Trennlinien und Schaltflächen zusammengefasst.
• Widgets: Dieser Bildschirm besteht aus zwei Elementen: Dynamische Generationen, wie z. B. Listen von Archiven und Kommentaren. Außerdem arbeitest du hier mit der Suchleiste, den Symbolen für soziale Medien und den Tag Clouds.
• Thema: Hier geht es um die Kopfzeilenelemente deiner Seite, wie den Titel, die Tagline, die Navigation und das Logo.

Wenn du im Style Book auf ein Element klickst, hast du in der Seitenleiste verschiedene Optionen zur Auswahl. Du arbeitest hier mit den Typografieeinstellungen für jeden Block und nicht mit einzelnen Elementen:

Du kannst die gleichen Bildschirme auch über den Bereich Stile > Blöcke auf der Homepage des Site Editors erreichen. Unabhängig davon kannst du mit den Optionen, die du siehst, die Typografie (und mehr) jedes Blocks bis ins kleinste Detail anpassen.

Einstellen der Typografieoptionen im Seiteneditor

Für alle Blöcke und Elemente stehen dir die gleichen Grundoptionen zur Verfügung. Hier findest du einen Überblick über die einzelnen Optionen im Panel.

Schriftart und -größe

Das Dropdown-Menü Schriftart ist ganz einfach: Wähle die Schriftart aus, die du auf das jeweilige Element oder den Block anwenden möchtest:

Die Voreinstellungen für die Größe lassen sich im Seiteneditor am wenigsten anpassen. Du wählst eine Größe aus einem Bereich zwischen Small und Extra Extra Large:

Wenn du theme.json bearbeitest, kannst du diese voreingestellten Werte ändern – aber nicht vom Seiteneditor aus. Mit der Schaltfläche Benutzerdefinierte Größe festlegen kannst du eine benutzerdefinierte Größe mit einer Reihe von Größeneinheiten festlegen:

Es gibt noch mehr Möglichkeiten, die Typografie im Seiteneditor anzupassen, einschließlich Methoden, für die du normalerweise CSS verwendest.

Erscheinungsbild, Zeilenhöhe und Buchstabenabstände

Das Dropdown-Menü Erscheinungsbild scheint einfach zu sein: Wähle eine Schriftstärke aus einer umfangreichen Liste aus und sie wird auf deinen Text angewendet. Allerdings hast du oft nicht alle verfügbaren Schriftarten für jeden Schriftgrad zur Verfügung.

Unsere Tests haben gezeigt, dass WordPress diese Liste nicht filtert, um nur verfügbare Schriftschnitte anzuzeigen. Außerdem wendet es eine „nächstgelegene Übereinstimmung“ an, wenn du eine Schriftart auswählst, zu der es keine passende Schriftart gibt. Für unsere Beispielsite verwenden wir Cardo Normal, Cardo Bold und Cardo Bold Italic. Wenn du Semi Bold, Bold, Extra Bold oder Black wählst, wird nur Cardo Bold verwendet:

Die Zeilenhöhe verwendet keine Voreinstellungen und gleicht deine Schriftart, dein Aussehen und deine Größe aus. Dieser Wert sorgt für mehr Platz zwischen den Zeilen und ist oft eine praktische Lösung, wenn der Text zusammengestaucht aussieht:

Der Buchstabenabstand ist ähnlich und folgt dem CSS-Brauch, sich selbst zu den vorhandenen natürlichen Abständen hinzuzufügen:

Wie bei der Anpassung der Schriftgröße kannst du verschiedene Maßeinheiten auswählen. Die Wahl eines relativen Wertes ist hier oft der bessere Ansatz. WordPress setzt den Buchstabenabstand auf einen CSS-Standardwert von „normal“ Damit kann der Browser den Wert selbst bestimmen, was unserer Erfahrung nach ideal ist.

Es ist üblich, kleine positive Werte für den Buchstabenabstand zu verwenden – oft nicht mehr als 0,12rem/em – und kaum negative Abstände.

Bei der letzten Auswahlmöglichkeit – Groß- und Kleinschreibung – kannst du wählen, ob der Text groß, klein oder im Satz geschrieben werden soll. Du kannst die Großschreibung auch entfernen. Das ist gut für die Konsistenz der Schrift, da du bei der Erstellung von Inhalten nicht unbedingt eine bestimmte Groß- und Kleinschreibung verwenden musst.

Wie du die theme.json verwendest, um die Typografie deines WordPress-Themes zu definieren

Der Site-Editor ist ideal für Website-Betreiber ohne technische Kenntnisse. Mit der Datei theme.json stellst du sicher, dass der Site Editor den Nutzern alles bietet, was sie brauchen, um ihre Seiten anzupassen. Sie ist die Konfigurationsdatei, die die Entwicklungsgrundlage für dein Theme bildet.

Wir gehen nicht auf die Struktur und die Formatierung der gesamten theme.json Datei ein, sondern schauen uns an, wie du die Typografie darin definierst, einstellst und anwendest.

Die Struktur von theme.json verstehen und globale Einstellungen definieren

Du verwendest JSON, um alle Elemente in theme.json zu definieren, einschließlich der Typografie. Das Element typography wird unter dem Objekt settings in dieser Datei verschachtelt. Von dort aus verschachtelst du weitere Elemente, Eigenschaften und Objekte, um die Typografie deiner Website aufzubauen:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

Alle diese Elemente folgen einem ähnlichen Muster. Die Standardeinstellungen – und am einfachsten zu verstehen – sind die globalen Einstellungen. Diese lassen sich einfach verschachteln, aber du kannst auch Typografie-Einstellungen für einzelne Blöcke festlegen:

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

Dazu verwendest du die Eigenschaft blocks und einen bestimmten Namensraum für jeden Block, den du festlegen möchtest. Das fügt zwar zwei weitere Verschachtelungsebenen hinzu, aber es gibt keine Alternative zu diesem Ansatz. Trotzdem hast du eine Menge Eigenschaften, mit denen du spielen kannst.

Schriftarten registrieren

Bei der Typografie hast du dieselben Anpassungsmöglichkeiten wie beim Site Editor – in manchen Fällen sogar mehr. Im Wesentlichen legst du deinen Schriftstapel in der Eigenschaft fontFamilies ab und gibst ihm einen Slug und einen Namen:

• fontFamily entspricht dem CSS-Wert font-family und ist der Stapel von Schriften, den du in deinem Theme verwenden möchtest.
• name ist das, was du im Site-Editor siehst, wenn du eine Schriftart auswählst, damit sie für Menschen lesbar ist.
• slug wird an eine benutzerdefinierte CSS-Eigenschaft zur weiteren Verwendung angehängt.

Für Systemschriften ist das ganz einfach:

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

Um benutzerdefinierte Webschriften zu registrieren, musst du die Eigenschaft fontFace verwenden und einige Attribute definieren:

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // This is a range of font weight values.
      "fontStyle": "normal", // This has to be a valid CSS font-style value.
      "fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
    },
…

Sobald du die Schriftarten registriert hast, wählst du sie aus den verschiedenen Dropdown-Menüs im Website-Editor aus.

Es gibt mehrere Möglichkeiten, wie du Schriften für dein Theme registrieren kannst. Es gibt die Schriftbibliothek im Seiteneditor, das typische PHP-Enqueuing und das Plugin Create Block Theme:

Dies ist eine Vorlage für die Erstellung eines Themas, mit der du aber auch Schriftarten registrieren und definieren kannst. Sobald du die Schriftarten auf eine bequeme Weise registriert hast (wir empfehlen die Font Library), kannst du dich mit der Größenbestimmung befassen.

Einstellen von Schriftgrößen und Voreinstellungen in theme.json

Eine weitere zentrale Aufgabe bei der Typografie ist das Einstellen der Schriftgrößen. Hierfür wird die Eigenschaft fontSizes verwendet, mit der du Voreinstellungen für den Site-Editor festlegen kannst:

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

Wie bei anderen Typografie-Einstellungen erstellt WordPress für jede Voreinstellung eine eigene CSS-Eigenschaft mit dem von dir angegebenen Slug:

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress deaktiviert die fließende Typografie standardmäßig, aber du kannst sie mit booleschen Werten einschalten. Diese Option kannst du auf globaler Ebene einstellen..

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

…oder für jede Voreinstellung und Größe, die du definierst:

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

Mit den Werten min und max kannst du den Bereich der Skalierbarkeit für jede von dir definierte Flüssigschriftgröße festlegen.

Erweiterte Typografie-Funktionen implementieren

theme.json bietet eine ganze Reihe von Optionen, die denen des Site Editors in nichts nachstehen. Damit kannst du die Typografie auf deiner Website an die Vorgaben anpassen, die für dein Theme sinnvoll sind:

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

Du kannst diese Optionen wahlweise aktivieren oder deaktivieren. Jede Option hat einen booleschen Wert, was bedeutet, dass du auch für den Seiteneditor einige Anpassungsmöglichkeiten hast. Es gibt ein paar Anpassungen, die über die Möglichkeiten des Site Editors hinausgehen:

• customFontSize ist standardmäßig aktiviert und ermöglicht die Eingabe benutzerdefinierter Schriftgrößen – du kannst sie aber auch deaktivieren, wenn du die verfügbaren Optionen genau kontrollieren willst.
• dropCap ist standardmäßig falsch, aber wenn du sie aktivierst, hat der Nutzer die Möglichkeit, Großbuchstaben für den Anfangsbuchstaben jedes Absatzblocks zu aktivieren.
• textColumns aktiviert die Option „Spalten“ für jeden Text innerhalb eines Blocks, die standardmäßig deaktiviert ist.
• writingMode ermöglicht es, die Textausrichtung im Seiteneditor zu ändern. Du kannst den Nutzern die Wahl zwischen horizontalem und vertikalem Text lassen.

Der Umfang von theme.json bedeutet, dass du dort zuerst arbeiten solltest, vor allem wenn du ein Theme erstellst. Mit den Optionen im Site Editor kannst du oder deine Nutzer/innen die WordPress-Typografie verfeinern.

Wie man Typografie mit theme.json implementiert: ein praktisches Beispiel

FSE macht die Gestaltung und Entwicklung mit WordPress so einfach wie nie zuvor. Darüber hinaus ist die Auswahl und Implementierung der Schriftarten einfacher geworden. Einiges davon ist auf Designtrends zurückzuführen, aber es gibt auch Tools, mit denen du Lücken schließen kannst, wenn dir kein Grafikdesigner zur Seite steht.

Wir können mit der Auswahl deiner Hauptschriftarten beginnen.

1. Kombiniere komplementäre Schriften

Es gibt einen Grund, warum so viel darüber geschrieben wird, wie man Schriftarten und -typen auswählt. Das liegt daran, dass es eine knifflige Aufgabe sein kann. Du musst zum Beispiel das Branding der Website, ihren Zweck und das, was du vermitteln willst, berücksichtigen.

Dank der aktuellen Designtrends gibt es hier aber viel weniger zu tun. Denn dein Fließtext kann Systemschriften verwenden – insbesondere die Hauptschriftart des Betriebssystems (OS). Die einzige Aufgabe für dich besteht darin, eine Schrift zu wählen, die dazu passt.

Dies ist keine Anleitung zum Kombinieren von Schriftarten, aber wir haben ein paar Tipps für dich:

• OS-Schriften für den Fließtext sind normalerweise serifenlos. Das bedeutet, dass du dich entweder für eine Serifenschrift oder eine andere serifenlose Schrift entscheiden solltest, die anders und einzigartig aussieht und sich von anderen abhebt.
• Halte die Dinge einfach und überlege dir, ob du die OS-Schrift nur verwendest, wenn sie zum Design passt.
• Probiere verschiedene Kombinationen aus, damit du ein Gefühl dafür bekommst, welche Schriftarten zusammenpassen (und welche nicht).

Ein gutes Paar für einen Systemschriftenstapel ist Playfair Display, eine serifenbetonte Google-Schrift:

Bei einem Schriftpaar musst du ihre Größe berücksichtigen, nicht nur auf der Seite, sondern auch im Verhältnis zueinander.

2. Finde die richtige absolute und relative Größe

Die Wahl der Schriftgröße ist ebenfalls entscheidend, denn die falschen absoluten Größen können deine UX/UI ruinieren. Das ist auch ein Bereich, in dem du dich an die Standardwerte halten solltest. Wir ermutigen dich jedoch, hier zu experimentieren, denn jede Paarung hat ihren eigenen „Platz“ für die Schriften.

Typescale ist ein hervorragendes Tool, das dir bei der Erstellung der richtigen WordPress-Typografie helfen kann, egal was du brauchst:

Einer der besten Aspekte des Tools ist die Wahl der Skala. Es nimmt dir viel Arbeit ab, wenn du die passenden Schriftgrößen auswählst. Wir wählen hier die Skala Major Third mit einem Faktor von 1,2 und einer Basisgröße von 16 px:

In der mittleren Leiste siehst du die resultierenden Größen für jede Überschrift und jeden Absatz und kannst aus einer Reihe von Maßeinheiten wählen. Beachte, dass du mit Typescale auch den Buchstabenabstand, die Zeilenhöhe, die Schriftstärke und vieles mehr ändern kannst: alles anpassbar unter theme.json.

3. Standardeinstellungen in der theme.json anwenden

Wenn du die richtige Schriftart und -größe gefunden hast, kannst du sie in deiner theme.json Datei implementieren. Hier ist ein Beispiel dafür, wie eine typische theme.json Datei aussehen kann:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": ""Playfair Display", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

Du kannst diese Schriftarten auch auf jeden Block anwenden und sogar darüber nachdenken, jede Überschrift auf eine eigene Art und Weise zu gestalten. Bemühe dich um ein konsistentes und hierarchisches WordPress-Schriftsystem, das die Grundlage für das Design deines Themes bildet. Es sorgt für ein einheitliches Erscheinungsbild deiner Website, während der Site Editor dir mehr Flexibilität und Anpassungsmöglichkeiten bietet.

Die Rolle von Kinsta in deinem WordPress-Theme-Entwicklungsworkflow

Das leistungsstarke Hosting von Kinsta bietet viele Möglichkeiten, um eine effiziente und schnelle Website zu betreiben. Es bietet aber auch robuste Entwicklungstools, darunter DevKinsta, eine lokale Entwicklungsumgebung, die auf Docker-Containern läuft.

Es ist wichtig, dass du sicherstellst, dass deine WordPress-Typografie funktioniert, bevor du live gehst. Hierfür sind die Staging-Umgebungen von Kinsta unerlässlich. Vor allem Selective Push wirst du häufig nutzen. Damit kannst du bestimmte Dateien und Ordner pushen – jedes Asset, das du möchtest – und nicht alles auf einmal.

Auf diese Weise kannst du diskrete Designänderungen vornehmen, indem du einzelne Dateien pushst (z. B. theme.json). Außerdem kannst du das Risiko minimieren, dass Teile des Designs deiner Website, mit denen du zufrieden bist, beschädigt werden, und du kannst die Typografie deiner Website häufiger und schrittweise aktualisieren.

Zusammenfassung

FSE wird immer ausgereifter, und theme.json ist ein zentraler Bestandteil der gesamten WordPress-Bearbeitung. Die Typografie ist ein entscheidender Faktor, und WordPress bietet Tools auf Entwicklerebene und Zugang zu Elementen, für die man früher CSS- und PHP-Kenntnisse benötigt hätte.

Mit der intuitiven Benutzeroberfläche des Site Editors und der Anpassungsfähigkeit von theme.json kannst du eine Typografie erstellen, die die Ästhetik deiner Website verbessert, mit deinem Branding harmoniert und das Nutzererlebnis insgesamt verbessert.

Wir würden gerne von deinen Erfahrungen mit WordPress-Typografie hören und ob FSE für dich der Schlüssel zum Erfolg ist. Teile uns deine Gedanken in den Kommentaren unten mit.