(Mehr) Typografie in WordPress

Je nach gewähl­ter Vor­lage bie­tet Word­Press meist nur begrenzte Mög­lich­kei­ten, bei­spiels­weise Schrif­ten an die per­sön­li­chen Vor­lie­ben anzu­pas­sen. Falls über­haupt! Es gibt jedoch Werk­zeuge, die die Grund­ein­stel­lun­gen für die Typo­gra­fie in Word­Press beträcht­lich erweitern.

Word­Press ist nach eige­nen Anga­ben das am meis­ten ver­brei­tete Content-​Management-​System (CMS). Die­ser Aus­sage darf man durch­aus Glau­ben schen­ken, wenn man sich ein­mal in die Welt der Blogo­sphäre begibt.

Stan­dard­mä­ßig bie­tet die Blog-​Software, die sich übri­gens kei­nes­wegs nur für reine Web­logs eig­net, nur wenig bis keine Mög­lich­kei­ten, um die Typo­gra­fie in Word­Press an die per­sön­li­chen Vor­lie­ben anzu­pas­sen. Schlecht typo­gra­fierte Texte sind jedoch einer der häu­figs­ten Gründe für den Aus­stieg aus einer Web­site. Die Leser­schaft ver­weilt bei ein­la­den­den, gut for­ma­tier­ten und typo­gra­fisch auf­be­rei­te­ten Tex­ten hin­ge­gen länger!

Die typo­gra­fi­sche Opti­mie­rung fängt bei der Wahl der rich­ti­gen Schrift­art und der Schrift­grö­ßen an und hört bei Aus­zeich­nungs­schrif­ten, Glie­de­run­gen, farb­li­chen Hin­ter­le­gun­gen bis hin zu detail­lier­ten For­men der Mikro­ty­po­gra­fie, so z. B. bei Zei­chen­ab­stän­den, Leer­räu­men und Satz­zei­chen, oft nicht auf. Je nach gewähl­tem Theme (Layout-​Vorlage) ist oft nur eine Schrift­art mög­lich, von feh­len­den Ein­stel­lun­gen der Fein­ty­po­gra­fie ganz zu schwei­gen. Es gibt jedoch eine Reihe von Plug-​ins (Erwei­te­run­gen), mit denen sich die Typo­gra­fie in Word­Press beträcht­lich erwei­tern lässt.

Die Typografie in WordPress anpassen

Eines der umfang­reichs­ten Tools (Werk­zeuge) auf die­sem Gebiet ist WP Edit. Hier­mit lässt sich die Bear­bei­tungs­leiste des zum Schrei­ben von Bei­trä­gen übli­chen „Edi­tor“ um zusätz­li­che But­tons (Schalt­flä­chen) für typo­gra­fi­sche Funk­tio­nen erweitern.

Nach der Instal­la­tion und der Akti­vie­rung wech­seln Sie dann zu Set­tings (Ein­stel­lun­gen), zie­hen die gewünsch­ten Schalt­flä­chen ein­fach mit der Maus in die Bear­bei­tungs­leiste und spei­chern abschlie­ßend Ihre Ände­run­gen ab. Sobald Sie in den Edi­tor wech­seln, ste­hen Ihnen die neuen Funk­tio­nen zur Ver­fü­gung. Und diese las­sen sich sehen: Schrift­ar­ten und ‑grö­ßen las­sen sich nun frei wäh­len, Sym­bole in den Text ein­fü­gen und vie­les mehr.

Farbliche Unterlegung, Zitate, Tabellen und Textbausteine

So kön­nen Sie eine bestimmte Text­pas­sage als Zitat aus­zeich­nen, für die Aus­zeich­nung eine deut­lich grö­ßere Schrift­art wäh­len, den Text ein­rü­cken (was Word­Press bei Zita­ten aller­dings sowieso auto­ma­tisch aus­führt) und farb­lich unter­le­gen. Eine wei­tere nütz­li­che Funk­tion ist das Anle­gen von Tabel­len, wofür mit WP Edit ein Maus­klick genügt. Wäh­len Sie ein­fach die Anzahl der Spal­ten und Zei­len, die Ihre Tabelle haben soll, und kli­cken auf „Ein­fü­gen“. So las­sen sich auch (bestimmte Abschnitte der) Bei­träge 2- oder mehr­zei­lig gestal­ten sowie farb­lich unterlegen.

