Im letzten Jahr hat zunehmends das Thema Webtypografie Einzug in modernes Webdesign gehalten. Websites die sich Slab und Bold Fonts wie Rockwell und Museo Slab bedienten, schossen förmlich aus dem Boden und haben damit ein neues typografisches Zeitalter eingeläutet. Doch was hat sich seit dem auf diesem Gebiet getan?
Mitte 2011 sieht die typografische Landschaft schon etwas vielfältiger aus, man beginnt das Potential der typografischen Möglichkeiten nicht nur zu erkennen und umzusetzen, sondern auch im Designprozess von vornherein zu berücksichtigen. Schön, wie wir finden. Egal ob Serif, Script, Retro, Slab oder Sans Serif, das Spektrum der eingesetzten Fonts ist mittlerweile sehr breit gefächert und macht das tägliche Arbeiten im Web für das Auge eines Designers zu einem immer eindrucksvolleren Erlebnis.
Hier drei wunderschöne Webtypografie Best-Practice Beispiele:
Wie werden Web Fonts eigentlich eingebunden?
Einbindung via @font-face Deklaration
Seit dem browserübergreifenden Support von @font-face Deklarationen sind Designer nicht mehr auf den Einsatz von vorinstallierte Standardschriften beschränkt. Schriften können auf den eigenen Server hochgeladen und mittels @font-face in das Design eingebunden werden. Voraussetzung hierfür ist natürlich, dass die Lizenzbestimmungen der jeweiligen Schrift das auch gestatten. Achtung: Bei kommerziellen Schriften kann das mitunter zur Hürde werden.
Um eine Desktop Schrift im Web darstellen zu können, muss sie zunächst in die verschiedenen Webformate konvertiert werden. Momentan gibt es fünf verschiedene Web Font Formate, die von verschiedenen Browsern unterstützt werden: EOT, OpenType, SVG, TrueType und WOFF. Ein einheitliches Format gibt es derzeit leider noch nicht, es ist jedoch anzunehmen, dass sich WOFF (Web Open Font Format) in diese Richtung bewegen wird. Fontsquirrel stellt mit dem @font-face Generator ein kostenloses Tool zur Verfügung, das Schriften in die jeweiligen Webformate konvertiert. Bei Fontsquirrel findet ihr außerdem zahlreiche Open Source Schriften, die über vorgefertigte @font-face Kits mühelos ins eigene Design eingebettet werden können.
Eine browserübergreifende @font-face Deklaration könnte zum Beispiel so aussehen:
@font-face {
font-family: 'FontName';
src: url('FontName.eot');
src: url('FontName.eot?#iefix') format('embedded-opentype'), url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype'), url('FontName.svg#FontName') format('svg');
}
Einbindung via Web Font Anbieter
Kostenpflichtige Web Font Anbieter wie Typekit oder Font Spring vereinfachen die Einbindung kommerzieller Schriften enorm. Im Fall von Web Font Anbietern wie Typekit liegen erworbene Schriften am Server des jeweiligen Web Font Anbieters und werden via JavaScript in die eigene Website integriert und vor unautorisierter Nutzung geschützt. Web Font Anbieter wie Font Spring stellen herunterladbare Schrift-Pakete zur Verfügung, die direkt auf den eigenen Server hochgeladen werden. Um in der Vielzahl an Web Font Anbietern die passende Lösung zu finden, gibt es hier eine hilfreiche Gegenüberstellung.
Einbindung via Google Fonts API
Eine weitere Möglichkeit für die Nutzung von Web Fonts ist die Einbindung über die kostenlose Google Fonts API. Auch hier gibt es zwei Varianten der Einbindung:
- die selbst gehostete Variante, bei der eine Schrift auf dem eigenen Server abgelegt wird
- die von Google gehostete Variante, bei der eine Schrift verlinkt wird, die auf den Google Servern liegt
Eine Übersicht über die via Google Fonts API zugänglichen Webfonts findet ihr hier.
Aktuelle Web Font Trends?
Im ersten Halbjahr von 2011 war vor allem die wachsende Vielfalt an Web Fonts schön zu beobachten. Hier findet ihr ein paar Schriften, um die man als Webdesigner momentan nicht herum kommt.
Serif & Slab Serif
Copse
Droid Serif
Chunk Five
Calluna
Adelle Basic
Deming EP
Sans Serif Fonts
Droid Sans
Bebas Neue
Futura PT
Franchise
League Gothic
Proxima Nova
Museo Sans
Calluna Sans
Neutra Text
Script Fonts
Ballpark
Marketing Script
Lobster
Lobster Two
Holla
Bistro Script
Hilfreiche Scripts für komplexere Formatierungsmöglichkeiten von Webtypografie
Nachdem die steigenden Ansprüche an moderne Webtypografie auch immer komplexere Formatierungsmöglichkeiten von Texten verlangen, legen wir euch drei Scripts ans Herz, die euch mehr Kontrolle über die Darstellung von Texten geben:
Lettering.js
Kern.js
FitText.js
Zu guter Letzt haben wir hier noch das hilfreiche ffffallback Bookmarklet für euch, mit dem ihr unkompliziert font-family Fallback-Deklarationen durchtesten könnt.
Und für die Comic Sans Criminals haben wir hier auch noch eine hübsche Message! Schade nur, dass diese Website nicht mit Webfonts, sondern mit Grafiken arbeitet.
Wie geht ihr mit dem Thema Web Fonts um? Setzt ihr Web Fonts für eure Designs ein, oder greift ihr lieber auf websafe Schriften zurück? Mit welchen Schriften arbeitet ihr momentan gerne?
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!
UX Snacks Vol.09
That’s a wrap on UX Snacks 2024. Am 7. November hat die vierte und letzte Ausgabe in diesem Jahr stattgefunden und wir nehmen mit diesem Recap ganz viel positive UX-Energie mit ins neue Jahr. Und keine Angst: Schon bald verkünden wir die Daten für 2025.
Jetzt lesen
Folge #62 mit Susanne Liechtenecker
In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.
Jetzt anhören