Webtypografie Trends 2011

Dienstag, 28.06.2011, 3 Kommentare

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:

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?

Beitrag teilen:

Blogbeitrag geschrieben von
Juergen Liechtenecker

Geschäftsführer bei der Agentur Liechtenecker

Sonst:
Koch auf goldschwarz.at, Design im Blut, spielt gerne und liebt seinen Job!

Ähnliche Artikel zu: / / / / /

Kommentare

Jetzt mitreden


Agentur Liechtenecker
Ramperstorffergasse 21/3-6
1050 Wien

Tel: +43 (1) 944 99 63
Fax: +43 (0) 720 880 044

KONTAKTIEREN SIE UNS

×

YEYYY!!

Vielen Dank für Ihre Nachricht, wir melden uns in Kürze.

×