Dar­über hin­aus bie­tet die Erwei­te­rung unter „Extra Opti­ons“ die Mög­lich­keit, Text­bau­steine anzu­le­gen. Damit kön­nen Sie ganze Abschnitte inklu­sive einer indi­vi­du­el­len typo­gra­fi­schen Gestal­tung anle­gen. Bei Bedarf sind diese schnell und ein­fach über die gewählte Tas­ten­kom­bi­na­tion in Ihre Bei­träge eingefügt.

Sie sind mit der übli­chen Dar­stel­lung von Zita­ten weder in der WordPress-​üblichen Art noch mit der durch WP Edit zufrie­den? Nach der Instal­la­tion und Akti­vie­rung von Simple Pull Quote fin­den Sie einen zusätz­li­chen But­ton in der Bear­bei­tungs­leiste Ihres Edi­tors, mit dem Sie aus­ge­wählte Text­pas­sa­gen per Maus­klick in ein gra­fisch auf­be­rei­te­tes Zitat umwan­deln können.

Mehr Schriften für WordPress

Vie­len sind die mit der Layout-​Vorlage des CMS aus­ge­lie­fer­ten Schrif­ten zu wenig und zu wenig anpass­bar. Oft genug bringt das Theme näm­lich nur eine mit und die lässt sich auch über­haupt nicht ändern! Mit der Erwei­te­rung Google Typo­gra­phy las­sen sich bei­spiels­weise eine indi­vi­du­elle Überschriften-​Schrift defi­nie­ren und die CSS-Ein­stel­lun­gen des The­mes dahin­ge­hend auto­ma­tisch abändern.

Wesent­lich umfang­rei­cher und kom­for­ta­bler als Google Typo­gra­phy ist jedoch Font Cus­to­mi­zer. Nach der Instal­la­tion und Akti­vie­rung steht Ihnen ein Menü zur Ver­fü­gung, über das Sie prak­tisch alle ver­wen­de­ten Text­ar­ten Ihres The­mes indi­vi­du­ell defi­nie­ren kön­nen: (Unter-)Überschriften, Fließ­texte, Links und ihre alter­na­ti­ven Dar­stel­lun­gen für Mouse-​over-Effekte und mehr.

Feintypografie für WordPress

Für die­je­ni­gen, die im Hin­blick auf die Mikro­ty­po­gra­fie schon fort­ge­schrit­te­ner und ambi­tio­nier­ter sind, gibt es Web Typo­gra­phy Stan­dards. Hier­mit las­sen sich Spa­tio­nie­rung, Wort‑, Wortabstands-Ker­ning, Lauf­wei­ten, Satz­zei­chen, Son­der­zei­chen und vie­les mehr anpas­sen. Das Plug-​in eröff­net ein wei­tes Spek­trum an detail­ty­po­gra­fi­schen Mög­lich­kei­ten, sodass Ihre WordPress-​Beiträge typo­gra­fisch auch mit biblio­phi­len Druck­aus­ga­ben mit­hal­ten kön­nen. Vor­aus­ge­setzt, dass Sie über ent­spre­chende Inhalte verfügen!

Code(-Schnipsel) einfügen

Man­ches Theme bie­tet eine inte­grierte Mög­lich­keit, Code(-Schnipsel) ein­zu­fü­gen, bei­spiels­weise mit­tels der tags code und schlie­ßend /code, jeweils in ecki­gen Klam­mern gesetzt. Mit­tels pre und /pre las­sen sich zwar auch län­gere Code-​Abschnitte wie­der­ge­ben, eine farb­li­che Syntax-​Auszeichnung ist jedoch nicht mög­lich (siehe im über­nächs­ten Abschnitt). Hier hilft der Crayon Syn­tax High­ligh­ter. Neben C/C#/C++, Cof­fee­Script, CSS, HTML (XML/XHTML), Java, Java­Script, PHP, Python und Ruby las­sen sich noch wei­tere Syn­taxen darstellen.

Schriften im Administratorenbereich

Gefällt Ihnen die Schrift im soge­nann­ten Dash­board, dem Admi­nis­tra­to­ren­be­reich, aus dem her­aus Sie Ihre Instal­la­tion inklu­sive aller Bei­träge, Medien, Erwei­te­run­gen usw. ver­wal­ten, nicht? Nun, seit einer gewis­sen Ver­sion des CMS rich­tet sich diese nach der in Ihrem Brow­ser ein­ge­stell­ten Stan­dard­schrift. Wenn Sie diese ändern wol­len, müs­sen Sie das also in den Browser-​Einstellungen ändern: In Mozilla Fire­fox Ein­stel­lun­gen öff­nen und über den Unter­punkt „Inhalt“ bei „Schrift­ar­ten & Far­ben“, gege­be­nen­falls auch unter „Erwei­tert“, die Schrift anpassen.

