Skip to content

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.

Freie Schrift: Vollkorn

Die meisten Schriftenjäger- und Sammler suchen nach spektakulärem Zeug, das sich nur für Überschriften eignet. Für die ist »Vollkorn« von Friedrich Althausen nicht interessant. Wer aber auf der Suche nach einer robusten Brotschrift¹ ist, wird die »Vollkorn« lieben.

Schriftmuster Vollkorn Mittlerweile gibt es sie in den Schnitten Regular, Italic, Bold und Bold-Italic. Enthalten sind alle Sonderzeichen, die man für Deutsch, Englisch, Französisch, Spanisch, Italienisch und für skandinavische Sprachen braucht (Steffen?)

Friedrich Althausen ist so großzügig, diese wunderbare Schrift zu verschenken. Ein Schuft, wer da nicht wenigstens eine kleine Spende gibt.

»Vollkorn« ist auch im Google Font Directory enthalten; allen Datenschutzbedenken zum Trotz habe ich probeweise für das Schwesterblog »Im Kino gesehen« für die Überschriften »Yanone Kaffeesatz« und für die Beiträge »Vollkorn« eingebunden.

Nachtrag: Weil die Einbindung über Google Font speziell bei langsamen Internetverbindungen nervt, habe ich das wieder 'rausgeschmissen.

¹ Brotschrift nannten die Schriftsetzer die für Fließtexte benutzten Schriften, also buchstäblich die, mit denen sie ihr Brot verdienten.