Skip to content

Schrift bleibt bei Google und OpenSans

Ich hatte vor einiger Zeit die Schrift hier im Blog von schnödem Arial auf die etwas schönere OpenSans geändert. Arial ist meiner Meinung nach gerade in kleinen Größen auf Bildschirmen gut lesbar. Allerdings ärgere ich mich jedesmal über den fehlenden echten Kursivschnitt.

Deshalb habe ich ganz bequem hier im Serendipty-Blog beim Theme 2k11 von Matthias Mees auf die Option »Webfont OpenSans einbinden« geklickt. Die wird bei Google gehostet. Über Pro und Contra wurden ganze Kataloge verfasst und Glaubenskriege ausgefochten.

Matthias hat dazu den Artikel »Selbst gehostete Webfonts in Serendipity« verfasst. Wollte ich schon immer mal ausprobieren. Heute gemacht, gleich noch die preiswerte Schrift Calendas Plus erworben und eingebaut.

Ergebnis: es bleibt bei OpenSans von Google.

  • Weil die Calendas Plus in meinen Augen eine gewisse Schriftgröße braucht, die bei meinem Bloglayout nicht passt.
  • Weil die Ladedauer einfach zu lang ist – ruft man das Blog auf, sieht man einen Augenblick keinen Text.
  • Weil ich zwar Ligaturen mag (man achte in Matthias' Artikel auf die schönen s-t-Verbindungen, aber gerade keinen Nerv habe, mich zum Thema einzulesen, wie ich das hier eingebaut bekäme.
  • Und weil Arial, die Default-Schrift von 2k11, auf meinem Linuxrechner mit Firefox grottenschlecht aussieht.

Nunja, immerhin habe ich mir damit experimentell bewiesen, dass die aktuelle Lösung gar nicht übel ist. QED ;-)

Andere Blogschrift

Vorweg: Ich bin kein Freund der über Google eingebundenen Schriften. Die Bequemlichkeit erkauft man mit Daten, die von Google gesammelt werden.

Weil die Default-Schrift »Arial« des verwendeten Themes 2k11 mangels Kursive und überhaupt ;-) keine Lösung darstellt, hatte ich seit einiger Zeit »PT Sans« als Schrift im Blog in Gebrauch.

Weil mir die auf dem Smartphone ein wenig zu dünn aussieht (und ich unterwegs keine Lesebrille mitschleppe), habe ich jetzt testweise auf Open Sans umgestellt. Auch über Google eingebunden.

Wenn ich zu viel Zeit habe, werde ich das 2k11-Theme hier im Blog so abändern, dass ich einen guten selbst gehosteten Zeichensatz einbaue. Aktuell gefällt mir die Schrift im Smashing Magazine.

Schriftmuster

Arial


Muster Arial

PT Sans


Muster PT Sans

Open Sans


Muster Open Sans

Schriftwechsel

Die Beispiele in diesem Beitrag funktionieren nur im Blog, nicht im Feedreader

Bisher hatte ich im Blog die vom Template 2k11 gesetzten Schriftarten: Helvetica / Arial / sans-serif. Für die Nicht-Webdesigner: ist auf dem Rechner die Schrift Helvetica vorhanden, wird die benutzt, wenn nicht dann Arial, wenn es die auch nicht gibt, eine serifenlose Schrift.

Was Serifen sind? Die kleinen ähm, Dingelchen an den Buchstaben. Das kann ich besser zeigen als erklären:

Ich bin ein Text in Serifenschrift

Ich bin ein Text in serifenloser Schrift. Auf französisch »sans serif«

Wo war ich? Also im Endeffekt dürften die meisten Leser mein Blog in Arial zu Gesicht bekommen haben. Die wird oft als langweilig geschmäht. Außerdem hat sie keinen Kursivschnitt. Was das schon wieder ist? Auch hier Beispiele:

Bla blub gurgel normal

Bla blub gurgel kursiv

Bla blub gurgel normal in Arial

Bla blub gurgel kursiv in Arial

Bei Arial werden die Buchstaben bei der Einstellung kursiv einfach nur, hm, sagen wir schräg oder schief angezeigt. Während bei guten Schriften dafür eigene Formen zum Einsatz kommen. Am besten sieht man das am Buchstaben a.

Die aktuelle Schrift hier im Blog ist gerade PT Sans, die ich im Blog von Isabel Bogdan entdeckt habe (via Mokita bzw. dort dann über Die letzte Drachentöterin, die ich mir auch anschaffen möchte – Danke, Fabian!).

