Fabelhafte Texte wollen herausragend präsentiert werden.
Das Ziel ist einerseits Lesbarkeit, ein Text soll rasch und bekömmlich aufgenommen werden können. Andererseits, und das ist für spannendes, erfolgreiches Bloggen mindesten genauso wichtig, soll ein Text auffallen, schön sein, anziehen, interessant wirken.
Dazu kann man Bilder einsetzen, aber das hat Grenzen. Am Ende zählt doch immer der Text.
Was möglich ist, hängt von deinem Blogsystem oder CMS ab. Oder deinen Kenntnissen in Sachen CSS. Hier geht es um Schrift und Gestaltung. Im Blog. In Publikationen.
Willkommen im Reich der Typographie.
Etwas Ruhe wirkt Wunder
Auffällige Schriftauszeichnungen bringen oft nicht den gewünschten Effekt. Denn zu viel davon ist eitler Firlefanz und Hampelei.
Dein Teaser wird nicht besser, wenn du ihn in Einzelsätze filetierst, aufdringlich Fettschrift draufschüttest. Und das Ganze noch mit etwas kursiv oder g e s p e r r t oder VERSALIEN oder mit [icon id=“dot-circle-o“] Icons oder – schlimmer noch – Farben garnierst. Das ist laut. Das ist Rüpeltext. Nur schlafmützige Leser freuen sich über einen Gong.
Jetzt mal ehrlich, man kann das machen, die Leute gucken vielleicht auch hin. Wirklich etwas helfen kann es aber nicht. Eher entlarvt man sich als jemand, der es nötig hat laut, grell und auch sonst irgendwie aufdringlich zu sein. Der Anreißer allein reicht nicht, jetzt muss man auch noch mit Geschmacksverstärkern kommen … Es ginge sogar noch heftiger, ich denke an Animationen. Die sind in Reichweite. Heutzutage braucht man dafür kein Flash mehr. Aber lassen wir sie besser in der Kiste …
Es gilt Web ≠ Print ≠ Einsatz in Grafiken oder PDF. Für eBooks gelten noch einmal andere Regeln, dort sind die Möglichkeiten der Darstellung stark eingeschränkt.
Wo es um Feinheiten geht, sieht möglicherweise jeder Besucher etwas anderes. Schuld sind die Browser und individuelle Einstellungen. Rechne also damit, das nicht überall alles gleich aussieht. Das war im Web schon immer so. Und auch wenn sich vieles verändert hat, gilt das Prinzip noch heute. Man muss sich darüber nicht grämen.
Tipp #1 ¦ Am Anfang sei schlank
Einem gelungenen Anfang kommt Bedeutung zu. Hier entscheidet sich, ob ein Besucher weiterlesen wird. Man kann ihm entgegenkommen, indem man die Zahl der Wörter eingangs reduziert. Das bewerkstelligst du mit einem Trick. Indem du eine Grafik am rechten Rand platzierst. Allerdings beißt es sich mit einem eventuell vorhandenem Bilder im Großformat, so wie ich es hier einsetze. Die Schmalversion ist auch mit CSS zu erreichen oder – wenn es passt – mit Zeilenumbrüchen.
Eine andere Methode besteht darin, den ersten Absatz eines Textes größer zu setzen. Das lässt sich mittels Stylesheet automatisieren (first child). Das klappt allerdings nicht, wenn dein erster Absatz aus einem Bild besteht. Vermeide dicke und lange Textblöcke am Anfang. Die schrecken ab.
Du könnest auch versuchen den ersten Absatz kursiv oder sogar in einer anderen Schriftart zu setzen. Hier wird es trickreich, man sollte wissen, was man da tut. Wenn es klappt, sorgt man für zusätzliche Aufmerksamkeit. Genau das, was man sich für einen Textanfang wünscht.
Tipp #2 ¦ Drücke Selbstbewusstsein durch Schriftgröße aus — auch wenn du noch keines hast!
Wer Schriften im Miniaturformat verwendet, macht sich selbst klein. Und quält sein Publikum. Ja, es gibt Zoom und Bildschirmlupe, aber ich würde von diesem Seniorenzitterzeug lieber die Finger lassen. Komme deinen Lesern entgegen, mach es angenehm für sie.
Verstecke dich und deinen Text nicht vor den Lesern. Zeige Selbstsicherheit und lasse deine Textgröße das widerspiegeln. Es gibt keinen Grund, Platz zu sparen, du hast jede Menge davon zur Verfügung. Auch die Angst vor dem Scrollen gibt es nicht. Wischen ist das neue Scrollen.
Und wenn du dich wirklich klein fühlst, dann solltest du erst recht so handeln. Groß zu schreiben tut gut. Probiere es einfach aus. Zeig dich.
Tipp #3 ¦ Schreibe nie völlig schwarz
Ein alter Trick der Typografen. Färbe deinen Fließtext nicht schwarz, sondern verwende ein fast schwarzes Grau. Ein Fastschwarz (#050505, #131313 oder heller). Überschriften und Links dagegen bleiben weiterhin Sattschwarz (#000000).
Fettschrift und Links werden umso besser zur Geltung kommen — sie leuchten quasi heraus, auch wenn der Effekt nur einen Hauch ausmacht. Färbe den Text aber keinesfalls erkennbar grau, ein solcher Text wäre schwer zu lesen.
Tipp #4 ¦ Lasse deinen Inhalten Platz zum Atmen
Das Wichtigste ist das, was man nicht sieht. Oder besser das, was nicht ist. Der Whitespace. Der Weißraum, der nicht notgedrungen weiß sein muss. Gemeint ist der freie, ungenutzte Raum. Er ist der Hintergrund, auf dem ein Inhalt erst wirken kann. Sterne leuchten, weil der Himmel schwarz ist.
Dieser Raum ist grundlegend und wichtig. Gutes Design misst deshalb dem Whitespace erhebliche Bedeutung zu. Denn Objekte kommen nur zur Geltung, wenn man ihnen Platz einräumt. Für den Text gilt das sowieso.
Lasse deine Texte atmen. Nutze Absätze — auch wenn man es damit nicht übertreiben muss. Hier und da ist es Mode geworden beinahe nach jedem Satz einen Absatz zu erzwingen. Der Text zerfällt dann wie ein zu lange gekochter Fisch. So vorzugehen ist übertrieben und unterschätzt die Aufnahmefähigkeiten des Lesers.
Sorge auch für einen ausreichenden Abstand zu Bildern und Videos, zur Sidebar und zu den Überschriften.
Tipp #5 ¦ Schreibe im Blocksatz
Blocksatz kommt von Holzblock und sieht in Büchern toll aus. Aber das ist im Web nicht immer so. Der Grund ist auch hier, dass der Leser selbst Einstellungen vornehmen kann, die dann die sorgfältig ausgeklügelte Ordnung kaputtmachen. Du brauchst Silbentrennung, damit dein Text eine Chance hat, gut auszusehen. Blocksatz ist gut, wenn man es richtig macht.
Man darf Blocksatz verwenden, gerät aber doch immer wieder in Kalamitäten. Unversehens tun sich Lücken und esoterische Muster im Text auf oder stören nach rechts verschobenen Einzelwörter oder in der virtuellen Luft hängende Absätze.
Das Problem wird noch mal größer, wenn man an Smartphones denkt, ältere Geräte haben halt kleine Bildschirme. Gerade hier kann der Nutzer versucht sein, die Schrift heraus zu zoomen mit all den hässlichen Effekten, die der Blocksatz mit sich bringt.
Blocksatz lässt sich über den Editor von WordPress in ein Einzelposting einfügen oder passengenweise nutzen. Das ist aber rechtunpraktisch. Außerdem fehlt die Silbentrennung. Und die ist wichtig.
Manuell in den Quelltext geschrieben, sieht das so aus:
<p style="text-align: justify;">Textblock</p>
Blocksatz klappt nur mit guter Silbentrennung und festgelegter Schriftgröße. Über beides haben wir im Web nicht die volle Kontrolle. Man kann nicht so genau arbeiten, wie man es müsste, um zu einem exzellenten Ergebnis zu gelangen. Die verschiedenen Browser und ihre individuellen Interpretationen machen einem einen Strich durch das Vorhaben.
Silbentrennung muss erst eingestellt werden, sofern dein Theme das nicht schon von sich aus getan hat. Blocksatz kann besser aussehen als der übliche linksbündige Flattersatz. Wenn man es richtig macht.
So stellst du Blocksatz ein:
P {text-align : justify;}
So stellst du die automatische Silbentrennung ein:
P {hyphens: auto;}
Für ältere Browser gibt es Extraanweisungen, die man zur Sicherheit hinzufügen kann. Die Sache sieht dann so aus:
P {hyphens: auto;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto; }
Wo müssen diese Angaben stehen? Wenn du dich mit CSS nicht auskennst, kannst du es trotzdem wagen. Dein WordPress sollte dir unter „Design“ -> „Editor“ die Datei style.css (Stylesheet) zur Bearbeitung anbieten. Kopiere die oben stehenden Codes hinein. Und zwar an das Ende der Datei. Wenn das nicht wirkt (berücksichtige den Cache und lade deine Seiten neu), kannst du es erzwingen. Der einzufügende Code sieht dann so aus:
P {text-align : justify!Important;}
P {hyphens: auto!Important;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto; }
Willst du es genau wissen? Dann lege ich dir diesen Artikel an dein bloggerisches Herz: Strichlein Strichlein ganz an Rand: Silbentrennung in Webseiten. Für Systeme abseits von WordPress gelten grundsätzlich dieselben Überlegungen.
Tipp #6 ¦ Ziele auf eine optimale Zeilenlänge
Um die 66 Zeichen gelten als optimale Länge einer Zeile. Halte dich in einem Bereich von 45 bis 75 Zeichen (mit Leerzeichen) auf und alles wird gut. Ansonsten fällt das Lesen zunehmend schwerer. Der Besucher verliert Zeilen und muss immerzu den Faden wiederfinden. Dabei fühlt er unwohl und bricht den Lesevorgang ab.
Tipps #7 ¦ Lasse Webfonts deine Seiten beleben
Google hat vor einigen Jahren durch die Einführung der Webfonts eine kleine Revolution ausgelöst. Davon musste man mit Systemschriften auskommen oder sich umständlich mit Hacks und Tricks behelfen. Inzwischen gehören schicke, lesbare, attraktive Fonts auf jede Website, die etwas von sich hält. Neben Google gibt es weitere, aber kostenpflichtige Anbieter wie Adobe Typekit. Man kann beliebige Schriften aber auch selbst hosten, sofern die Lizenzen das zulassen.
Was wählen?
Grundsätzlich gelten verschiedene Erwägungen für Überschriften und Body-Text. Letzterer muss vor allem gut lesbar sein. Originelle Zier- und Schreibschriften scheiden da schon einmal aus. Umlaute müssen vorhanden sein, was nicht immer eine Selbstverständlichkeit ist.
Hier ist eine schöne Übersicht mit 30 Fonts. Jeden davon kannst du als Bodyfont (Brotschrift) einsetzen. Über das Thema habe ich mich in einem früheren Artikel schon ausführlich eingelassen: So findest du die schönsten Google Fonts und Kombinationen.
Wenn dein Theme eine entsprechende Option nicht im Gepäck hat, kannst du mit Hilfe eines Plugins auf bewährte Art nachrüsten. Zum Beispiel mit Easy Google Fonts. Oder du hast Zugriff auf das Stylesheet und ziehst es manuell durch.
Nutze nie mehr als zwei Webfonts auf einer Seite, es sei denn in Grafiken. Oder wenn es sich um ein künstlerisches Projekt handelt. Dann ist eh alles erlaubt. Ansonsten: Finger davon lassen. Es wirkt meist nicht so, wie du denkst.
Tipp #8 ¦ Demonstriere Stil mit typografischen Zeichen
Das, was die Standardtastatur hergibt, ist nicht alles, was eine Schrift zu bieten hat. Es gibt unterschiedliche Leerzeichen, Gedanken- und Trennstriche, Anführungs- und Sonderzeichen.
Setze davon etwas ein, um Stil und Geschmack zu demonstrieren und den Text interessanter, reifer und durchdachter erscheinen zu lassen.
Nutze die Sonderzeichen, die WordPress dir anbietet. Ein Klick auf das Omega Symbol im Editor genügt und du siehst diese Tabelle erscheinen:
Nicht beeindruckt‘? Dann guck mal näher hin. All das kannst du direkt und ohne weitere Hilfsmittel in deinem Posting einsetzen. Mache Gebrauch davon. So:
÷ ∞ ∇ ∴ → … ‹ › « »- – ¯
Die Einfügefunktion benötigst du nicht immer. Du kannst schönere Gedankenstriche in deinen Text betten, indem du zweimal hintereinander das Minuszeichen tippst. Es wird dann dem Leser als langer Gedankenstrich angezeigt. Auch Anführungszeichen wandelt WordPress selbsttätig um.
Und wenn das noch nicht genug ist, vielleicht versuchst du es mit einem prachtvollen Iconfont in deinem Blog – oder nutzt ein Emoji. Mehr Möglichkeit geht nicht.
Übrigens: Die Zeichen funktionieren auch in Titeln und Überschriften
Es gibt mit WP-Typography ein WordPress Plugin, das viele Aufgaben automatisch für dich erledigt und für schöneren Text sorgt. Doch unter Umständen kann es Ressourcen verbraucht, die du an anderer Stelle brauchst.
Tipp #9 ¦ Setze auf Tradition mit dem Initial
Das Initial ist eine Idee aus längst vergangenen Zeiten. Es wurde schon in den handgeschriebenen Kodices vor der Erfindung des Buchdrucks verwendet. Tja, auch in unserer digitalen Welt kann man den ersten Buchstaben eines Artikels verzieren und macht damit im Blog eine gute Figur. Da das nur wenige Blogger tun, fällt man mit einem Initial, das gern farbig sein darf, gehörig auf. Mittels CSS wäre sogar Verlauffarben und Schatten möglich. Nur die echte Vergoldung bleibt uralten Vorbildern in den Holzmedien vorbehalten.
Es gibt auch hier ein WordPress Plugin, es heißt Simple Drop Cap.
Tipp #10 ¦ Fett, fetter, superfettt!
Schon gewusst? Es gibt mehrere Fettschriften. Auch auf diese Weise kannst du deinen Text interessanter machen. Zumal sich Fettschrift am Bildschirm besser lesen lässt als kursiv. Welche Dicken zum Einsatz kommen können, hängt vom ausgewählten Font ab, er muss in mehreren Varianten vorliegen, beziehungsweise zuvor geladen werden.
Beim zweitbeliebtesten Googlefont Roboto sind es beispielsweise sechs Schriftschnitte (+ 6 kursive) die man einbinden und verwenden kann. Gesteuert wird das dann über CSS (font-weight : 300 bis font-weight : 900). Man kann diese Stile auch mischen.
Verzichte auf eine übertriebene Aufspaltung deines Bodytextes
Kennst du das? Tolles Thema, kluger Blogger, aber er betont ohne Ende. Nach jedem Satz oder zumindest nach jeder zweiten Zeile wird nicht nur ein Absatz gemacht, sondern eine Leerzeile eingefügt. Der Text zerfällt in gleichförmige Miniaturabsätze. Was treibt eigentlich Blogger dazu ihre Texte in Miniportionen aufzuspalten, Kleckerweise zu texten, in Etappen aufzubereiten?
Jeder Satz soll etwas besonderes sein. Deshalb wird er für sich präsentiert. Angeblich soll das sogar lesefreundlich sein. Ist es aber nicht. Es fehlen Rhythmus und Struktur. Sind alle Zeilen optisch nahezu gleich lang, findet sich der Leser kaum noch zurecht. Das funktioniert nur, wenn man andere strukturierende Elemente häufiger einsetzt. Zwischenüberschriften wären es gutes Mittel. Aber auch die müssen unterschiedlich lang sein.
Ein Text ist kein Kaminholz, das in Scheite aufgespalten werden muss. Also benimm dich nicht wie die Axt im Walde und gönne deinen Blogtexte Zusammenhalt und Wirkung. Niemand will bildschirmfüllende festgebackene Textblöcke. Ein wenig mehr als Häppchen darf man uns Lesern aber schon zumuten.
Leerzeilen an sich sind nichts Böses. Es ist gut, sie einzusetzen. Auch mal nach nur einem Satz. Sogar nach einem Wort. Das kann Wirkung haben. Aber es braucht Abwechslung. Verwende die Stilmittel und Textauszeichnungen, die ich dir oben gezeigt habe. Vermeide es, einen längeren Text in annähernd gleichgroße Stücke zu zerhacken. Ansonsten wird niemand deinen Text bis ans Ende lesen wollen.
War das jetzt schon alles? Natürlich nicht …
Fett, kursiv, unterstrichen? Ist das alles? Geht da nicht mehr? Doch. Es gibt Schriftauszeichnungen, die selten verwendet werden und deshalb besonders wirken. Sie sind mehr oder weniger ungebräuchlich. Früher konnten die meisten Browser sie nicht darstellen. Doch das hat sich geändert.
Du kannst einiges versuchen. Beispielsweise kannst du Schatteneffekte verwenden, Wörter doppelt unterstreichen, Einzüge verwenden und allerlei mehr. Zu weit möchte ich hier nicht ausholen. Hier geht es um CSS. Siehe auch die Grafik am Anfang.
Wenn du nach Anregungen suchst, schau mal auf das englischsprachige Blog von Dustin W. Stout. Der Mann greift von jeher supertief in die Typotrickkiste. Ich finde es insgesamt zwar übertrieben, doch für Ideen sind Dustins Seiten immer gut. Er hat viele tolle Lösungen.
Was ich hier vorgestellt habe, ist nur der Anfang. Mit jQuery (Javascript) und modernem CSS (Stichwort OpenType Font Features) lässt sich noch so viel mehr machen. Dann allerdings begeben wir in die Gefilde der Webentwicklung.
Weitere Beispiele mitsamt CSS-Schnipseln findetst du hier 20 Examples of Beautiful CSS Typography Design.
Schreibe einen Kommentar