Für mein neues Blog-Design verwende ich die Schriften Merriweather und News Cycle. Beide gehören zu den Google Web Fonts und stehen unter Open Source-Lizenzen.
Der wichtigste optische Faktor für die Wirkung eines geschriebenen Textes ist die Typographie. Als Nicht-Fachmann ist man allerdings mit der typographischen Gestaltung überfordert. Ich wollte trotzdem nicht einfach die Schriften eines Themas übernehmen. Ich hoffe, dass ich zu einer brauchbaren Lösung gefunden habe und freue mich über Hinweise und Kritik.
In den letzten Jahren hat in der Web-Typographie eine Revolution begonnen. Zuvor konnte man nur mit den Systemschriften der PCs arbeiten, wenn der Text für alle Nutzer lesbar sein sollte. Inzwischen ist es ohne Problem möglich, Schriften zum Herunterladen anzubieten, so dass sich jede beliebige Schrift verwenden lässt, wenn sie nur überhaupt in einem webfähigen Format vorliegt. Außerdem hosten Anbieter wie Typekit oder Google mit den Google Web Fonts Schriften in der Cloud und sorgen dafür, dass sie je nach Browser richtig geladen werden. Diese Anbieter kümmern sich auch um die Lizenzierung der Schriften; die Google Fonts sind Open Source, während Typekit (das inzwischen Adobe gehört) viele kommerzielle Fonts für verhältnismäßig geringe Lizenzgebühren anbietet.
Damit kann die Webtypographie auf die gesamte, jahrhundertalte typographische Tradition und ihre Ergebnisse zurückgreifen. Andererseits spielen im Web und auf Bildschirmen neue Gesichtspunkte eine Rolle, die wir gerade erst entdecken. Die neuen Bildschirme wie das Retina-Display von Apple haben zum Beispiel eine höhere Auflösung als die meisten Printprodukte. Eine Schrift, die auf einem solchen Display eine ähnliche Gesamtwirkung haben soll wie auf einem herkömmlichen Computer-Bildschirm, muss für die hohe Auflösung angepasst werden—ähnlich wie früher Schriften für unterschiedliche Größen extra geschnitten wurden, weil einfach vergrößerte oder verkleinerte Typen oft deutlich anders auf den Leser wirken als das Ausgangsformat. Die Information Architects haben deshalb vorgeschlagen reponsive Schriften zu entwickeln, also Schriften, die auf die unterschiedlichen Bildschirme Rücksicht nehmen.
Beim Auswählen der Schriften für dieses Blog waren für mich drei Gesichtspunkte wichtig:
- Die Schriften müssen gut lesbar sein.
- Sie müssen auf unterschiedlichen Bildschirmen (Handy, Tablets, Computer) gut und möglichst gleich wirken.
- Sie müssen zum Charakter (Branding) meines Blogs passen, also einerseits zum Interesse an neuen Webentwicklungen und andererseits zu meinem eher bildungsbürgerlichen Approach und der Thematik der Schriftlichkeit.
Durch einfaches Googeln nach empfehlenswerten Schriften bin ich auf die Merriweather gestoßen, die mir gleich gefallen hat: Sie ist einerseits schlicht, und andererseits orientiert sie sich an Schriften, die für in der frühen Neuzeit für humanistische Literatur entwickelt wurden. Der Designer Eben Sorkin beschreibt in einem Blogpost, warum und wie er die Merriweather macht. Für die Lesbarkeit am Bildschirm ist die große x-height (x-Höhe oder Mittellänge) wichtig, die die Merriweather von ihren humanistischen Vorbildern unterscheidet. Für die Lesbarkeit auf dem Bildschirm ist auch wichtig, dass die Strichdicken relativ gleich bleiben. Für meinen Geschmack wirkt die Merriweather auf mobilen Bildschirmen noch besser als auf einem herkömmlichen Computer, und in Zukunft wird sicher vor allem auf Tablets und Handys gelesen werden. Die Merriweather ist als Google Font erhältlich und lässt sich leicht in eine Seite einbinden. Sympathisch ist mir auch, dass es sich um eine Open Source-Schrift handelt. Eben Sorkin hat die Entwicklung noch nicht abgeschlossen und diskutiert sie öffentlich.
Ich habe erst versucht, mit der Merriweather allein auszukommen, sie also nicht nur für den Lauftext, sondern auch als Auszeichnungsschrift zu verwenden. Die Wirkung des Texts war mir dabei aber zu statisch und altväterlich. Auf eine für meinen Geschmack zur Merriweather passende serifenlose Schrift hat mich dieses Blogpost gebracht, in dem Brian Gartner die Kombination der Merriweather als Auszeichnungsschrift mit der News Cycle als Grundschrift vorstellt. Mir gefällt die umgekehrte Kombination auch. Beide Schriften korrespondieren durch die ähnliche x-height und im Gesamtcharakter gut miteinander und wirken im Kontrast lebendig. (Auf die ähnliche x-height als Auswahlkriterium bin ich durch das Post How to Actually Make Text Look Interesting von Kurt Edelbrock aufmerksam geworden, das leider nicht mehr unter seiner ursprünglichen Adresse zu finden ist.) Auch die News Cycle gibt es als Google Web Font.
Noch nicht fertig bin ich mit der Bestimmung der Schriftgrößen. Ich möchte mit einer modularen Skala arbeiten, beherrsche das aber noch nicht. Im Augenblick verwende ich eher willkürlich ausprobierte Schriftgrößen. (Ich benutze für das Design des Blogs das Reverie-Framework, das auf dem Foundation-Framework beruht; dazu mehr in weiteren Posts!)
Ich habe bei der Gestaltung des Blogs ein paar Vorbilder, und es ist mir durchaus klar, dass ich sie noch lange nicht erreiche. Musterhaft finde ich in der Reduktion und der Konzentration auf Lesbarkeit das neue Layout von Jeffrey Zeldmans Daily Report und die erwähnten Information Architects. Direkt zu stehlen versuche ich bei diesem Post von Ev Williams für Medium—und merke dabei, wieviel Aufwand hinter der scheinbaren Einfachheit steckt.
Kleider machen Leute, Schriften machen Blogs. RT @heinz Schriften für meinen Blog-Relaunch – Lost and Found http://t.co/4F8bUlP4
I <3 Webfonts. Verwendet Typekit auf meinen Sites.
Bei der Schriftgröße kannst ein wenig zurückdrehen, kommt mir vor. Schau dir auch mal die „Droid-Family“ an. Die ist für Screen optimiert. Die (bei mir angezeigte) Courier im Formularfeld ist wohl ein Bug, oder?
PS: Hab die neue URL schon subscribed 🙂
Danke! Ich bin noch nicht fertig mit dem neuen Blog … Bei den Kommentaren wollte ich eigentlich die Social Media-Integration von Jetpack nutzen. Dazu muss ich aber das Thema noch verändern. Deshalb sind sie jetzt undesignt.
Great post, I admire the writing style 🙂 A little off topic here but what theme are you using? Looks pretty cool.
I use Reverie, which is based on Foundation. But I’m tweaking it and I’m by far not yet done …