Die Schrift ist über Google Fonts eingebunden (Achtung Achse des Bösen!). Führt zu geringfügig längeren Ladezeiten, sieht aber interessanter als Arial aus. Und kann man beim Template 2k11 per Mausklick einbinden (Alternativ ginge es auch, die Fonts auf meinen Webserver zu speichern und von dort zu laden).

Ich bin mir nur nicht sicher, ob sie auch wirklich angenehmer zu lesen ist. Denn man kann über Arial sagen was man will: auf kleinen Bildschirmen finde ich sie gut lesbar.

Machen wir doch einen Textvergleich:

Blindtext in PT Sans (zumindest am 3. Mai 2016)

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen.

Blindtext in Arial bzw. sans-serif

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen.

Graublau Web

Vorher: ASAP

screen shot
Überschriften in ASAP Italic
Seit einiger Zeit habe ich hier im Blog für die Überschriften die Schriftart »ASAP« im Schnitt Italic verwendet. Meiner Meinung nach leicht und elegant. Andererseits sollten Überschriften eher kräftig sein als verspielt. Auf meinem Laptop sahen die Blog-Überschriften immer etwas seltsam aus. Deshalb gibt es wieder einmal etwas neues.

Nachher: Graublau Web

Screen Shot Blog mit Graublau Web
Blog mit "Graublau Web"
»Graublau Web« ist die neue Schrift für die Headlines, die Überschriften in der Sidebar und auch für die Tag-Cloud. Dort gefällt mir die fette Unterstreichung nicht so recht. Hm. Die »ASAP« ist in der Navigation oben erhalten geblieben.

»ASAP« ist kostenlos im Web nutzbar, Bezug z. B. über Fontsquirrel. Die exzellent ausgebaute »Graublau Web« ist für die Webnutzung kostenlos, für Print ist eine Lizenz erforderlich. Erhältlich bei fonts.info.

#webtypobuch von Gerrit van Aaken

Cover #webtypobuch
#webtypobuch
Wer sich mit Webdesign beschäftigt, landet früher oder später auf Gerrit van Aakens Weblog praegnanz. Bekannt sind seine Mini-Porträts von freien Schriften. Veteranen der Piratenpartei erinnern sich vielleicht daran, dass Gerrit das Programm der Piratenpartei zur Bundestagswahl 2009 gestalterisch überarbeitet hatte. Als Nicht-Mitglied. Einfach so, weil ihm die Ur-Version zu hässlich war.

Sein über die Jahre gesammeltes Wissen hat Gerrit jetzt in ein Buch gepackt. Behandelt werden Themen wie Lesen am Bildschirm, Schriftwahl, Zeichengröße und Zeilenabstand, korrekte Nutzung von Sonderzeichen, websichere Schriften und Webfonts.

Das »#webtypobuch« steht unter der Lizenz CC BY-NC-SA 3.0 DE. Dementsprechend kann man die HTML-Version kostenlos lesen. Wer Gerrits Arbeit honorieren möchte, kann das Werk in verschiedenen E-Book-Formaten (z. B. EPUB, MOBI, PDF) kaufen. Natürlich ohne DRM (Digitale Rechteverwaltung). Für Fans von Totholz kann man sich ein »richtiges« Buch bei 1buch.de bestellen, das im Vergleich zum E-Book allerdings teuer ist.

Gerrit van Aaken, »#webtypobuch« 146 Seiten, HTML-Version kostenlos, E-Book 9,98 Euro, gedruckt 32,42 Euro.

Dieser Artikel ist auch bei der Flaschenpost erschienen.

Die Füllhalterversion

Füllhalterversion Nachdem ich entdeckt hatte, daß mein Bloglayout verblüffend den Fahrkartenautomaten der Bahn ähnelt, musste etwas anderes her.

Ein schöner Header in »Scriptina« oder einer englischen Schreibschrift. »Libelle« hat mir gut gefallen. Nur wollte ich keine 75,- EUR dafür zahlen.

Schließlich dachte ich: vergiß all die sterilen Schriften und schreib den Header selbst.

Gesagt, getan.

Alt: Screen Shot

Neu: screen shot

Was sich geändert hat? Der Header ist handgeschrieben, die Lila-Links wurden durch Tintenblau ersetzt, die runden Ecken der Boxen wurden begradigt und Schatten gibt es auch keine mehr. Ich gebe zu, dass das nur Kleinigkeiten sind. Eigentlich sollte sich noch mehr tun; nur habe ich in der Zwischenzeit ein anderes Blogsystem gesehen, das ich vielleicht ausprobiere. Mal sehen.