theme.json<\/code> hilft Entwicklern, WordPress-Themes zu erstellen, die dies nutzen.<\/p>\nDieser Artikel befasst sich mit der WordPress-Typografie f\u00fcr FSE und theme.json<\/code>. Dabei geht es auch um wichtige Zusammenh\u00e4nge wie die verwendete Technologie, technische \u00dcberlegungen und die Entwicklung der Verwendung von Schriftarten im Design.<\/p>\n<\/div><\/kinsta-auto-toc>\nTypografie im Web: eine kurze Geschichte<\/h2>\n
Wenn du dir die ersten Web-Designs<\/a> ansiehst, wirst du feststellen, dass die Schriftarten trotz der Vielfalt der Layouts einheitlich dargestellt wurden. Das liegt zum Teil an der Verf\u00fcgbarkeit und zum Teil an der Notwendigkeit. Kurz gesagt: Ohne die Technologie, die wir heute haben, k\u00f6nnen W\u00f6rter im Web nur die Schriftarten verwenden, die auf deinem Computer verf\u00fcgbar sind.<\/p>\nEin „Websurfer“ Mitte bis Ende der 90er Jahre h\u00e4tte nur eine Handvoll vorhersehbarer Schriftarten zur Verf\u00fcgung: Times New Roman, Arial, Helvetica, Georgia und Verdana. Die beiden letztgenannten sind von Microsoft in Auftrag gegebene Schriften, die unabh\u00e4ngig von der Zeit gut f\u00fcr das Web geeignet sind.<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/verdana-georgia.png\")
Beispiele f\u00fcr die Schriftarten Verdana und Georgia<\/figcaption><\/figure>\nDiese primitive Auswahl ist konsistent und verl\u00e4sslich, aber es fehlt ihr an Flexibilit\u00e4t. Dienste wie Google Fonts und Adobe Fonts<\/a> nutzen das WOFF-Dateiformat, um dir Zugang zu einer Bibliothek mit Tausenden von Schriften zu verschaffen, die du ganz einfach einbetten kannst.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts.png\")
Die Hauptschnittstelle von Google Fonts<\/figcaption><\/figure>\nDamit hast du mehr M\u00f6glichkeiten, die Lesbarkeit zu verbessern, unverwechselbare Designs zu erstellen und das Nutzererlebnis (UX) f\u00fcr deine Website anzupassen. Zu den Nachteilen geh\u00f6ren m\u00f6gliche Leistungseinbu\u00dfen (z. B. eine Verschiebung des Inhaltslayouts<\/a>), die Abh\u00e4ngigkeit von Drittanbieterdiensten, um das wichtigste Element auf deiner Website anzuzeigen, und Datenschutzbedenken.<\/p>\nDies veranlasst viele Webdesigner\/innen dazu, auf Schriftbibliotheken zu verzichten und die Verwendung von Systemschriftarten<\/a> zu \u00fcberdenken. Die schnellere Verarbeitung und die Kontrolle, die du \u00fcber die Anwendung eines „Systemschriften-Stacks“ hast, der nativen Schriften den Vorrang gibt und auch Fallback-Optionen nutzt, ist ein solider Ansatz.<\/p>\nWordPress und Typografie<\/h3>\n
WordPress legt gro\u00dfen Wert auf Typografie, damit du ansprechende und lesbare Inhalte erstellen kannst. Die Standard-Themes<\/a> von WordPress verwenden durchg\u00e4ngig Schriftarten, die ein Gleichgewicht zwischen \u00c4sthetik und Funktionalit\u00e4t herstellen.<\/p>\nDie aktuellen Standard-Themes verwenden Systemschriftarten f\u00fcr eine saubere, moderne und leistungsstarke Darstellung. \u00c4ltere Standard-Themes verwenden Schriftpaare wie Noto Sans und Noto Serif (f\u00fcr Twenty Fifteen<\/a>) und Montserrat und Merriweather (f\u00fcr Twenty Sixteen<\/a>).<\/p>\nUm diesen typografischen „Kreislauf des Lebens“ zu zeigen, verwendet Twenty Sixteen Helvetica und Georgia als Ausweichoptionen. Das Standardtheme von Twenty Ten<\/a> verwendet nur Helvetica, Arial und Georgia:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/twenty-ten.png\")
Die Twenty Ten-Demoseite von WordPress.org<\/figcaption><\/figure>\nDiese Entscheidungen geben den Ton f\u00fcr das WordPress-Design in den einzelnen Themes an. Sie k\u00f6nnen dich aber auch dazu inspirieren, genau darauf zu achten, wie du die Typografie einsetzt – und dabei hilft dir WordPress FSE.<\/p>\n
Eine kurze Einf\u00fchrung in Full Site Editing und theme.json<\/h2>\n
FSE<\/a> und theme.json<\/code> sind von zentraler Bedeutung daf\u00fcr, wie du die Typografie in WordPress verwaltest, daher ist es wichtig, beide zu verstehen. FSE nutzt den Block-Editor und f\u00fcgt weitere Funktionen hinzu, um zum Site-Editor zu werden.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor.png\")
Die Oberfl\u00e4che des WordPress-Site-Editors sieht \u00e4hnlich aus wie der Block-Editor, bietet aber mehr Anpassungsm\u00f6glichkeiten.<\/figcaption><\/figure>\nEr vereinheitlicht die Optionen f\u00fcr die Gestaltung deiner Website in vielerlei Hinsicht:<\/p>\n
\n- Du nutzt den Bearbeitungsansatz der Bl\u00f6cke f\u00fcr die gesamte Website, nicht nur f\u00fcr deine Inhalte.<\/li>\n
- Eine Vorlagenbibliothek ist Teil der Einrichtung, so dass du diese mit denselben Werkzeugen bearbeiten kannst wie deine Inhalte.<\/li>\n
- Das Styling findet ebenfalls im Site Editor statt und bietet ein globales Einstellungsschema.<\/li>\n
- Der Site-Editor ben\u00f6tigt keinen Code, um eine der verf\u00fcgbaren Optionen zu implementieren. So wird die L\u00fccke zwischen Entwicklung und Endnutzerdesign geschlossen.<\/li>\n<\/ul>\n
Du kannst die Datei theme.json<\/code> als eine Entwicklungsversion von FSE betrachten. Du brauchst Kenntnisse der JavaScript Object Notation (JSON), um mit der Datei arbeiten zu k\u00f6nnen, aber das ist f\u00fcr die meisten Website-Betreiber kein Problem. Sie ist eine zentrale Konfigurationsdatei f\u00fcr die Verwaltung deiner globalen Stile und Einstellungen.<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/theme-json.png\")
Eine theme.json-Datei, die in einem Code-Editor angezeigt wird<\/figcaption><\/figure>\nF\u00fcr jede Einstellung wird ein Schl\u00fcssel\/Wert-Paar von option:value<\/code> verwendet, das du auf verschiedene Weise implementieren kannst:<\/p>\n\n- Festlegung von globalen Farbpaletten.<\/li>\n
- Einrichten von Schriftfamilien und -gr\u00f6\u00dfen.<\/li>\n
- Konfigurieren von blockspezifischen Stilen.<\/li>\n
- Abst\u00e4nde und Layout-Einstellungen verwalten.<\/li>\n<\/ul>\n
Mit theme.json<\/code> kannst du konsistentere und anpassbare Themes erstellen, ohne dass du benutzerdefiniertes CSS<\/a> ben\u00f6tigst (obwohl auch das m\u00f6glich ist). Die Anpassungsf\u00e4higkeit und Flexibilit\u00e4t von theme.json<\/code> macht dies zu einer Schl\u00fcsselkomponente bei der Entwicklung von Themes f\u00fcr WordPress. Optimal ist es, wenn du beides auf unterschiedliche Weise f\u00fcr dein gesamtes Themendesign verwendest – und die Typografie ist da keine Ausnahme.<\/p>\nEinrichten der Typografie im WordPress-Site-Editor<\/h2>\n
Wenn du wei\u00dft, wie man den Block-Editor benutzt, kannst du auch den Site-Editor verwenden. In WordPress navigierst du zum Bildschirm Erscheinungsbild <\/strong>> Editor<\/strong>. Hier wird der Startbildschirm f\u00fcr den Seiteneditor angezeigt:<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor-home.png\")
Der Startbildschirm des Site Editors<\/figcaption><\/figure>\nDer Bildschirm Stile<\/strong> in der linken Navigation bietet dir einige globale Design-Optionen, die auch \u00c4nderungen an der Typografie beinhalten:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-options.gif\")
Verschiedene Voreinstellungen f\u00fcr Stile im WordPress-Site-Editor<\/figcaption><\/figure>\nF\u00fcr die meisten Anwendungsf\u00e4lle sind individuelle Einstellungen f\u00fcr verschiedene typografische Aspekte von gr\u00f6\u00dferem Nutzen. Es gibt zwei kleine Symbole am oberen Rand des Stile-Bildschirms<\/strong>, die weitere Optionen \u00f6ffnen: das Stilbuch und das Stiftsymbol Stile bearbeiten<\/strong>.<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-sidebar-icons.png\")
Die Symbole zum Bearbeiten von Stilen im Seiteneditor<\/figcaption><\/figure>\nAu\u00dferdem kannst du Typografieoptionen auf Elementebene und f\u00fcr jeden Block festlegen.<\/p>\n
Die Schriftbibliothek<\/h3>\n
Auf dem Bildschirm Stile bearbeiten <\/strong>> Typografie<\/strong> wird die Schriftbibliothek angezeigt, obwohl sie im Seiteneditor nicht explizit so hei\u00dft. Damit kannst du Schriften und Schriftarten auf verschiedene Weise bearbeiten:<\/p>\n\n- Du kannst eigene Schriftarten hochladen und verwalten.<\/li>\n
- Es gibt eine Option, um Google Fonts direkt in WordPress zu verwenden.<\/li>\n
- Du kannst Schriftensammlungen<\/a> mit PHP erstellen.<\/li>\n<\/ul>\n
Um die Schriftbibliothek im Bereich Typografie in der Seitenleiste des Site-Editors aufzurufen, klicke auf das Symbol Schriftarten verwalten<\/strong>:<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/manage-fonts-icon.png\")
Das Symbol Schriftarten verwalten<\/strong>\u00a0im WordPress-Seiteneditor<\/figcaption><\/figure>\nAuf der Registerkarte Bibliothek<\/strong> siehst du die aktuell registrierten Schriftarten f\u00fcr dein Theme und welche davon aktiv sind:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-library-dialog.png\")
Die Oberfl\u00e4che der WordPress-Schriftbibliothek<\/figcaption><\/figure>\nWenn du auf eine davon klickst, kannst du einzelne Schriftarten aktivieren oder deaktivieren:<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/active-fonts.png\")
Die aktuell aktiven Schriftarten in der Schriftartenbibliothek des Site Editors<\/figcaption><\/figure>\nAuf der Registerkarte Hochladen<\/strong> kannst du mit einem Drag-and-Drop-Upload-Dialog deine eigenen Schriften in den Formaten TTF, WOFF, WOFF2 und OTF installieren.<\/p>\nDie Registerkarte Schriftarten installieren<\/strong> 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<\/a>:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts-library.png\")
Die Google Fonts-Bibliothek im WordPress-Site-Editor<\/figcaption><\/figure>\nHier w\u00e4hlst du die Schriftarten, die du installieren m\u00f6chtest, aus der umfangreichen Liste aus und klickst dann auf die Schaltfl\u00e4che Installieren<\/strong>. Sobald die Erfolgsmeldung erscheint, werden diese Schriften auf der Registerkarte Bibliothek<\/strong> angezeigt:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/installed-fonts.png\")
Die installierten Schriftarten f\u00fcr eine WordPress-Instanz<\/figcaption><\/figure>\nJetzt kannst du die Schriftarten wie jede andere auf deiner Website verwenden. Jetzt musst du sie an deine Bed\u00fcrfnisse anpassen.<\/p>\n
Das Style Book<\/h3>\n
Eine der Gefahren beim Ausw\u00e4hlen und Einstellen von Schriftarten ist, dass du nicht wei\u00dft, wie sie in Kombination mit Farbschemata, Layouts und Formatierungen aussehen werden. Das Style Book ist von unsch\u00e4tzbarem Wert, denn es erm\u00f6glicht dir eine Vorschau deiner Typografieeinstellungen f\u00fcr verschiedene Elemente.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book.png\")
Das Site Editor Style Book<\/figcaption><\/figure>\nWenn du auf das Augensymbol klickst, \u00f6ffnet sich das Stilbuch, das f\u00fcnf Registerkarten enth\u00e4lt:<\/p>\n
\n- Text<\/strong>: Hier kannst du mit Abs\u00e4tzen, \u00dcberschriften, Listen und anderen Elementen arbeiten, die sich auf Text konzentrieren.<\/li>\n
- Medien<\/strong>: Hier kannst du Bilder, Videos und Audiodesign-Pr\u00e4sentationen anpassen.<\/li>\n
- Design<\/strong>: In diesem Bereich werden strukturelle Designaspekte wie Spalten, Trennlinien und Schaltfl\u00e4chen zusammengefasst.<\/li>\n
- Widgets<\/strong>: Dieser Bildschirm besteht aus zwei Elementen: Dynamische Generationen, wie z. B. Listen von Archiven und Kommentaren. Au\u00dferdem arbeitest du hier mit der Suchleiste, den Symbolen f\u00fcr soziale Medien und den Tag Clouds.<\/li>\n
- Thema<\/strong>: Hier geht es um die Kopfzeilenelemente deiner Seite, wie den Titel, die Tagline, die Navigation und das Logo.<\/li>\n<\/ul>\n
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\u00fcr jeden Block und nicht mit einzelnen Elementen:<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book-editing.png\")
Du hast alle M\u00f6glichkeiten, die Typografie direkt im Style Book zu bearbeiten<\/figcaption><\/figure>\nDu kannst die gleichen Bildschirme auch \u00fcber den Bereich Stile <\/strong>> Bl\u00f6cke<\/strong> auf der Homepage des Site Editors erreichen. Unabh\u00e4ngig davon kannst du mit den Optionen, die du siehst, die Typografie (und mehr) jedes Blocks bis ins kleinste Detail anpassen.<\/p>\nEinstellen der Typografieoptionen im Seiteneditor<\/h3>\n
F\u00fcr alle Bl\u00f6cke und Elemente stehen dir die gleichen Grundoptionen zur Verf\u00fcgung. Hier findest du einen \u00dcberblick \u00fcber die einzelnen Optionen im Panel.<\/p>\n
Schriftart und -gr\u00f6\u00dfe<\/h4>\n
Das Dropdown-Men\u00fc Schriftart<\/strong> ist ganz einfach: W\u00e4hle die Schriftart aus, die du auf das jeweilige Element oder den Block anwenden m\u00f6chtest:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-drop-down.png\")
Auswahl einer Schriftart aus der verf\u00fcgbaren Auswahl auf der Registerkarte Typografie<\/figcaption><\/figure>\nDie Voreinstellungen f\u00fcr die Gr\u00f6\u00dfe<\/strong> lassen sich im Seiteneditor am wenigsten anpassen. Du w\u00e4hlst eine Gr\u00f6\u00dfe aus einem Bereich zwischen Small und Extra Extra Large:<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/size-presets.png\")
WordPress bietet Voreinstellungen f\u00fcr die Schriftgr\u00f6\u00dfe im Seiteneditor<\/figcaption><\/figure>\nWenn du theme.json<\/code> bearbeitest, kannst du diese voreingestellten Werte \u00e4ndern – aber nicht vom Seiteneditor aus. Mit der Schaltfl\u00e4che Benutzerdefinierte Gr\u00f6\u00dfe festlegen<\/strong> kannst du eine benutzerdefinierte Gr\u00f6\u00dfe mit einer Reihe von Gr\u00f6\u00dfeneinheiten festlegen:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-size-custom.png\")
Ausw\u00e4hlen einer benutzerdefinierten Schriftgr\u00f6\u00dfe und -einheit<\/figcaption><\/figure>\nEs gibt noch mehr M\u00f6glichkeiten, die Typografie im Seiteneditor anzupassen, einschlie\u00dflich Methoden, f\u00fcr die du normalerweise CSS verwendest.<\/p>\n
Erscheinungsbild, Zeilenh\u00f6he und Buchstabenabst\u00e4nde<\/h4>\n
Das Dropdown-Men\u00fc Erscheinungsbild<\/strong> scheint einfach zu sein: W\u00e4hle eine Schriftst\u00e4rke aus einer umfangreichen Liste aus und sie wird auf deinen Text angewendet. Allerdings hast du oft nicht alle verf\u00fcgbaren Schriftarten f\u00fcr jeden Schriftgrad zur Verf\u00fcgung.<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/appearance-drop-down.png\")
Das Dropdown-Men\u00fc f\u00fcr das Erscheinungsbild im WordPress-Webeditor<\/figcaption><\/figure>\nUnsere Tests haben gezeigt, dass WordPress diese Liste nicht filtert, um nur verf\u00fcgbare Schriftschnitte anzuzeigen. Au\u00dferdem wendet es eine „n\u00e4chstgelegene \u00dcbereinstimmung“ an, wenn du eine Schriftart ausw\u00e4hlst, zu der es keine passende Schriftart gibt. F\u00fcr unsere Beispielsite verwenden wir Cardo Normal, Cardo Bold und Cardo Bold Italic. Wenn du Semi Bold, Bold, Extra Bold oder Black w\u00e4hlst, wird nur Cardo Bold verwendet:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/bold-appearance.gif\")
\u00c4ndern des Erscheinungsbildes von Text im WordPress-Site-Editor<\/figcaption><\/figure>\nDie Zeilenh\u00f6he verwendet keine Voreinstellungen und gleicht deine Schriftart, dein Aussehen und deine Gr\u00f6\u00dfe aus. Dieser Wert sorgt f\u00fcr mehr Platz zwischen den Zeilen und ist oft eine praktische L\u00f6sung, wenn der Text zusammengestaucht aussieht:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/line-height.gif\")
\u00c4ndern der Zeilenh\u00f6he im WordPress-Site-Editor<\/figcaption><\/figure>\nDer Buchstabenabstand ist \u00e4hnlich und folgt dem CSS-Brauch, sich selbst zu den vorhandenen nat\u00fcrlichen Abst\u00e4nden hinzuzuf\u00fcgen:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/letter-spacing.png\")
Du kannst die Buchstabenabst\u00e4nde so weit verschieben, dass sie nicht mehr brauchbar sind.<\/figcaption><\/figure>\nWie bei der Anpassung der Schriftgr\u00f6\u00dfe kannst du verschiedene Ma\u00dfeinheiten ausw\u00e4hlen. 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.<\/p>\n
Es ist \u00fcblich, kleine positive Werte f\u00fcr den Buchstabenabstand zu verwenden – oft nicht mehr als 0,12rem\/em – und kaum negative Abst\u00e4nde.<\/p>\n
Bei der letzten Auswahlm\u00f6glichkeit – Gro\u00df- und Kleinschreibung – kannst du w\u00e4hlen, ob der Text gro\u00df, klein oder im Satz geschrieben werden soll. Du kannst die Gro\u00dfschreibung auch entfernen. Das ist gut f\u00fcr die Konsistenz der Schrift, da du bei der Erstellung von Inhalten nicht unbedingt eine bestimmte Gro\u00df- und Kleinschreibung verwenden musst.<\/p>\n
Wie du die theme.json verwendest, um die Typografie deines WordPress-Themes zu definieren<\/h2>\n
Der Site-Editor ist ideal f\u00fcr Website-Betreiber ohne technische Kenntnisse. Mit der Datei theme.json<\/code> 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\u00fcr dein Theme bildet.<\/p>\nWir gehen nicht auf die Struktur und die Formatierung der gesamten theme.json<\/code> Datei ein, sondern schauen uns an, wie du die Typografie darin definierst, einstellst und anwendest.<\/p>\nDie Struktur von theme.json verstehen und globale Einstellungen definieren<\/h3>\n
Du verwendest JSON, um alle Elemente in theme.json<\/code> zu definieren, einschlie\u00dflich der Typografie. Das Element typography<\/code> wird unter dem Objekt settings<\/code> in dieser Datei verschachtelt. Von dort aus verschachtelst du weitere Elemente, Eigenschaften und Objekte, um die Typografie deiner Website aufzubauen:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n \"slug\": \"system-font\",\n \"name\": \"System Font\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"20px\",\n \"name\": \"Medium\"\n }\n ]\n }\n }\n}<\/code><\/pre>\nAlle diese Elemente folgen einem \u00e4hnlichen Muster. Die Standardeinstellungen – und am einfachsten zu verstehen – sind die globalen Einstellungen. Diese lassen sich einfach verschachteln, aber du kannst auch Typografie-Einstellungen f\u00fcr einzelne Bl\u00f6cke festlegen:<\/p>\n
\"styles\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--primary)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.5\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--secondary)\",\n \"fontWeight\": \"700\"\n }\n }\n }\n}<\/code><\/pre>\nDazu verwendest du die Eigenschaft blocks<\/code> und einen bestimmten Namensraum f\u00fcr jeden Block, den du festlegen m\u00f6chtest. Das f\u00fcgt zwar zwei weitere Verschachtelungsebenen hinzu, aber es gibt keine Alternative zu diesem Ansatz. Trotzdem hast du eine Menge Eigenschaften, mit denen du spielen kannst.<\/p>\nSchriftarten registrieren<\/h3>\n
Bei der Typografie hast du dieselben Anpassungsm\u00f6glichkeiten<\/a> wie beim Site Editor – in manchen F\u00e4llen sogar mehr. Im Wesentlichen legst du deinen Schriftstapel in der Eigenschaft fontFamilies<\/code> ab und gibst ihm einen Slug und einen Namen:<\/p>\n\nfontFamily<\/code> entspricht dem CSS-Wert font-family<\/code> und ist der Stapel von Schriften, den du in deinem Theme verwenden m\u00f6chtest.<\/li>\nname<\/code> ist das, was du im Site-Editor siehst, wenn du eine Schriftart ausw\u00e4hlst, damit sie f\u00fcr Menschen lesbar ist.<\/li>\nslug<\/code> wird an eine benutzerdefinierte CSS-Eigenschaft zur weiteren Verwendung angeh\u00e4ngt.<\/li>\n<\/ul>\nF\u00fcr Systemschriften ist das ganz einfach:<\/p>\n
\u2026\n \"typography\": {\n \"fontFamilies\": [\n {\n \"name\": \"Primary\",\n \"slug\": \"primary\",\n \"fontFamily\": \"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif\"\n },\n {\n \"name\": \"Secondary\",\n \"slug\": \"secondary\",\n \"fontFamily\": \"system-ui, sans-serif\"\n }<\/code><\/pre>\nUm benutzerdefinierte Webschriften zu registrieren, musst du die Eigenschaft fontFace<\/code> verwenden und einige Attribute definieren:<\/p>\n\u2026\n\"name\": \"Secondary\",\n\"slug\": \"secondary\",\n\"fontFamily\": \"'Open Sans', sans-serif\",\n \"fontFace\": [\n {\n \"fontFamily\": \"Open Sans\",\n \"fontWeight\": \"300 800\", \/\/ This is a range of font weight values.\n \"fontStyle\": \"normal\", \/\/ This has to be a valid CSS font-style value.\n \"fontStretch\": \"normal\", \/\/ This also needs to be a valid CSS font-stretch value.\n \"src\": [ \"file:.\/assets\/fonts\/open-sans.woff2\" ] \/\/ This is an array of URLs for custom fonts, and can support multiple formats.\n },\n\u2026<\/code><\/pre>\nSobald du die Schriftarten registriert hast, w\u00e4hlst du sie aus den verschiedenen Dropdown-Men\u00fcs im Website-Editor aus.<\/p>\n
Es gibt mehrere M\u00f6glichkeiten, wie du Schriften f\u00fcr dein Theme registrieren kannst. Es gibt die Schriftbibliothek im Seiteneditor, das typische PHP-Enqueuing<\/a> und das Plugin Create Block Theme<\/a>:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/create-block-theme.png\")
Das Create Block Theme Header-Bild von WordPress.org<\/figcaption><\/figure>\nDies ist eine Vorlage f\u00fcr 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\u00f6\u00dfenbestimmung befassen.<\/p>\n
Einstellen von Schriftgr\u00f6\u00dfen und Voreinstellungen in theme.json<\/h3>\n
Eine weitere zentrale Aufgabe bei der Typografie ist das Einstellen der Schriftgr\u00f6\u00dfen. Hierf\u00fcr wird die Eigenschaft fontSizes<\/code> verwendet, mit der du Voreinstellungen f\u00fcr den Site-Editor festlegen kannst:<\/p>\n\"settings\": {\n \"typography\": {\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"12px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"32px\",\n \"name\": \"Extra Large\"\n }\n ]\n }\n}<\/code><\/pre>\nWie bei anderen Typografie-Einstellungen erstellt WordPress f\u00fcr jede Voreinstellung eine eigene CSS-Eigenschaft mit dem von dir angegebenen Slug:<\/p>\n
body {\n--wp--preset--font-size--small: 12px;\n--wp--preset--font-size--x-large: 32px;\n}<\/code><\/pre>\nWordPress deaktiviert die flie\u00dfende Typografie standardm\u00e4\u00dfig, aber du kannst sie mit booleschen Werten einschalten. Diese Option kannst du auf globaler Ebene einstellen..<\/p>\n
{\n \"version\": 2,\n \"settings\": {\n \"typography\": {\n \"fluid\": true\n }\n }\n}<\/code><\/pre>\n…oder f\u00fcr jede Voreinstellung und Gr\u00f6\u00dfe, die du definierst:<\/p>\n
{\n \"name\": \"Medium\",\n \"size\": \"1.25rem\",\n \"slug\": \"md\",\n \"fluid\": {\n \"min\": \"1rem\",\n \"max\": \"1.5rem\"\n }\n},<\/code><\/pre>\nMit den Werten min<\/code> und max<\/code> kannst du den Bereich der Skalierbarkeit f\u00fcr jede von dir definierte Fl\u00fcssigschriftgr\u00f6\u00dfe festlegen.<\/p>\nErweiterte Typografie-Funktionen implementieren<\/h3>\n
theme.json<\/code> 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\u00fcr dein Theme sinnvoll sind:<\/p>\n\"styles\": {\n \"typography\": {\n \"letterSpacing\": \"0.02em\",\n \"textTransform\": \"uppercase\",\n \"textDecoration\": \"underline\",\n \"lineHeight\": \"1.55rem\",\n \"fontStyle\": \"normal\"\n }\n}<\/code><\/pre>\nDu kannst diese Optionen wahlweise aktivieren oder deaktivieren<\/a>. Jede Option hat einen booleschen Wert, was bedeutet, dass du auch f\u00fcr den Seiteneditor einige Anpassungsm\u00f6glichkeiten hast. Es gibt ein paar Anpassungen, die \u00fcber die M\u00f6glichkeiten des Site Editors hinausgehen:<\/p>\n\ncustomFontSize<\/code> ist standardm\u00e4\u00dfig aktiviert und erm\u00f6glicht die Eingabe benutzerdefinierter Schriftgr\u00f6\u00dfen – du kannst sie aber auch deaktivieren, wenn du die verf\u00fcgbaren Optionen genau kontrollieren willst.<\/li>\ndropCap<\/code> ist standardm\u00e4\u00dfig falsch, aber wenn du sie aktivierst, hat der Nutzer die M\u00f6glichkeit, Gro\u00dfbuchstaben f\u00fcr den Anfangsbuchstaben jedes Absatzblocks zu aktivieren.<\/li>\ntextColumns<\/code> aktiviert die Option „Spalten“ f\u00fcr jeden Text innerhalb eines Blocks, die standardm\u00e4\u00dfig deaktiviert ist.<\/li>\nwritingMode<\/code> erm\u00f6glicht es, die Textausrichtung im Seiteneditor zu \u00e4ndern. Du kannst den Nutzern die Wahl zwischen horizontalem und vertikalem Text lassen.<\/li>\n<\/ul>\nDer Umfang von theme.json<\/code> 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.<\/p>\nWie man Typografie mit theme.json implementiert: ein praktisches Beispiel<\/h2>\n
FSE macht die Gestaltung und Entwicklung mit WordPress so einfach wie nie zuvor. Dar\u00fcber hinaus ist die Auswahl und Implementierung der Schriftarten einfacher geworden. Einiges davon ist auf Designtrends zur\u00fcckzuf\u00fchren, aber es gibt auch Tools, mit denen du L\u00fccken schlie\u00dfen kannst, wenn dir kein Grafikdesigner zur Seite steht.<\/p>\n
Wir k\u00f6nnen mit der Auswahl deiner Hauptschriftarten beginnen.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Kombiniere komplement\u00e4re Schriften<\/h3>\n
Es gibt einen Grund, warum so viel dar\u00fcber geschrieben wird, wie man Schriftarten<\/a> und -typen ausw\u00e4hlt. 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\u00fccksichtigen.<\/p>\nDank der aktuellen Designtrends gibt es hier aber viel weniger zu tun. Denn dein Flie\u00dftext kann Systemschriften verwenden – insbesondere die Hauptschriftart des Betriebssystems (OS). Die einzige Aufgabe f\u00fcr dich besteht darin, eine Schrift zu w\u00e4hlen, die dazu passt.<\/p>\n
Dies ist keine Anleitung zum Kombinieren von Schriftarten, aber wir haben ein paar Tipps f\u00fcr dich:<\/p>\n
\n- OS-Schriften f\u00fcr den Flie\u00dftext sind normalerweise serifenlos. Das bedeutet, dass du dich entweder f\u00fcr eine Serifenschrift oder eine andere serifenlose Schrift entscheiden solltest, die anders und einzigartig aussieht und sich von anderen abhebt.<\/li>\n
- Halte die Dinge einfach und \u00fcberlege dir, ob du die OS-Schrift nur verwendest, wenn sie zum Design passt.<\/li>\n
- Probiere verschiedene Kombinationen aus, damit du ein Gef\u00fchl daf\u00fcr bekommst, welche Schriftarten zusammenpassen (und welche nicht).<\/li>\n<\/ul>\n
Ein gutes Paar f\u00fcr einen Systemschriftenstapel ist Playfair Display<\/a>, eine serifenbetonte Google-Schrift<\/a>:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/playfair-display.png\")
Die Google Fonts Musterseite f\u00fcr Playfair Display<\/figcaption><\/figure>\nBei einem Schriftpaar musst du ihre Gr\u00f6\u00dfe ber\u00fccksichtigen, nicht nur auf der Seite, sondern auch im Verh\u00e4ltnis zueinander.<\/p>\n
2. Finde die richtige absolute und relative Gr\u00f6\u00dfe<\/h3>\n
Die Wahl der Schriftgr\u00f6\u00dfe ist ebenfalls entscheidend, denn die falschen absoluten Gr\u00f6\u00dfen k\u00f6nnen 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\u00fcr die Schriften.<\/p>\n
Typescale<\/a> ist ein hervorragendes Tool, das dir bei der Erstellung der richtigen WordPress-Typografie helfen kann, egal was du brauchst:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/typescale-site.png\")
Die Typescale Website<\/figcaption><\/figure>\nEiner der besten Aspekte des Tools ist die Wahl der Skala. Es nimmt dir viel Arbeit ab, wenn du die passenden Schriftgr\u00f6\u00dfen ausw\u00e4hlst. Wir w\u00e4hlen hier die Skala Major Third mit einem Faktor von 1,2 und einer Basisgr\u00f6\u00dfe von 16 px:<\/p>\n![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-sizing-scale.png\")
Die Optionen zur Skalierung der Schrift in Typeface<\/figcaption><\/figure>\nIn der mittleren Leiste siehst du die resultierenden Gr\u00f6\u00dfen f\u00fcr jede \u00dcberschrift und jeden Absatz und kannst aus einer Reihe von Ma\u00dfeinheiten w\u00e4hlen. Beachte, dass du mit Typescale auch den Buchstabenabstand, die Zeilenh\u00f6he, die Schriftst\u00e4rke und vieles mehr \u00e4ndern kannst: alles anpassbar unter theme.json<\/code>.<\/p>\n3. Standardeinstellungen in der theme.json anwenden<\/h3>\n
Wenn du die richtige Schriftart und -gr\u00f6\u00dfe gefunden hast, kannst du sie in deiner theme.json<\/code> Datei implementieren. Hier ist ein Beispiel daf\u00fcr, wie eine typische theme.json<\/code> Datei aussehen kann:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\",\n \"slug\": \"ubuntu-sans\",\n \"name\": \"Ubuntu Sans\"\n },\n {\n \"fontFamily\": \"\"Playfair Display\", serif\",\n \"slug\": \"playfair\",\n \"name\": \"Playfair Display\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"16px\",\n \"name\": \"Medium\"\n },\n {\n \"slug\": \"large\",\n \"size\": \"20px\",\n \"name\": \"Large\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"25px\",\n \"name\": \"Extra Large\"\n },\n {\n \"slug\": \"huge\",\n \"size\": \"31px\",\n \"name\": \"Huge\"\n }\n ]\n }\n },\n \"styles\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--system)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.8\"\n },\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--medium)\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--playfair)\",\n \"fontWeight\": \"700\"\n }\n },\n \"core\/post-title\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--huge)\"\n }\n }\n }\n }\n}<\/code><\/pre>\nDu kannst diese Schriftarten auch auf jeden Block anwenden und sogar dar\u00fcber nachdenken, jede \u00dcberschrift auf eine eigene Art und Weise zu gestalten. Bem\u00fche dich um ein konsistentes und hierarchisches WordPress-Schriftsystem, das die Grundlage f\u00fcr das Design deines Themes bildet. Es sorgt f\u00fcr ein einheitliches Erscheinungsbild deiner Website, w\u00e4hrend der Site Editor dir mehr Flexibilit\u00e4t und Anpassungsm\u00f6glichkeiten bietet.<\/p>\n
Die Rolle von Kinsta in deinem WordPress-Theme-Entwicklungsworkflow<\/h2>\n
Das leistungsstarke Hosting von Kinsta bietet viele M\u00f6glichkeiten, um eine effiziente und schnelle Website zu betreiben. Es bietet aber auch robuste Entwicklungstools, darunter DevKinsta<\/a>, eine lokale Entwicklungsumgebung, die auf Docker-Containern<\/a> l\u00e4uft.<\/p>\n![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/devkinsta-home.png\")
Das DevKinsta-Logo<\/figcaption><\/figure>\nEs ist wichtig, dass du sicherstellst, dass deine WordPress-Typografie funktioniert, bevor du live gehst. Hierf\u00fcr sind die Staging-Umgebungen von Kinsta unerl\u00e4sslich. Vor allem Selective Push<\/a> wirst du h\u00e4ufig nutzen. Damit kannst du bestimmte Dateien und Ordner pushen – jedes Asset, das du m\u00f6chtest – und nicht alles auf einmal.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/selective-push.png\")
Das selektive Push-Tool von Kinsta<\/figcaption><\/figure>\n