WP Grundlagen – Schriften und Typographie

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 m² 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 X₂.

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.

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.

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: 

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 

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.