[...] (Website) schließlich kam aus Deutschland und bestand aus eng gesetzten Zeilen, die auf zwölf Seiten ein Phänomen behandelten, [...] Der Text wies einen bemerkenswerten Mangel an Absätzen auf und war eindeutig für Leute geschrieben, deren Vorstellung von Ekstase eine mit Formeln vollgekritzelte Schiefertafel war.

Hat der Autor, speziell bei deutschen Angeboten, etwa entsprechende Erfahrungen gemacht? Wir werden es nie erfahren. Aber trotzdem noch einmal der Hinweis auf zwei Artikel, hier aus dem Webzeugkoffer: Typografie ist das halbe Webdesign und Mehr Lesbarkeit im Web – Einfach.

Comic Sans, die bereits relativ flächendeckend verwendbar ist, wird dann ihre Verwandten und neuen Freunde rufen. Sie werden das Web mit einer Welle weiterer typografischer Schwerverbrechen erschüttern.

Bei aller Euphorie, die sich 2009 breit gemacht hat, sollte man eines nicht vergessen: Typografie ist das halbe Webdesign und mehr als die Wahl einer (passenden) Schriftart.

Wie man sich auf den Wechsel langsam aber sicher vorbereiten kann, hat Mark Boulton kurz vor Weihnachten beschrieben: Designing For The Switch.

Typography is the backbone of good web designBrian Hoff

Aber oft endet Webdesign bereits kurz nach dem Header. Dabei kann man in keinem Bereich des Webdesigns mit wenig Mitteln (ein paar Zeilen CSS)  schon sehr viel erreichen.

Macht eine Website auf den ersten Blick noch einen guten Eindruck, kann dieser bei genauerem Hinsehen schnell dahin sein. Fehlende Abstände (margin) und Polster (padding), niedrige Zeilenhöhen (line-height) und mikroskopisch kleine Schrift sind nur ein paar Symptome der Typoritis.

Grundvoraussetzung: Lesbarkeit

Auch im Web geht es v.a. um Information in Textform. Neben einem gut strukturierten und ansprechenden Webdesign, steht außerdem die Lesbarkeit mit an oberster Stelle. Gefolgt von Design und Eleganz des Schriftbildes. Was nützt ein Feuerwerk an Transparenzen und Schattierungen, wenn die Besucher nichts lesen können oder wollen?

Oft wird auch explizit eine möglichst kleine Schriftgröße gefordert. „Weil’s einfach besser aussieht.“ Das mag sein – auf den ersten Blick. Dann wenn ich mir eine Website als Bild betrachte. Was sie aber nicht ist. Davon abgesehen, kann auch große Schrift, wenn sie geschickt in Szene gesetzt wird, ihren Reiz haben. Dann sieht’s nicht nur gut aus, sondern es ist auch gut lesbar.

Keiner muss Experte in Sachen Typografie sein. Aber wenn man sich die Mühe macht, die wichtigen Grundregeln zu beherzigen, hat man schon viel erreicht. Darüber hinaus kann man dann seine Leser auch durch gelungene typografische Gestaltung begeistern.

Grundlagen

• The Elements of Typographic Style Applied to the Web (Klassiker)
• Typefacts
• Korrekte Typografie für’s Web mit HTML
• Typographie im Web
• A guide to Web typography
• Typography
• typographie web (französisch)

Lesbarkeit, Design & Eleganz

• Typography is the backbone of good web design
• Make Your Texts More Readable
• The 100% Easy-2-Read Standard
• 20 Do’s and Don’ts of Effective Web Typography
• Elegant Web Typography (Slideshare Präsentation)
• Dan Rubin on Web Typography (Interview)

Ressourcen & Tools

• Web Font Specimen
• Typedia
• Typography tips from 7 top designers
• Typetester
• Typechart
• CSS Type Set

Mehr Vielfalt

Wer außerdem gerne auf eine Vielzahl von Schriften zurückgreifen möchte oder muss (Stichwort „Hausschrift“), dem stehen dann erweiternde Techniken und Tools zur Verfügung. Die drei Hauptrollen spielten dieses Jahr @font-face, Cufon und Typekit. Ein alter Bekannter ist außerdem sIFR.

