Kommentare 38

Schrift in WordPress optimieren: Mit dem wp-Typography Plugin

Um die Lesbarkeit von Webseiten-Texten zu verbessern, muss man ins Detail gehen. Wichtig ist natürlich die Auswahl der Schriftarten, und deren Kombinationen untereinander. Auch die Wahl der Schriftgrößen, die Kombination zwischen serifen- und serifenloser Schrift, sowie die Abstände der Schrift zueinander sind weitere wichtige Stilmittel. Und auch im Fließtext lassen sich noch jede Menge Details optimieren, um Web-Texte besser lesbar zu machen. Mit dem WordPress-Plugin »wp-Typography« kannst du die Ausgabe deiner Texte noch besser kontrollieren, und so z.B. Silbentrennung oder die Verwendung bestimmter Sonderzeichen als Standard festlegen.

Das wp-Typography Plugin

Die Standardeinstellungen für Typografie in WordPress sind oftmals ausreichend. Doch besonders wenn du viel Text, z.B. in längeren Blog-Artikeln zu verwalten hast, oder einfach ein großer Fan von Typografie bist, kannst du die Ausgabe deiner Texte mit Hilfe des wp-Typography Plugins noch weiter verbessern.

Das Plugin kannst du dir entweder im Plugin-Verzeichnis auf WordPress.org herunterladen, oder direkt auf der Homepage des Plugins.

Da die Möglichkeiten des Plugins recht detailliert und somit nicht auf den ersten Blick ersichtlich sind, habe ich die wichtigsten Funktionen des Plugins zusammen gefasst.

1. Silbentrennung

Standardmäßig gibt es keine automatische Silbentrennung in WordPress. Doch gerade bei schmaleren Textabschnitten (z.B. in der Blog-Sidebar) können so unschöne Lücken in den Textabschnitten entstehen, die deine Texte schwer lesbar machen.

Mit Hilfe des Plugins kannst du bestimmen, bei welchen Text-Elementen Wörter getrennt werden sollen, welche Sprache du nutzt (insgesamt wird die Silbentrennung in 42 Sprachen unterstützt), und ob du auch Überschriften und Substantive trennen möchtest.

wp-Typography Plugin erklaert
Die Einstellungs-Möglichkeiten zur Silbentrennung in wp-Typography.

Außerdem kannst du in den Einstellungen noch genau festlegen, wie viele Buchstaben ein Wort mindestens haben soll um getrennt zu werden, und wie viele Buchstaben jeweils vor und nach dem Wort mindestens bestehen bleiben sollen.

2. Die Verwendung von Sonderzeichen

Neben der praktischen Silbentrennung kannst du auch die Verwendung von Sonderzeichen bestimmen.

2.1. Anführungsstriche

In der Typografie gibt es z.B. für Anführungsstriche verschiedene Zeichen, die verwendet werden können. Das Plugin bietet eine ganze Reihe von Möglichkeiten an, mit den du die typografisch falschen, geraden Anführungszeichen automatisch ersetzen kannst.

wp-Typography Plugin erklaert
Die gerade Anführungsstriche können automatisch umgewandelt werden.

wp-Typography Plugin erklaert
In den Plugin-Einstellungen werden jede Menge Optionen für Anführungsstriche angeboten.

2.2. Diakritische Zeichen

Als weitere Plugin-Option kannst du die automatische Umformung von diakritischen Zeichen bestimmen. So kannst du festlegen, dass z.B. französische Akzents gesetzt werden oder andere ausländische Wörter korrekt angezeigt werden.

wp-Typography Plugin erklaert
Neben den Standard-Wörtern kannst du auch noch eigene Änderungen in den Plugin-Einstellungen bestimmen.

Die Option für die Anzeige diakritische Zeichen ist besonders interessant, wenn du z.B. einen Reise-Blog oder einen Koch-Blog hast, und dort oft ausländische Wörter verwendest.

2.3. Weitere Sonderzeichen

