Individuelle Schriftgrößen im WordPress-Editor mit CSS anpassen

Für einige Blöcke kann man in der Randspalte eine individuelle Schriftgröße festlegen. Das betrifft den Absatzblock, aber auch für Headlines kann man die Schriftgröße ändern.

Damit kannst du beispielsweise einen Absatz hervorheben oder eine Überschrift einen Tick kleiner machen.

Dieser Absatz ist 36 Pixel groß.

Nicht ganz so praktisch ist, dass die individuelle Schriftgröße sich nicht anpasst. Wenn es im Theme-CSS nicht anders angegeben ist, bleibt der Absatz im Beispiel oben immer 36px groß. Auf dem großen Monitor sieht das ok aus, auf dem Smartphone wirkt die Schrift zu groß.

Schriftgrößen verändern

Die Darstellung der individuellen Schriftgrößen wird durch CSS-Klassen gesteuert. Der Absatz oben hat die CSS-Klasse has-large-font-size. Dieser Klasse ist in der Datei gutenberg/build/block-library/style.css die Schriftgröße 2.25em zugeordnet.

Die Klassen sind nach diesem Schema aufgebaut has-[name]-font-size. Über diese Klassen kann ich im Theme-CSS die Schriftgröße ansprechen und verändern:

.has-large-font-size { font-size: 30px; }
Code-Sprache: CSS (css)

Über Mediaqueries kann ich erreichen, dass die Schriftgröße sich der Bildschirmbreite anpasst. Die mittlere Schriftgröße wird jetzt auf dem Smartphone kleiner dargestellt. Damit bleiben die Texte lesbar und der Platz wird besser ausgenutzt.

.has-medium-font-size { font-size: 18px; } @media (min-width:600px){ .has-medium-font-size { font-size: 20px; } }
Code-Sprache: CSS (css)

Eigene Schriftgrößen definieren

Der Editor bringt ein Set aus Voreinstellungen mit. Du kannst die individuellen Schriftgrößen aber auch komplett selbst festlegen. Dabei kannst du sowohl die Namen als auch die Größen angeben. Auf diese Weise lassen sich die individuellen Schriftgrößen in die typografische Systematik des Themes einbinden.
Hier definiere ich drei Varianten:

function ks_custom_font_sizes() { add_theme_support('editor-font-sizes', array( array( 'name' => 'Small', 'slug' => 'small', 'size' => 14, ), array( 'name' => 'Medium', 'slug' => 'medium', 'size' => 20, ), array( 'name' => 'Large', 'slug' => 'large', 'size' => 30, ), )); } add_action('after_setup_theme', 'ks_custom_font_sizes');
Code-Sprache: PHP (php)

Schriftgrößen deaktivieren

Die individuellen Schriftgrößen lassen sich auch ganz abschalten. Bei komplexen Seiten bringen zu viele Schriftgrößen Unruhe ins Schriftbild. Da ist es besser, wenn nur die Schriftgrößen verwendet werden, die im Theme-CSS definiert sind.

function disable_font_sizes() { add_theme_support('editor-font-sizes', array()); add_theme_support('disable-custom-font-sizes'); } add_action('after_setup_theme', 'disable_font_sizes');
Code-Sprache: PHP (php)

Fazit

Dass man die Schriftgröße im Editor verändern kann, kann durchaus praktisch sein. Es kann aber sein, dass die Schriftgröße sich nicht anpasst, wenn der Bildschirm kleiner wird. Damit das passiert, müssen im Theme-CSS die entsprechenden Angaben dazu stehen.

Wenn du also mit individuellen Schriftgrößen arbeiten möchtest, solltest du nachschauen, wie sich die Schriftgrößen in deinem Theme verhalten und eventuell nacharbeiten.

Bei Kundenprojekten tendiere ich dazu, die individuellen Schriftgrößen ganz zu deaktivieren.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die weitgehend inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.