Mehr Vielfalt kann aber auch noch so ihre Tücken haben, wie ein prominentes Beispiel zeigte: Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts.

@font-face

War bereits Bestandteil der CSS2-Spezifikation, wurde aber, auf Grund mangelnder Unterstützung durch die Browserhersteller, aus CSS2.1 wieder verbannt. Mit CSS3 erlebt diese Methode ihre Renaissance. Dazu noch etwas mehr bei Tobias Otte: @font-face im Einsatz.

Cufon

Hier erfolgt eine dynamische Schriftersetzung mit Hilfe von Javascript und bietet eine Flash freie Alternative zu sIFR. Mehr zu Cufon bei Cameron Moll: Exploring Cufón, a sIFR alternative for font embedding.

Typekit

Auch Typekit setzt auf Javascript zur Einbindung System unabhängiger Schriften. Ich habe selbst auch kurz auf Typekit geblickt. Es hat aber auch noch ein paar Macken im Rendering.

Allen drei erwähnten Ansätzen ist eines gemeinsam: Probleme. Man hat entweder noch nicht die absolute Vielfalt (Lizenzen und Unterschiede im Rendering) oder es bestehen noch Unterschiede in der Browserunterstützung und Uneinigkeit über unterstütze Formate einzubettender Schriftfamilien.

Wir sind zwar schon ziemlich nah dran an einer neuen Vielfalt in Sachen Web-Typografie. Aber es kann nicht schaden, wenn man sich erst mal auf die Grundlagen beschränkt und sich allgemein um bessere Lesbarkeit und ansprechende Schriftbilder bemüht.

Typekit bleibt für mich eine Option. Wenn auch mit Abstrichen, was die kostenlose Version und Ladezeiten betrifft.

Wie man aktuell sehen kann, Es wird im unteren rechten Bereich meines Blogs der Website ein Hinweis und Link zu Typekit eingeblendet. Das ist das Manko der kostenlosen Version. Update: Aktuell setze ich Typekit nicht mehr ein. Der Test ist für mich zunächst mal beendet. Ich überlege noch und werde mich bald entscheiden, ob ich ein Upgrade auf die 1. kostenpflichtige Version mache. Für den Einsatz von bis zu 5 Schriften auf einer Domain werden $24,99/Jahr fällig.

Handhabung von Typekit

Typekit einzusetzen ist so einfach, wie es im Sommer angekündigt wurde. Ich habe es kurz ausprobiert und wende Typekit aktuell auf die Überschriften (Artikelüberschriften) angewendet. Zum Einsatz kommt kam die Schrift „Dustismo“. Aktuell stehen 66 Schriften zur Verfügung.

Schriftsatz auswählen

Man wählt sich eine Schrift und muss dann noch ein paar Kleinigkeiten anpassen.

• Selektoren auf die die Schrift angewendet wird
• Schriftstile, die man zur Verfügung haben will (die dann jeweils vom Typekitserver geladen werden)
• Fallback
• (Subsets kommen demnächst noch dazu)

Bearbeitung der Schriftsatzoptionen

Im Prinzip muss man dann nur noch die zwei Zeilen Javascript in den head-Bereich der Website einfügen und schon kann Typekit arbeiten. Je nachdem welche Selektorenmethode man gewählt hat, muss auch die CSS-Datei noch angepasst werden.

In jedem Fall hat man Typekit bereits nach wenigen Minuten einsatzbereit.

Einfluss auf die Performance

Der Einsatz von Typekit hat Einfluss auf die Ladezeiten. Das ist klar, hält sich aber noch in Grenzen. Bei meinem Blog, angewendet nur auf die Überschriften, macht das etwa eine halbe Sekunde extra aus. Exzessiver habe ich es nicht getestet. Es ist aber wohl damit zu rechnen, dass sich die Ladezeiten weiter erhöhen, je mehr Elemente angesprochen werden.

Fazit

Ich lass’ die Sache mal ein paar Tage weiterlaufen und entscheide mich dann entweder für das kleine o.g. kommerzielle Paket oder verzichte ganz auf Typekit. Die Einblendung des Typekit-Links ist dauerhaft keine Option für mich.