Neben Anführungsstrichen und diakritischen Zeichen gibt es noch eine Reihe weitere Einstellungs-Möglichkeiten.

So kannst du z.B. auch bestimmen, dass die drei Auslassungspunkte in die typografisch korrekte Ellipse umgewandelt werden. Auch Sonderzeichen wie z.B. das Copyright-Zeichen oder mathematische Symbole werden in ihre korrekte Form umgewandelt.

wp-Typography Plugin erklaert
Jede Menge Sonderzeichen können über das Plugin automatisch umgewandelt werden.

3. Die Kontrolle von Leerzeichen

Eine weitere praktische Funktion des Plugins ist die Kontrolle über den Umgang mit Leerzeichen und Zwischenräumen. So kannst du vermeiden, dass unschöne Lücken zwischen den Wörtern deines Textes entstehen.

wp-Typography Plugin erklaert
Diese Plugin-Einstellungen stehen für die Handhabung von Leerzeichen zur Verfügung.

4. Vermeidung von Widows

Die sehr unschönen Widows (in der deutschen Typografie-Sprache Hurenkinder genannt, Begriffserklärung siehe Wikipedia), werden in der Typografie einzelne Absätze oder Wörter genannt, die alleine in einer neue Zeile bzw. einen neuen Absatz rutschen. Mit Hilfe von wp-Typography kannst du solche unschönen Umbruchfehler in deinen Texten vermeiden.

wp-Typography Plugin erklaert
Einzelne Absätze oder Wörter, die in eine neue Zeile oder Absatz rutschen, werden in der Typografie Widow Lines genannt.

Außerdem hast du die Möglichkeit zu bestimmen, wie viele Buchstaben aus der vorherigen Zeile mit in die neue Zeile wechseln sollen.

5. Wrapping und CSS Hooks

Eine weitere Plugin-Option ist das automatische Einrücken (das sogenannte Wrapping) vor und nach Bindestrichen (engl. hyphens), bei langen Emails oder URLs.

Außerdem kannst du noch praktische CSS Hooks aktivieren, mit deren Hilfe du bestimmten Text-Elementen spezielle Styles zuordnen kannst. So kannst du beispielsweise Und-Zeichen (engl. ampersands), Akronyme (Kurzwörter, die aus den Anfangsbuchstaben mehrere Wörter zusammengesetzt sind, z.B. UFO) oder Zahlenfolgen gestalten.

wp-Typography Plugin erklaert
Die CSS-Styles sollest du dann wenn möglich in dein Haupt-Stylesheet style.css integrieren.

6. Bestimmte Elemente von den Plugin-Einstellungen ausschließen

Unter dem obersten Punkt »General Scope« kannst du außerdem bestimmter HTML-Elemente, Elemente mit bestimmten CSS-Klassen oder IDs von den gesamten Plugin-Einstellungen ausschließen. So kannst du leicht bestimmen, welche Textabschnitte oder Webseiten-Bereiche nicht bearbeitet werden sollen.

Wie gefallen dir die Funktionen des Plugins? Und für wie wichtig hältst du diese detaillierte Optimierung der Texte auf einer Webseite? Über dein Feedback und weitere Tipps zum Thema Typografie und WordPress freue ich mich sehr!