Für Fortgeschrittene: style.css bearbeiten

Wenn Sie über eine selbst gehos­tete WordPress-​Installation ver­fü­gen, haben Sie über den Admi­nis­tra­to­ren­be­reich Zugriff auf die Datei style.css des gewähl­ten The­mes. Dort sind u. alle ver­wen­de­ten Schrif­ten auf­ge­führt. Bei einer Suche nach „font“ fin­det sich dort etwa

/* Base */
body {
	color: #333;
	font-family: 'Lora', serif;
	font-size: 17px;
	line-height: 1.6;
	word-wrap: break-word;
}

Die Schrift­fa­mi­lie „Lora“ ist hier also die Stan­dard­schrift für das body-Ele­ment, also die Grund­schrift. In der style.css fin­den sich im Wei­te­ren natür­lich auch alle ande­ren ver­wen­de­ten Schrift­ar­ten, so für alle Über­schrif­ten usw.

Doch hier gilt äußerste Vor­sicht: Anfän­ger soll­ten in der style.css kei­nes­wegs ohne zu wis­sen, was sie tun, herumschreiben!

Abschließende Hinweise für die Typografie in WordPress

Ver­fal­len Sie ob der nun zahl­rei­chen erwei­ter­ten Mög­lich­kei­ten nicht dar­auf, zu viele Schrift­ar­ten und ‑grö­ßen zu mischen und ande­ren typo­gra­fi­schen Unfug anzu­stel­len! Die Grund­re­geln soll­ten sein:

1. Nie mehr als zwei Schriftarten!
2. Nicht zwei Schrif­ten glei­chen Typs mischen, also zwei ver­schie­dene seri­fen­lose Schrif­ten oder zwei Serifenschriften!
3. Nie mehr als drei oder höchs­tens vier Schriftgrößen!
4. Blei­ben Sie les­bar, also bei­spiels­weise keine zu kleine Schrift wäh­len oder
5. keine Nega­tiv­schrif­ten ver­wen­den, also etwa weiße Schrift auf schwar­zem Grund!
6. Wäh­len Sie bei die­ser Gele­gen­heit auch kei­nen zu dunk­len Hintergrund!
7. Seien Sie sehr (!) vor­sich­tig mit Comic Sans, falls Sie sie über­haupt ver­wen­den wollen!
8. Über­la­den Sie Ihr Web­log nicht, weder mit zu vie­len Bil­dern noch mit zu viel Text! Es sei denn, dass Sie Foto­graf oder Fach­au­tor sind.
9. Ach­ten Sie auf Weiß­räume, also auf genü­gend Flä­chen, die nicht mit Bil­dern oder Text bela­den sind!
10. Bei Zwei­feln und Fra­gen: Las­sen Sie sich bera­ten! Und eine
11. Regel fin­det sich sicher­lich leicht. Schrei­ben Sie in einem Kom­men­tar, wel­che Sie noch auf­stel­len wür­den oder wel­che Erwei­te­rung für die Typo­gra­fie in Word­Press Sie hier ver­mis­sen, aber emp­feh­len möchten!

Und nun viel Spaß beim Blog­gen. Auf die Frage, wie Sie gute Inhalte schrei­ben, haben Sie hof­fent­lich auch Ant­wor­ten (im WWW gefun­den). Denn: Gute Inhalte sind min­des­tens ebenso wich­tig wie die Typo­gra­fie in WordPress!

Weitere Verweise

• Wenn Sie inzwi­schen schon mas­sen­haft Inhalte haben und die ältes­ten Bei­träge wie­der nach vorn holen wol­len, lesen Sie auf Ronalds Noti­zen: „Unter­be­wer­tete Inhalte för­dern“!
• Eine inter­es­sante Über­sicht über die von Word­Press mit­ge­lie­fer­ten Default The­mes (die Standard-​Design-​Vorlagen) bie­tet Ele­gant The­mes: „From Kubrick to Twenty Six­teen: A History of Word­Press Default The­mes“ (eng­lisch).
• Auf Desi­gners Inn: „Word­Press Schrif­ten ändern“ fin­den sich ergän­zende Tipps zum Thema.
• Und noch ein humor­vol­ler Hin­weis hier im Web­log: „Was sagt die Schrift­wahl über Sie aus?“