Die Handhabung von Typekit ist jedenfalls kinderleicht und eröffnet so auf bequeme Weise mehr Vielfalt im Schriftenwald. So viel bleibt bisher festzustellen. Die Frage ist, ob einem der Hinweislink oder eine Ivestition von $25/Jahr und etwas höhere Ladezeiten die Sache Wert sind.

Letzte Woche wurde Typekit vorgestellt. Der Ausblick, den uns Jeffrey Veen gibt, klingt vielversprechend.

Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts.Introducing Typekit

Typekit dürfte mehr als eine Alternative zu sIFR, Cufón oder typeface.js sein. Mittlerweile haben sich viele Webdesigner und andere dazu geäußert und teilen ihre Einschätzungen zu diesem sehr vielversprechenden Ansatz.

Die Meinungen und Einschätzungen sind nicht immer nur rein euphorisch. Was auch angemessen ist, da es in zwei Bereichen leichte Abzüge gibt.

• Typekit will ausgewählte Webfonts cross-browser-fähig machen
• Typekit, eine neue Möglichkeit für mehr Schriftenauswahl im Webdesign
• Web Fonts Get Real with Typekit
• Examining Typekit
• Why Typekit will change everything
• Typekit, Another Layer of Complexity?
• Typekit Hopes to Become the YouTube of Fonts
• Typekit – Web font licensing?

Oft diskutiert ist der notwendige Fallback. Was also passiert, wenn der Server auf dem die verfügbaren Schriften zentral abliegen, mal nicht kann oder sehr langsam reagiert. Diese technische Abhängigkeit muss gelöst werden. Wird auch. Im Notfall also muss man nur auf die bisher wenigen verfügbaren Schriftarten zurückgreifen. Das dürfte aber wohl die Ausnahme bleiben.

Typekit setzt außerdem auf ein teils kommerzielles Lizensierungssystem. Es wird nur in einer Basisversion kostenlos sein. Das bedeutet, dass viele Schriftarten nur dann genutz werden dürfen, wenn man dafür zahlt.

Insgesamt aber sieht es so aus, dass wohl ab diesem Sommer, mit einer nicht bekannten Schriftenvielfalt im Web gerechnet werden darf. Auch wenn Typekit immer noch nicht die absolut perfekte Lösung ist, so ist es doch (in der Theorie) sehr nah dran. Die gewonnene Rechtssicherheit, die neue Vielfalt und die Einfachheit der Implementierung, wiegen die negativen Kritikpunkte bisher auf.

Abbildung von flickr: Typekit

Die Statistik ermittelte die Schriften von Webseitenbesuchern von über 100 000 verschiedenen Webseiten und liefert erstmalig detaillierte Informationen über die Verbreitung von Schriften im deutschsprachigen Web.

Die aktuelle Verbreitung von Schriftarten bei Web-Usern

EIne Übersicht aller Analysen gibt es hier: Neuste Webanalyse Reports

Diese Tipps zu befolgen ist nicht schwer, aber sehr effektiv. Warum also wird das Thema Lesbarkeit von Texten so stiefmütterlich behandelt?

Don’t tell us busy pages look better

Klar werden einige argumentieren, dass Besucher von Websites Texte sowieso eher scannen. Warum aber ist das so? U.a. vielleicht auch deshalb, weil viele Texte so schlecht für’s Lesen aufbereitet sind.

Eine bessere Lesbarkeit stellt man auch nicht dadurch her, dass man den Besuchern Möglichkeiten anbietet, das Schriftbild der Website zu verändern. Das sollte zwar sichergestellt sein, aber in der großen Masse sollten Texte bereits von vornherein besser aufbereitet sein.

Tipps für bessere Lesbarkeit

• Standardschriftgrößen (Browser-Voreinstellung) für Fließtexte
• Whitespace – Raum zum Atmen
• Großzügige Zeilenhöhe
• Kontrast
• Kein Text in Abbildungen

Eigentlich nichts neues diese Regeln. Nichts neues aber auch, dass sie in schöner Regelmäßigkeit (oft allesamt) missachtet werden.

