Schriftgröße in WordPress flexibel und schnell anzupassen ist essenziell für Benutzerfreundlichkeit, Designqualität und Barrierefreiheit. Dieser Praxis-Guide zeigt dir alle effektiven Methoden – vom Gutenberg-Editor über den Customizer bis hin zu CSS, Plugins und Page Buildern.
Zentrale Punkte
- Block-Editor: Schriftgröße direkt im Textblock ändern
- Customizer: Globale Typografie-Einstellungen pro Theme
- Plugins: Flexible Steuerung und Barrierefreiheit
- CSS: Volle Kontrolle über Design und Layout
- Page Builder: Visuelle Größenanpassungen mit Responsive-Features
Schriftgröße im Block-Editor (Gutenberg) anpassen
Seit WordPress 5.0 gehört Gutenberg zum Standard. Damit kannst du die Schriftgröße einzelner Blöcke ohne Programmierkenntnisse festlegen. Wähle dazu im Beitrag oder auf der Seite den gewünschten Textblock (Absatz, Überschrift etc.) aus. Rechts in der Seitenleiste findest du unter „Typografie“ verschiedene voreingestellte Größen oder die Möglichkeit, eine individuelle Pixelgröße einzugeben.
Du willst bestimmte Absätze betonen? Dann sind unterschiedliche Größen in einzelnen Blöcken eine sinnvolle Option. Das wirkt sich nicht auf andere Bereiche deiner Seite aus und bleibt thematisch fokussiert. Ideal für Call-to-Actions, Zitate oder Hinweise. Auch kannst du unterschiedliche Schriftgrößen bei langen Texten nutzen, um Leser durch mehrere Abschnitte zu leiten. So entsteht eine klare Gliederung, die das Verständnis unterstützt und die Aufmerksamkeit erhöht.
Ein weiterer Tipp ist, neben der Größe auch Zeilenhöhe (Line-Height) und Zeichenabstand (Letter-Spacing) zu variieren. Das geht entweder direkt über den Editor oder in einigen Themes über zusätzliche Typografie-Einstellungen. Besonders bei umfangreichen Texten sorgen eine gut gewählte Zeilenhöhe und ein optimaler Zeichenabstand für weniger Ermüdung beim Lesen und wirken dadurch professioneller.
Global im WordPress-Customizer die Schriftgröße einstellen
Global bedeutet: Einmal einstellen – überall umgesetzt. Der Customizer ist dafür der perfekte Startpunkt, vorausgesetzt dein Theme unterstützt die Einstellung. Unter Design → Anpassen → Typografie kannst du Schriftgrößen für Grundtext, Überschriften und manchmal Menüs festlegen. Ergänzt wird das oft durch Optionen für Schriftfamilie, Zeilenhöhe und Gewicht.
Diese Methode eignet sich, wenn du einen einheitlichen Stil über alle Seiten hinweg benötigst. Besonders bei größeren Webprojekten spart dir das langfristig Zeit, da du Änderungen zentral steuerst. Viele Themes erlauben es auch, vordefinierte Farbpaletten und Schriftauswahlen festzulegen. So stellst du sicher, dass dein Logo, deine Überschriften und dein Fließtext ein konsistentes Erscheinungsbild haben.
Für ein anspruchsvolles Design lohnt es sich, schon bei der Theme-Auswahl darauf zu achten, wie flexibel die Optionen sind. Einige Themes punkten mit detaillierten Typografie-Panels und erlauben sogar eigene Theme JSON-Konfigurationen (bei Block-Themes). Damit lässt sich das Gesamtlayout, einschließlich der Schriftgrößen, weitreichend anpassen, ohne dass du jedes Mal im CSS-Code herumwerkeln musst.
Plugins nutzen: Mehr Flexibilität bei Schriftgrößen
Plugins sind sinnvoll, wenn du zusätzlich zur Basisfunktionalität interaktive Features wie Schriftvergrößerung für Besucher integrieren willst. Ein beliebtes Beispiel ist das Accessibility Widget. Es erlaubt deinen Nutzern, die Textgröße unabhängig vom Layout zu ändern – ideal für barrierefreie Websites.
Du möchtest noch mehr Kontrolle über Textelemente? Es existieren Plugins, mit denen sich für jede Benutzerrolle andere Schriftgrößen definieren lassen. Wer selbst CSS-Funktionen per Plugin ergänzen möchte, kann das mit Tools wie dem CSS Hero Design-Tool besonders komfortabel gestalten.
Gerade bei sehr textlastigen Projekten kann ein Plugin hilfreich sein, das speziell für Lesbarkeit entwickelt wurde. Manche Plugins bieten außerdem spezielle Fonts, die für Menschen mit Lese- oder Sehschwächen optimiert sind. Eine durchdachte Einbindung dieser Möglichkeiten führt nicht nur zu einer modernen Optik, sondern erhöht auch die Verweildauer der Besucher, da die Texte besser aufgenommen werden können.
Per CSS die volle Kontrolle übernehmen
Wenn du Erfahrung mit CSS hast oder präzise Änderungen an einzelnen Elementen umsetzen möchtest, empfehle ich dir Änderungen in der Datei style.css. Du findest sie im Menü Design → Theme Datei-Editor. Füge dort Formatierungen gezielt ein:
p {
font-size: 18px;
}
h2 {
font-size: 28px;
}
Wichtig: Nutze ein Child-Theme, damit deine Änderungen bei Theme-Updates nicht verloren gehen. Sichere die Datei, bevor du Änderungen vornimmst. Wer direkt im CSS arbeitet, hat maximale Freiheit – allerdings auch die volle Verantwortung. Zusätzlich lohnt es sich, einzelne Schriftgruppen sauber zu kommentieren, um später nicht den Überblick zu verlieren:
/* Grundlegende Absatz-Formatierung */
p {
font-size: 18px;
line-height: 1.6;
}
/* Überschriften-Level 2 */
h2 {
font-size: 28px;
line-height: 1.4;
}
Wenn du häufig neue Elemente gestaltest (z.B. für Widgets, Listen, Buttons), kann auch ein systematischer Ansatz mit rem-Einheiten die Code-Übersicht verbessern. So stellst du sicher, dass alle Schriftgrößen verlässlich auf einer gemeinsamen Basis (Root-Einstellung) skalieren.
Page Builder: Elementor & Co. – Visuell und intuitiv
Mit Page Buildern wie Elementor lassen sich ähnliche Anpassungen wie im Gutenberg-Editor visuell umsetzen – oft sogar noch bequemer. Öffne den gewünschten Abschnitt, klicke auf das Textelement, und ändere in der linken Sidebar die Schriftgröße. Zusätzlich kannst du für Desktop, Tablet und Smartphone unterschiedliche Größen definieren.
Elementor unterstützt seit einiger Zeit auch dynamische Werte per CSS Clamp. Damit lässt sich die Schriftgröße automatisch an die Bildschirmgröße anpassen – ohne zusätzliche Plugins oder Medienabfragen. Einen ausführlichen Überblick zu dieser Technik findest du in meinem Beitrag zu CSS & Code-Integration.
Neben Elementor bieten auch andere Page Builder (Beaver Builder, WPBakery, Divi) vergleichbare Optionen. Jeder Builder hat seine eigene Art, Stileinstellungen zu verwalten, doch das Prinzip bleibt ähnlich: Du wählst ein Element und steuerst mithilfe von Reglern die Schriftgröße. Für eine fortgeschrittene Konfiguration greifen manche User zudem auf eigene CSS-Klassen zurück, die global für bestimmte Builder-Elemente gelten. So kannst du beispielsweise allen Button-Texten dieselbe Größe zuweisen, ohne diese an zig Stellen manuell einzustellen.
Full Site Editing vs. klassische Themes
Ein entscheidender Faktor ist das verwendete Theme. Moderne Block-Themes verfügen zunehmend über eigene Typografie-Panels. Damit kannst du Schriftgrößen auf globaler Ebene definieren, oft sogar im Rahmen von Design-Vorlagen für Header und Footer.
Nutzt du hingegen klassische Themes ohne Block-Unterstützung, greifst du besser über Plugins oder CSS-Anpassungen ein. Schau nach, ob dein Theme individuelle „Theme-Optionen“ bietet – in vielen Fällen findest du dort Schrifteinstellungen für Body, H1–H6, Menütexte oder Buttons.
Full Site Editing (FSE) bietet potenziell sehr komfortable Wege, Layout und Typografie gemeinsam zu steuern. Doch der Umstieg von einem klassischen Theme auf ein FSE-Theme will gut geplant sein. Viele User stehen vor dem Problem, dass bestimmte alte Plugins nicht mehr einwandfrei harmonieren oder Anpassungen neu erstellt werden müssen. Wenn du darüber nachdenkst, langfristig die komplette Seite auf ein modernes Block-Theme umzustellen, plane genügend Zeit für den Umstellungsprozess ein – gerade, wenn du viele individuell angepasste Schriftgrößen in alten Themes hinterlegt hast.
Responsive Typografie: Einheitlich auf allen Geräten
Ein professioneller Webauftritt benötigt Schriftgrößen, die reaktiv auf unterschiedliche Bildschirmgrößen reagieren. Nutze dafür Einheiten wie em, rem oder %. Sie passen sich je nach Zoomfaktor und Gerät automatisch an. Besonders hilfreich ist das, wenn du mobil-first denkst oder ein international lesbares Design anstrebst.
Willst du den Skalierungseffekt genauer kontrollieren, ist die Nutzung von CSS Clamp besonders effektiv. Diese Funktion erlaubt es, minimale, ideale und maximale Schriftgrößen festzulegen – etwa so:
font-size: clamp(1rem, 2vw, 2.5rem);
Damit erreichst du eine flexibel skalierende Schrift ohne zusätzliche Media Queries oder Plugins. Gerade in Kombination mit responsiven Grid-Layouts (z.B. via Flexbox oder Grid) entsteht so ein stimmiges Gesamtkonzept, in dem sich Überschriften und Textblöcke an verschiedenste Bildschirmformate anpassen, ohne dass etwas „zerfällt“.
Denke auch an die realen Nutzungsszenarien deiner Zielgruppe. Surfen deine Besucher eher mit dem Smartphone, solltest du die Schriftgrößen in einer Mobilansicht besonders gut testen. Deine Seitenstatistiken (Google Analytics, Jetpack oder andere Tools) geben dir Aufschluss darüber, worauf du dich fokussieren solltest. Manchmal lohnen sich sogar unterschiedliche Schriftarten für mobile Endgeräte, um die Lesbarkeit zu verbessern – solange du jedoch auf einheitlichen Stil und Ladezeiten achtest.
Zugänglichkeit und Benutzerfreundlichkeit verbessern
Barrierefreiheit beginnt bei der Lesbarkeit. Achte auf die Mindestgröße von 16px für Fließtext und einen ausreichenden Farbkontrast. Verschnörkelte Schriftarten mögen dekorativ sein, aber auf Mobilgeräten oft schwer zu entziffern.
Mit einem Plugin wie dem Accessibility Widget ermöglichst du Besuchern, die Darstellung nach ihren Bedürfnissen zu vergrößern. Arbeite am besten mit relativen Einheiten und verzichte auf feste Pixelwerte, wo es geht. Damit passt sich deine Seite an Browser-Zoom und Betriebssystempräferenzen an.
Die Benutzerfreundlichkeit profitiert außerdem, wenn du Textstrukturen klar gliederst. Setze Zwischenüberschriften, Aufzählungen und kurze Absätze ein. So finden sich Leser leichter zurecht und können jene Informationen, die besonders wichtig sind, schneller aufnehmen. Denk an Menschen mit Seh- und Hörbehinderungen: Oftmals nutzen sie zusätzlich Screenreader. Eine durchgehende Logik in der Auszeichnung von Überschriften (h1, h2, h3 etc.) ist daher unbedingt zu empfehlen.
Design-Hierarchie und Typografie-Kombinationen
Um ein klares und professionelles Design zu erreichen, ist es nicht nur wichtig, einzelne Schriftgrößen zu definieren, sondern auch eine Design-Hierarchie zu schaffen. Solche Hierarchien entstehen, wenn Überschriften, Unterüberschriften, Fließtext und gegebenenfalls Bildunterschriften sinnvoll aufeinander abgestimmt sind. Nutze zum Beispiel mehrere Ebenen von Überschriften (H1, H2, H3), die sich in ihrer Schriftgröße und ihrem Gewicht unterscheiden. So springt der Blick des Lesers sofort auf den wichtigsten Inhalt.
Auch Schriftarten-Kombinationen können das Gesamtbild auflockern. Wähle jedoch nicht mehr als zwei oder drei harmonierende Fonts, um die Leser nicht zu überfordern. Eine klassische Kombination ist etwa eine gut lesbare serifenlose Schrift für Überschriften (z.B. Open Sans, Roboto) und eine Serifenschrift für Fließtext (z.B. Merriweather, Georgia). Durch diese Mischung entsteht ein klarer Kontrast, der die Aufmerksamkeit lenkt. Gleichzeitig bleibst du in der Gesamterscheinung konsistent und schaffst Widererkennungswert.
Falls du All-Caps (nur Großbuchstaben) für einzelne Überschriften oder Unterzeilen einsetzen möchtest, achte auf genügend Zeilenhöhe (Line-Height). Großbuchstaben benötigen oft etwas mehr Platz, um nicht zu dicht aneinandergereiht zu wirken. Ein dezentes Letter-Spacing steigert zudem die Lesbarkeit und verleiht der Typografie einen modernen Touch.
Typische Fehler: Was du besser vermeiden solltest
Viele Websites leiden unter einer inkonsistenten Schriftgestaltung. Unterschiedliche Größen und Schriften auf einer Seite erzeugen Verwirrung und senken die Lesbarkeit. Auch direkte Änderungen im Parent-Theme sind ein häufiger Fehler – sie werden beim Update des Themes überschrieben. Nutze stattdessen ein Child-Theme zur Absicherung.
Testumgebungen helfen, um neue Plugins oder Layouts vor der Liveschaltung zu prüfen. So vermeidest du Konflikte zwischen Erweiterungen und Theme. Gehe lieber einen Schritt langsamer, als das Frontend aus Versehen zu zerstören. Wer technisch unsicher ist, kann sich mit diesem Einsteiger-Guide zu WordPress Snippets weiterbilden.
Ein weiterer häufiger Stolperstein ist die Nutzung zu vieler Schriftgrößen oder -farben. Die Webseite wirkt dann schnell unübersichtlich. Versuche, eine Art Toolkit für dich festzulegen: ein Satz an definierten Schriftgrößen (z.B. „Groß für H1“, „Mittel für H2/H3“, „Standard für Absatz“) und eventuell eine Akzentfarbe für wichtige Schlagwörter oder Links. So bleibt das Design stimmig und du sparst dir später Zeit, weil du nicht bei jedem neuen Text neu überlegen musst, welche Größe du wählst.
Schriftgrößenvergleich: Welche Einheit sollte ich verwenden?
Im Alltag stellt sich oft die Frage, welche Maßeinheit für Schriftgrößen am besten geeignet ist. Die folgende Tabelle zeigt einen schnellen Überblick:
| Einheit | Funktion | Vorteile |
|---|---|---|
| px | Feste Pixelgröße | Exakte Kontrolle, weniger flexibel |
| em | Relativ zur Elternkomponente | Gut für modulare Layouts |
| rem | Relativ zur Wurzelgröße | Einheitlich über die ganze Seite |
| % | Relativ zum Kontext | Flexibel und reaktionsfähig |
| clamp() | Dynamisch mit Min/Max/Ideal-Werten | Responsive ohne Media Queries |
Bei der Wahl der Maßeinheiten achte darauf, welche Elemente auf deiner Seite besonders hervorgehoben werden sollen. Nutzt du ein modernes Layout, kannst du mit clamp() sehr elegante und adaptive Gestaltungen erzielen, indem du z.B. Überschriften dynamisch wachsen lässt, aber ab einer bestimmten Größe stoppst. Für Fließtext sind hingegen em oder rem oft vorteilhafter, da dir das auf allen Geräten eine gleichmäßige Lesbarkeit sichert, wenn deine Grundfontgröße stimmt.
Erweiterte CSS-Strategien für Schriftgrößen
Wenn du bereits fortgeschrittene Kenntnisse in CSS mitbringst, kannst du mit variablen Fonts experimentieren. Solche Fonts ermöglichen nicht nur das Anpassen von Gewicht (bold, thin, etc.) über ein einfaches CSS-Attribut, sondern auch die Variation der Breite, Schräge oder anderer Eigenschaften. Dies reduziert die Anzahl geladener Font-Dateien und kann das Design noch flexibler machen. Variable Fonts können im Theme oder über Plugins eingebunden werden, solange sie im Format .woff2 oder ähnlich vorliegen.
Ein weiterer Trick ist, mit Mix-Blend-Modi oder Filter-Effekten zu arbeiten, wenn du Texte vor Bildern platzierst. Dazu kann es nötig sein, den Container des Textes per CSS etwas dunkler oder heller zu machen, damit die Schrift stets gut lesbar bleibt. Zwar geht es hier weniger um Schriftgröße, aber um die Gesamtwirkung und die Zugänglichkeit deiner Texte, besonders wenn du den Trend „Text über Hero Images“ oder über Hintergrundvideos folgst.
Solltest du zudem eine Multisite oder ein Netzwerk mehrerer WordPress-Installationen betreiben, lohnt sich einheitliches CSS, das in einem gemeinsamen Child-Theme oder Plugin verwaltet wird. So musst du die Schriftgrößen-Definition nicht an mehreren Stellen pflegen und vermeidest Inkonsistenzen.
Häufige Fragen (FAQ) rund um Schriftgrößen in WordPress
1. Lohnt es sich, Schriftgrößen direkt im Editor zu ändern?
Ja, wenn du nur punktuell Anpassungen vornimmst. Für ein einheitliches Design ist aber eine zentrale Steuerung über den Customizer, ein globales Paletten-System oder Style-CSS die bessere Wahl.
2. Können Besucher die Schriften immer anpassen?
Ja, moderne Browser bieten Zoomfunktionen. Zusätzliche Plugins, wie das erwähnte Accessibility Widget, erlauben noch flexiblere Einstellungen. Damit können Nutzer die Schrift höher oder niedriger skalieren, ohne das Design zu zerschießen.
3. Was passiert nach einem Theme-Wechsel?
Oft werden individuelle Schriftgrößen-Einstellungen überschrieben, wenn sie nur im Theme selbst hinterlegt waren. Sichere daher deine CSS-Anpassungen und nutze ein Child-Theme. Bei einem neuen Theme testest du idealerweise zuerst in einer Staging-Umgebung, wie es mit deinen bisherigen Anpassungen harmoniert.
4. Wie sehe ich, welche Schriftgröße aktuell aktiv ist?
Nutze die Entwicklerkonsole des Browsers (z.B. Chrome DevTools). Dort kannst du die jeweiligen CSS-Regeln einsehen und herausfinden, welche Werte priorisiert werden. So lässt sich schnell feststellen, ob ein Plugin oder ein eigenes CSS die Anzeige beeinflusst.
Schlusswort: Schriftgröße WordPress – Deine Kontrolle über Lesbarkeit & Design
Du kennst jetzt alle Wege, die Schriftgröße in WordPress anzupassen. Ob mit Gutenberg, dem Customizer, per CSS, mit Plugins oder durch Page Builder – du hast die Wahl. Ich empfehle dir, mit einer Methode zu starten und dann systematisch das restliche Layout zu vereinheitlichen.
Wichtig ist die gleichmäßige Umsetzung, damit dein Webdesign konsistent bleibt. Denk auch an Barrierefreiheit – deine Leser freuen sich über klare, gut lesbare Texte. Und für dich macht es langfristig das Arbeiten am Layout einfacher.