38 Kommentare

  1. Die »falschen« Anführungszeichen in WordPress haben mich schon immer gestört.

    Ich denke, mit dem Plugin kann ich beim Schreiben auch einiges an Zeit sparen, weil ich nicht umformulieren muss, bis z.B. der Umbruch passt.

    Ellen, vielen vielen Dank für den Tipp!

    • @NetzBlogR:

      Vielen Dank für dein Feedback. Freut mich, dass du den Plugin-Tipp nützlich findest :-)

      Ja, wir sind auch gerade dabei das Plugin hier auf dem Blog zu installieren. Die Möglichkeit die Anführungsstriche zu korrigieren ist klasse, und auch die Silbentrennung finde ich eine tolle Option :-)

      Viele Grüße,
      Ellen

  2. Sebastian Bloß

    Klingt sehr interessant und wurde in meine Plugin-Liste mit aufgenommen, vielen Dank hierfür.

    Natürlich von mir keinen Kommentar ohne Frage:
    Ich verfasse meine Artikel in der Regel in der HTML-Ansicht und würde gerne volle Kontrolle über Absätze haben. Es fängt schon damit an das meine gesetzten p-Tags von WP gelöscht bzw. ignoriert wird. Gerne verwende ich auch Zeilenumbrüche mit Hilfe des br-Tags. Aber auch hier fuscht mir WP dazwischen. Gibt es eine Möglichkeit das WordPress einfach so akzeptiert was ich im HTML-Modus verfasse? Vielen Dank und liebe Grüße!

    • Hallo Sebastian,

      vielen Dank für dein Feedback, freut mich, dass du das Plugin auch interessant findest :-)

      In der HTML-Ansicht in WP musst du eigentlich keine extra p-tags von Hand setzen, außer du möchtest einen p-tag mit einer speziellen CSS-Klasse einfügen. Ansonsten kannst du einen normalen Absatz für einen Text-Abschnitt mit p-tags setzen und für einen br-tag, genau wie im Text-Editor Shift+Enter. Die HTML-Elemente werden dann dementsprechend von WordPress im Code eingefügt. Ich hoffe mit dieser Erklärung kommst du bereits weiter :-)

      Viele Grüße,
      Ellen

    • @Sebastian: Ich nehme mal an, Du hast das selbe Problem, was mich an WordPress auch stört: Wenn man z.B. zweimal Return drückt, um einen größeren Abstand zwischen den Absätzen zu erhalten, werden diese nach dem Speichern in einen einfachen Abstand umgewandelt.

      Ich habe mir das noch einfache gemacht, indem ich einen Shortcode “absatz” in der functions.php erstellt habe. Dieser fügt einen einfachen “br”-Tag in den Code ein.

      Möchte ich nun einem Absatz etwas mehr Abstand geben, füge ich einfach ein [absatz] in meinen Text ein und bekomme, was ich will…

      • Sebastian Bloß

        Danke Euch für Eure Antworten!
        Mein Problem ist, dass ich die volle Kontrolle über das Setzen der Tags haben möchte, ohne das WP automatisch, wenn ich auf speichern klicke, mir meine manuell gesetzten p-Tags und br-Tags wieder zerstört. Und genau was NetzBlogR sagt, möchte ich gerne, wenn ich 2x das br-Tag benutze auch zwei Zeilenumbrüche drin sind. Wird mir nach dem speicher auch wieder genommen. Mein Ziel ist es sozusagen wie ich es auch von meinen statischen Seiten gewohnt bin, einfach in HTML meine Fließtexte zu verfassen und die sollen dann auch so sein, wie ich sie mit HTML untergliedert habe.

  3. Hallo Ellen,

    ich bin erst vor kurzem hier auf Euren Blog gestoßen und habe mir den RSS-Feed abonniert. Eure Artikel finde ich klasse, da meist Themen behandelt werden, die mich interessieren bzw. für die ich auch Lösungen gesucht habe und die zudem super verständlich sind, außerdem kommt Euer Blog sehr symphatisch rüber.

    Auch bei Beitrag zum WP-Typographie-Plugin dachte ich, dass ich so ein Plugin gebrauchen könnte, da mich vor allem die fehlende Silbentrennung stört, da ich alle Artikel in WordPress nur in Blocksatz schreibe und es da häufig zu Lücken im Text kommt. Allerdings hat das Plugin meine vorhandenen Texte nach der Installation derart verunstaltet, dass ich das Plugin erst mal wieder deaktiviert habe. Es wurde im Text wild getrennt, auch mitten in der Zeile und auch sonst hat das Plugin nicht ordentlich gemacht, was es sollte. Haben andere mit dem Plugin ähnliche Erfahrungen gemacht? Viele Grüße

    • Hallo Joerg,

      vielen Dank für dein Feedback. Es freut mich, dass dir der Blog so gut gefällt und du den RSS-Feed auch gleich in deinem Reader aufgenommen hast :-)

      Zu deine Plugin-Frage:
      Wir nutzen das Plugin zwar bisher hier auf Elmastudio noch nicht, ich habe es aber bereits auf einer Test-Installation aktiv und bisher keine Probleme feststellen können.

      Es gibt allerdings ein paar Voraussetzungen für die Nutzung des Plugins (u.a. Verwendung von PHP5). Schau doch mal auf der Plugin-Homepage unter dem Punkt “Requirements” oder in den FAQs, ob du hier einen Hinweis findest. Ich hoffe dieser Tipp hilft dir eventuell bereits weiter :-)

      Viele Grüße,
      Ellen

    • Hallo Stefan,

      vielen Dank für dein Feedback zum Beitrag. Es freut mich, dass du das Typografie-Plugin nützlich findest. Ich finde auch, es hat einige sehr hilfreiche Optionen zu bieten :-)

      Viele Grüße,
      Ellen

  4. Andrej

    Hallo Ellen,

    vielen Dank für diesen Beitrag. Beim Stöbern durch euren Blog kann man immer wieder was dazulernen. Das Plugin ist sauber eingearbeitet und wirkt Wunder.

    Viele Grüße
    André

    Ich warte ja schon sehnsüchtig auf die Fortsetzung der Screencast-Reihe “WordPress Tutorial”

  5. Ich bin’s nochmal. Ich habe das Plugin schweren Herzens doch wieder aus dem WordPress geworfen, weil es zwei Dinge getan hat, die mich extrem gestört haben:

    1. Ein “Leerzeichen Minus Leerzeichen” (so, wie sicher die meisten Blogger ihre Gedankenstriche im Fließtext eingeben) wird in WordPress zu “Leerzeichen Gedankenstrich Leerzeichen” konvertiert.

    Leider ändert das Plugin dies und macht stattdessen “Leerzeichen Geviertstrich Leerzeichen” daraus – und das ist extremst hässlich. Leider fand ich keine Möglichkeit, das abzuschalten.

    2. Wenn man z.B. Jahreszahlen in der neuen DIN-Form (JJJJ-MM-TT) schreibt, wurde der erste Bindestrich zu “Leerzeichen Geviertstrich Leerzeichen” konvertiert. Auch hier fand ich keine Lösung, um das zu umgehen.

    Wollte ich nur kurz nachmelden – bevor sich noch jemand über das komische Schriftbild wundert… :-)

    • @NetzBlogr:

      Vielen Dank für deinen Kommentar und deinen Erfahrungsbericht zum Plugin :-) Ja, da das Plugin von englischsprachigen Entwicklern erstellt ist, gibt es im Deutschen sicherlich ein paar Lücken. Diese kann man eventuell aber durch die manuellen Einstellungsmöglichkeiten im Plugin weitgehend vermeiden.

      Als Lösung für falsche Trennung kann man z.B. Wörter in Capital Letter komplett von der Trennung ausschließen (ich habe hier auf dem Blog inzwischen diese Einstellung ausgewählt).

      Der Geviertstrich wird im Englischen als Gedankenstrich verwendet, daher die Umwandlung durch das Plugin. Ich werde aber auch noch einmal schauen, ob ich eine Lösung für die Einstellung finden kann :-)

      Aus meiner Erfahrung ist es für eine deutschsprachige Webseite auf alle Fälle nötig, die Plugin-Einstellungen zu beobachten und falsche Ausgaben nach und nach zu korrigieren (indem man die Ausnahmen in den Plugin-Einstellungen nutzt).

      Viele Grüße,
      Ellen

  6. Hallo Ellen,

    wieder was gelernt. Danke für den hinweis auf das Plugin. Unter dem Artikel hast du einen schönen Autorenhinweis. Ich habe da viel probiert aber noch nicht das richtige Plugin gefunden. Wie heißt das von dir verwendete Plugin.
    Vielen Dank für Deine Mühe im Voraus.

    Viele Grüße
    sendet
    Herbert

  7. Ich habe wp-typography nun seit einem Jahr im Einsatz. Neben der richtigen Verwendung von Anführungszeichen, finde ich die Silbentrennung richtig klasse. LEIDER bringt das ein Problem mit sich: Sämtliche Texte werden vor der Ausgabe mit einem Trennungszeichen versehen. Das sieht man zwar nicht auf dem Bildschirm oder beim Ausdruck, ABER wenn man einen Artikel kopieren möchte, befinden sich in jedem Wort diese Trennungszeichen. Würde ich also “Trennungszeichen” aus dem Artikel meines Blogs kopieren und z.B. in LibreOfficeWriter einfügen (auch bei Einfügen ohne Formatierung das gleiche Spiel), käme “Tren-nungs-zei-chen” heraus. Das macht die Sache nicht attraktiv; gerade wenn man CreativeCommons einsetzt, das Copy&Paste ausdrücklich erlaubt und die Texte durchaus kopiert werden dürfen. Derjenige, der den Artikel kopiert, hat erstmal richtig viel Arbeit, die Trennungszeichen zu löschen. Ein großer Nachteil. Vor ein paar Tagen habe ich diese Option daher deaktiviert und verwende nur noch die Geschichte mit den Anführungszeichen. Da frage ich mich wiederum: Gibt es kein “kleineres” Plugin, das (ausschließlich) die Anführungszeichen richtig parst?

  8. Pingback: Wordpress Update, neue Plugins und andere Sprache | BIKE PUNK

  9. Vielen Dank für die Empfehlung und detailiere Beschreibung dieses Plugins – ich bin begeistert!
    Darf ich Dich noch fragen, wie ich den Flatterrand wegbekomme – sprich: einen Blocksatz erstelle?

    Liebe Grüße,
    Athokawe

  10. hans

    ich nehme an das plugin liest nur die normalen textfelder aus oder? in custom fields (benutzerdefinierte felder) funktioniert das nämlich nicht, oder mache ich was falsch?

  11. Ich bin gerade auf diesen Artikel gestoßen, weil ich die korrekten deutschen Anführungszeichen (bzw. auch französische) bislang immer mühevoll per Hand nachträglich eingefügt habe.

    Jetzt wollte ich das Plugin mal testen, habe allerdings gesehen, dass es zuletzt im Juli 2010 upgedatet wurde. Ist das Plugin bei einigen von Euch noch im Einsatz? Gibt es Kompatibilitätsprobleme mit neuern WordPress-Versionen? Besser die Finger davon lassen?

    Dankeschön!

  12. Eigentlich ein tolles Plugin mit einem sehr umfangreichen und sinnvollen Funktionsumfang. Ich habe es in einem Projekt eingesetzt und jetzt festgestellt, dass es die Ladezeit leider sehr negativ beeinflusst. 3,5 Sekunden nur durch wp-typography (gemessen mit P3 Performance Plugin). Ich persönlich möchte aber vor allem auf die Silbentrennungsfunktion nur sehr ungern verzichten. Kennt vielleicht jemand Alternativen?

  13. Ich habe gerade meine Sites auf WP mit 20/14 umgestellt. Damit gibt es Silbentrennung ohne Plugin – wenn ich das richtig sehe. Allerdings werden die Trennungen in Flatter- bzw. Rauhsatz ziemlich willkürlich vorgenommen. Ich werde mal Einstellungen dazu suchen, um die Funktion in den Griff zu bekommen. (Bin übrigens gelernter Schriftsetzer (Bleisatz) und praktizierender Typograf.)

Schreibe eine Antwort