Suche
Suche
Close this search box.

WP Grundlagen – Schriften und Typographie

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. 

Text in der Werkzeugleiste einstellen

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:

WordPress Werkzeugleiste
Die Werkzeugleiste bietet grundlegende und im Sibmenü versteckt auch einige besondere Formatierungsmöglichkeiten

Text ausrichten

Mit den bekannten Optionen Links, zentriert und rechts. Blocksatz ist (gut so!) nicht vorgesehen.

Fett setzen

Markierter Text wird fett gesetzt. Dh. mann kann auch Teile einer Überschrift Fett setzen, es muss nicht die ganze sein.

Kursiv setzen

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 Gutenberg Inline Bild 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.

 

WordPress Erweiterte Textoptionen
Im Submenü "Mehr" in der Werkzeugleiste sind ein paar nette Optionen versteckt

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.

Typographie festlegen

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 der 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.

WordPress Schiftgröße einblenden
WordPress bietet von Haus aus an zwischen 5 vordefinierten Schriftgrößen zu wählen.

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.

WordPress individuelle Schriftgröße
WordPress erlaubt Angaben in px, 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.

WordPress Typographie Optionen
Über das Vertikale More -Icon kann man weitere Werkzeuge einblenden um mehr typographische Optionen festzulegen

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.

Typographie Werkzeuge WordPress
Wenn alle Typographie Werkzeuge eingeblendet sind sieht der Sidebar dann so aus

Typographie im Stil

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 als) gibt es rechts das Icon für Stile bearbeiten .

 

Im Sidebar rechts sind nun die Stiloptionen einzustellen. 

In der Kopfzeile finden 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.

Dir 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: 

  • Text
  • Links
  • Überschriften
  • Beschriftungen
  • Buttons

Alle Einstellungen, die wir hier vornehmen sind Grundeinstellungen und gelten für die gesamte Website.

WordPress Stile Sidebar
Über den Stil-Sidebar kann man einen Stil auswählen und diesen dann nach Wunsch anpassen

Text 

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:

  • Schrift
  • Schriftgröße
  • Design (gemeint ist hier der Schriftschnitt)
  • Zeilenhöhe
Die Einstellung Standard bei der Schrift führt übrigens zurück zur Voreinstellung, hat man also eine reine Standardinstallation vom aktuellen WordPress führt das dazu, dass der Font Inter eingestellt wird. 
Stil Grundeinstellung Text
Das Format, das man hier einstellt, gilt für die gesamte Website.

Links 

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.

WordPress Link Einstellungen
Bei den Link-Einstellungen sollte so wenig wie möglich eingestellt werden

Überschriften 

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 

Stil Überschriften WordPress
Die Einstellungen für die Überschriften sind für alle oder die einzelnen Stufen einstellbar.

Beschriftungen

Hier sind die Typographischen Einstellungen für die Beschriftungen vorzunehmen, die dann unter den Bildern angegeben wurden können. 

Buttons

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. 

Typographie für Blöcke

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.

 

Beipspiel: 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 Innabstand 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. 

WordPress Liste Block
Wenn man die Stil-Einstellungen für den Blocktyp Liste ändert kann man zentral alle Listen der Website formatieren.

Schriften hinzufügen

Eigentlich hätte mit der Einführung von WordPress 6.4 eine eigene Schriftenverwaltung Teil von WordPress werden sollen, im Augenblick (Januar 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 eignen 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.

Fazit

Es hängt vom jeweiligen Block ab wo man Farben anwenden kann und wo nicht. Wichtig für eine rationelle Arbeit mit dem Blockeditor ist es, seine Farben im Stil einzustellen und von dort aus die Anwendung zu starten. Nur im Ausnahmefall sollten Farben direkt beim Block gesetzt werden müssen.

Veröffentlicht am: 27. Januar 2024

Letztes Update: 10. Februar 2024