tl;dr: Der geschriebene Text ist immer noch der wichtigste Informationsträger im Web. Damit die geschriebenen Inhalte gut rüberkommen ist sorgfältige Typographie extrem wichtig – auf allen Websites, von der technischen Information bis hin zum stylischen Coffee-Shop. Welche Möglichkeiten der Blockeditor in WordPress bietet und wie man diese anwendet ist der Inhalt dieses Artikel.
Ohne viel nachzudenken wird jeder der einen Text formatieren will zuerst in der Werkzeugleiste nach der gewünschten Option suchen. Und das ist auch eine gute Idee, schliesslich findet man hier viele sinnvolle Einstellungsmöglichkeiten. Hier am Beispoiel einer Überschift:
Mit den bekannten Optionen Links, zentriert und rechts. Blocksatz ist (gut so!) nicht vorgesehen.
Markierter Text wird fett gesetzt. Dh. mann kann auch Teile einer Überschrift Fett setzen, es muss nicht die ganze sein.
Markierter Text schräg gestellt oder wenn vorhanden durch den kursiven (Italic) Schriftschnitt ersetzt.
Unter dem Chevron Down 
verbirgt sich eine Reihe weiterer typographischer Optionen und erweiterter Möglichkeiten zum Editieren.
Durchgestrichen wendet den HTMLTag <s> an. Damit wird der markierte Text eben durchgestrichen.
Fußnote ist ein recht neues Feature. Wählt man diese Option wird an der gesetzten Stelle automatisch eine Fußnotenzahl eingesetzt sowie der Block Fußnote am Ende der Seite eingefügt. Dort kann nun der erklärende Text der Fußnote eingetragen werden. Cool.
Hervorheben erlaubt für den markierten Bereich eine andere Textfarbe auszuwählen. Damit kann man Teile des Textes, nun ja, hervorheben.
Hochgestellt ist selbsterklärend, besonders bei mathematischen Ausdrücken sinnvoll, für 4 m2 zB.
Inline-Bild erlaubt ein Bild im Text mitfliessen zu lassen, dass kann besonders bei Icons 
sinnvoll sein.
Inline-Code rahmt den Text mit dem HTML-Tag <code> ein und erlaubt dadurch besondere Code-Darstellung.
Sprache erlaubt das umschalten der Sprache und damit ggf. auch der Textrichtung.
Tastatur-Eingabe formatiert mit dem HTML-Tag <kbd>, damit wird der Text in der Browser-Monospace-Defaultschrift angezeigt.
Tiefgestellt ist als Gegenstück zu Hochgestellt zu verstehen, also <sub>, wieder für Formeln, Mathematik und Angeben wie X2.
Mit der Werkzeugleiste kann man also seinen Text formatieren. Technisch gesehen werden hier HTML-Tags angewendet die dann vom Browser interpretiert werden. Wie das aussieht hängt grundsätzlich von den Browser-Default-Einstellungen ab oder eben vom CSS, das die Website verwendet.
Jeder Block der Text anzeigt hat in der rechten Spalte einen Bereich für Typographie, wo man die eigentliche Formatierung des Textes vornehmen kann. Beim nächsten Beispiel wird ein Textabsatz verwendet.
In der Voreinstellung wird nur die Option Grösse angezeigt. Diese ist auf 2 Arten nutzbar: der WordPress Blockeditor bietet 5 Größen an: S, M. L, XL und XXL. Im Unterschied zu den Überschriften H1 bis H6 haben die Grössen hier keine Auswirkung auf den Code der Seite, man ändert also die Ansicht und nicht die Bedeutung des Textes.
Die hier mit Buchstaben aus der Bekleidungsindustrie gekennzeichneten Grössen wurden im Theme festgeschrieben und sind nicht einfach änderbar. Man kann zwar immer eine individuelle Größe einer Schrift angeben, wie groß aber S oder XL ist kann man nicht verändern (übrigens bewegen sich die Größen von 0,9 rem bis 3,27 rem, was in Pixel 14,4 bis 52,32 bedeuten würde – natürlich kann kein Gerät wirklich Bruchteile von Pixeln darstellen …)
Der Icon-Schalter rechts erlaubt das Umschalten zwischen diesen Vorgaben und der Eingabe von individuellen Werten. Diese können per Schieberegler oder numerisch eingegeben werden. Zulässige Einheiten sind Pixel, EM und REM.
Und was bedeuten diese Einheiten? Pixel ist eine absolute Einheit. Wie groß ein Pixel wirklich ist hängt immer vom Ausgabemedium ab, also der Größe in der ein einzelner Bildpunkt dargestellt werden kann. Um zu wissen wie groß etwas ist muss man also die Anzahl der Pixel und die Dichte der Pixel am Gerät kennen (dpi, Bildschirmauflösung etc.)
Die Einheiten Em und Rem hingegen sind relative Einheiten. Die Relation bezieht sich auf das Geviert der Schrift, das – stark vereinfacht – so groß wie der Großbuchstabe M ist. Der Unterschied zwischen den beiden Einheiten ist, dass Em in Bezug zum nächstäusseren Element und Rem in Bezug vom Root-Element (daher das R vor dem em) gesetzt wird. Ein 0,5 em Element in einem 0,5 em Element ist nicht 0,5 em sondern nur 0,25 em groß, währen 0,5 rem immer 0,5 rem sind.
In der Praxis entspricht 1 rem der default-Browser-Schriftgröße von 16 px. In der Anwendung heisst das: wo immer möglich Rem verwenden, das ist die beste Einheit im Webdesign.
Das nun die einzelnen Buchstaben bei der selben Größenangabe unterschiedlich hoch sein können liegt daran, dass der jeweilige Schriftendesigner das so wollte – aber das ist ein anders Thema.
Im Blockeditor ist rechts neben dem Titel der Eigenschaft oft das Vertikale More-Icon zu finden. 
Über dieses öffnet man ein Fenster in dem oben die Standards und unter dem Strich die weiteren Werkzeuge aufgelistet werden.
Einstellungen die man getroffen hat können entweder neben der einzelnen Funktion über zurücksetzen oder über Alle zurücksetzen in den Ausgangszustand zurückgesetzt werden.
Die Arbeitsweise ist nun die, dass man jedes einzelne Werkzeug auswählen kann, damit dessen Funktion auch im Frontend der Werkzeugleiste angezeigt wird – und damit veränderbar wird.
Um die einzelnen Optionen Schriftfamilie, Design, Zeilenhöhe, Zeichenabstand, text-Dekoration, Textausrichtung, Schreibweise und Initialbuchstabe anwenden zu können müssen diese Werkzeuge einzeln ausgewählt werden, es erscheint dann ein Check-Icon rechts davon.
Schrift – Schriftfamilie. Hier lässt sich nun aus den installierten Schriften auswählen welcher Font gewählt werden soll. In Kürze (vmtl. WP 6.5) wird WordPress eine eigene Schriftverwaltung ins System integrieren. Bis dahin muss auf Plugins zurückgegriffen werden. TT4 bietet je nach Stil immer 2 Schriften (eine Serif und einer Grotesk) sowie die System-Schriften zur Auswahl an. Mehr zum Thema weiter unten.
Grösse. siehe einen Absatz höher.
Design. Erlaubt die Auswahl zwischen den installierten Schriftschnitten, also von sehr dünn bis sehr fett und kursive davon. Damit das funktioniert müssen die entsprechenden Schriftschnitte auch geladen werden.
Zeilenhöhe. Kann hier relativ angegeben werden, also zb 1,4 oder 1,7 mal der Schriftgröße.
Zeichenabstand . Schafft Platz zwischen den Buchstaben, möglich sind hier px, %, em. rem, vw, vh.
Dekoration. Erlaubt die Definition von keine, unterstrichen und durchgestrichen.
Richtung. Erlaubt das Drehen des Textes von horizontal auf 90° vertikal.
Schreibweise. Damit kann man keine, GROSSBUCHSTABEN, kleinbuchstaben und Großschreibung auswählen.
Initialbuchstabe. Erzeugt einen großen ersten Buchstaben am Beginn eines Absatzes.
Schriften für einzelne Blöcke zu ändern kann nur im Ausnahmefall eine gute Idee sein. Im Regelfall wird man nicht innerhalb eines Beitrages oder eine Seite Änderungen an der Typographie vornehmen, sondern diese an zentraler Stelle verwalten.
In den Blockthemes, also auch in der aktuellen WordPress-Grundeinstellung, geschieht dies über den gewählten Stil:
Dashboard > Design > Website-Editor > Stile
und dann nach einer Stilauswahl (zb Standard) gibt es rechts das Icon für Stile bearbeiten 
.
Im Sidebar rechts sind nun die Stiloptionen einzustellen.
In der Kopfzeile findet man das Icon für das Stilbuch 
, Dieses zu aktivieren kann nur empfohlen werden, da damit die Auswirkungen der eingestellten Änderungen sofort zu erkennen sind.
Daneben finden man auch die Funktion für die Revisionen und unter dem Vertikalen More-Icon die Eingabemöglichkeit für CSS.
Die Funktion Durchstöbere die Stile lässt hier einen Stilwechsel zu.
Mehr über die Farben gibt es hier.
Zum Layout gibt es hier einen Artikel.
An dieser Stelle interessieren wir und aber für die Funktionen, die hinter dem Link zur Typographie verborgen sind:
Alle Einstellungen, die wir hier vornehmen sind Grundeinstellungen und gelten für die gesamte Website.
Betrifft den ganzen Text der Website, so ferne keine anderen Einstellungen wirken, also wirklich alle Buchstaben.
Die Einstellungen funktionieren natürlich exakte genauso wie bereits weiter oben beschrieben, einstellen lassen sich:
Die Einstellungsmöglichkeiten für die Links sind jenen für den Text beinahe gleich, nur dass man hier auch die Dekoration einstellen kann.
Und genau das sollte auch die einzige Einstellung sein, die man hier vornehmen sollte.
Warum? Links tauchen auf einer Website in den unterschiedlichsten Formen auf: im Text, in Überschriften, in der Navigation, in Buttons etc. Würde man hier zu viele Einstellungen vornehmen könnte das dazu führen, dass die Formatierung der Links wichtiger wird als jene der Überschriften und dadruch zB. verlinkte Überschriften anders aussehen und unverlinkte.
Es bleibt hier also eigentlich nur eine wichtige Einstellung über: sollen Links unterstrichen werden oder nicht? Die Option durchgestrichen macht hier wohl keinen Sinn.
Bei den Einstellungen für die Typographie der Überschriften gibt es 2 Ebenen.
Zuerst legt man jene Optionen fest, die für alle 6 Überschriften gleich sein sollen, also zB. die Schriftart und die Schreibweise.
In einem zweiten Schrift können dann Anpassungen für die einzelnen Prioritäten der Überschriften von H1 bis H6 gesetzt werden.
Also zB. werden ev. alle Überschriften mit der Schrift Cardo eingestellt und der Zeilenhöhe 1,2 ausgestattet.
Für die einzelnen Prioritäten werden dann die Größen von XXL bei H1 bis zu M bei der H6 eingestellt und vielleicht auch die Zeilenhöhe bei manchen korrigiert.
Grundsätzlich geht es bei diesen Dingen immer darum so wenige Einstellungen wie möglich zu treffen und wirklich nur die notwendigen Dinge zu definieren.
Und zur Wiederholung: die Einstellung zur Schreibweise keine kann sinnvoll sein, wenn zB. Alle Überschriften eine Schreibweise bekommen haben aber nur eine einzlene diese nicht haben sollen
Hier sind die typographischen Einstellungen für die Beschriftungen vorzunehmen, die dann unter den Bildern angegeben wurden können.
Die Einstellungen hier tauchen dann bei den Buttons auf. Diese sind nicht nur bei den Blöcken Buttons/Button wirksam sondern können auch bei anderen Blöcken oder auch Formularen sichtbar werden.
Unter den Einstellungen für die Typographie der Stile ist ein Link der Blöcke heisst. Wer diesen Wegweiser findet kann hier nun zu den Gestaltungen jedes einzelnen Blocktyps abbiegen.
Mann kann hier festlegen, welche typographischen Einstellungen ein bestimmter Block-Typ haben soll. Das wird bei manchen keinen Sinn ergeben (Text, Überschrift), weil man deren Einstellungen ja viel besser und zentraler weiter oben durchführen kann. Bei anderen Blöcken hingegen ist hier die Stelle, wo man seine Designideen zentral umsetzen kann um sie auf der ganzen Website zu sehen. Ein gutes Beispiel ist der Block Liste.
Man kann nun für jeden Blocktyp alle möglichen Einstellungen verändern, bei der Liste zB. die Farbe für Text, Hintergrund und die Linkfarben. Dann natürlich die Typographie für alle Texte, die in diesem Blocktyp auftauchen. Aber man kann auch im Bereich Größe den Innenabstand links setzen und damit bestimmen, wie weit der Einzug der Liste vom linken Rand weg erfolgen soll. Die Aussenabstände zu setzen kann ebenfalls sehr hilfreich sein um ein besseres Schriftbild vor und nach Listen zu erreichen.
Neben der Liste gibt es auch Einstellungen für den Block Listenelement, damit erhältst du volle Kontrolle über das Aussehen dieser Blöcke.
Eigentlich hätte mit der Einführung von WordPress 6.4 eine eigene Schriftenverwaltung Teil von WordPress werden sollen, im Augenblick (März 2024) ist es aber noch so, dass man ein Plugin benutzen muß um eigenen Schriften lokal in sein System einzubinden.
Wozu? In der Zwischenzeit gilt es als sinnvolle und beste Lösung, die Schriftdateien für seine Website nicht extern zu lagern sondern so wie alle andern Dateien auch am eigenen Webserver zu hosten. Das hat rechtliche Gründe und gilt auch von der Performance her als sehr gute Lösung.
Welche Dateien? Während früher bis zu 5 verschiedene Fileformate bereit gestellt wurden kann man nun auf das beste Fileformat, woff2 zugreifen. Aller modernen Browser beherrschen das und wer das nicht beherrscht wird auch andere Dinge nicht darstellen können, dann wird die Schrift auch schon egal sein.
Woher? Es gibt unzählige Quellen im Netz um Schriften zu bekommen. Die beliebten Google Fonts können ganz legal kopiert und lokal eingesetzt werden. Manche Plugins erledigen das gleich, für andere Lösungen muss man das selbst machen. Ein guter Tip ist hier der Google-Webfonts-Helper den man zur Auswahl und zum Download nutzen kann.
Welches Plugin? Eine Empfehlung lautet Custom Fonts. Mit Hilfe dieses Plugins lassen sich auch Google Fonts auswählen und auf Knopfdruck lokal installieren. Wenn eine Schrift hier hinzugefügt wurde steht sie überall in den typographischen Optionen zur Verfügung.
Schriften sind das wichtigste zentrale Gestaltungselement einer Website, es ist immer eine gute Idee sich ausreichend Zeit zu nehmen um erstens die Entscheidungen über die eingesetzten Fonts und zweitens deren Anwendung über die Stilvorgaben und Blockeinstellungen zu treffen. Menschen reagieren stark und zumeist unterbewusst auf das Schriftbild – eine langweilige Seite hat vielleicht nur die falsche Typographie?
Veröffentlicht am: 27. Januar 2024
Letztes Update: 6. März 2024