Das ist ein Grund dafür, warum man auch mal einen zwei Jahre alten Artikel wieder rausholen kann. Die Ausführlichen Erläuterungen zu Problemen und Lösungen der Lesbarkeit von Websites können im Originalartikel nachgelesen werden.

Es geht um eine Alternative zu sIFR, die Anfang letzter Woche für etwas Aufsehen gesorgt hat. Typeface.js, dass von David Chester vorgestellt wird. Mehr Schriftenvielfalt im Web durch JS. Schriftarten, die systemseitig bei den Besuchern nicht unterstützt werden, sollen damit serverseitig geliefert werden. So z.B. lassen sich dann für Überschriften individuellere typograpfische Dinge anstellen.

Was ist anders als bei sIFR?

• kein Flash, keine Grafiken
• JS Bibliothek und ein Perl-Script inkl. Zubehör, die
• Truetype Fonts verarbeiten

Bisher sieht das ganz vielversprechend aus. Und im Vergleich zu sIFR ist es schneller implementiert, also etwas handlicher. Ein kleiner Rockstar dieses typeface.js Und wie das mit Rockstars so ist, finden sie manche nicht brav genug.

Einschränkungen

Das Paket ist ziemlich groß (typeface.js 17kb, das Skript das die Schrift rendert über 60kb, dazu das Perlscript). Auch deswegen wird hier wie bei sIFR empfohlen, das Ganze mit Rücksicht auf die Performance auf Überschriften zu beschränken. Ein Performance-Gewinn gegenüber sIFR ist also eher nicht zu erwarten.

Weitere Problemchen: Transformierte Texte können nicht markiert und kopiert werden, Opera scheint auch nicht damit zu können. Und natürlich auch Bedenken gegenüber der Benutzbarkeit sowie die Grundsatzfrage, ob man es überhaupt braucht.

Status von typeface.js

Typeface.js befindet sich natürlich noch in der Beta und so wird wohl das ein oder andere Problem in den nächsten Versionen noch gelöst.

Einen Test ist es allemal wert, sucht man z.B. eine Alternative zu sIFR. Also einfach mal ausprobieren, wenn man meint es evtl. Für Projekte gebrauchen zu können. In 5 Minuten hat man eine kleine Testseite aufgesetzt.

Haken an der Sache

Schwieriger als bei sIFR verhält es sich mit den Lizenzfragen, die im Hinblick auf die verwendeten Truetype-Fonts zu berücksichtigen sind. Darauf weist auch der Entwickler ausdrücklich hin.

Please, please, be aware that you must assure for yourself that you have the right to embed any fonts you convert using this utility.

Insofern ist das ein mehr als kleiner Makel an typeface.js. Die neu gewonnene Schriftenvielfalt ist damit wieder relativiert.

Wo bleibt der Genuss ohne Reue?

Egal ob sIFR oder typeface.js. Was bleibt ist die Forderung nach einer breiteren Unterstützung von Schriften durch die Browser- und Systemhersteller, auch für die Webentwicklung. In der Weise, dass eine größere Vielfalt an Schriften für den direkten Zugriff zur Verfügung steht. Eine Zeile CSS…

Über Pattern Tap bin ich auf den Service von Diaroogle gestoßen. Ein netter kleiner Dienst, für alle die in einer Stadt unterwegs sind und es besonders eilig haben.

Diaroogle helps you find quality public toilets from your mobile phone.

Bisher verfügbar für New York. Weitere Großstädte sollen folgen. Ein Dienst, der im Wesentlichen nur zwei Zutaten benötigt. Die Google Maps API und Nutzer, die weitere Toiletten hinzufügen.

Ganz nebenbei ist diese Site auch ein schönes Beispiel für gute Typographie, wie auch Typesites feststellte.

typechart.com

Mit Typechart lassen sich online verschieden Schriftoptionen schnell ausprobieren. Außerdem wird gleichzeitig der CSS-Code für die Schriften generiert. Zudem kann man zwischen den Windows- und Mac-Rendering-Ergebnissen vergleichen.

Gefunden bei Pixelgangster