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.