UX Abo

Neuer Workshop: "UX Metrics - Erfolgsmessung im UX Design".

Zeigt her!
Close

Webtypografie Trends 2011

Bild
Liechtenecker Büro
Bild
webtypografie_trends_2011_kreis

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:


Bild
webtypografie_trends_2011_kreis

Bild
webtypografie_trends_2011_kreis

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
Bild
webtypografie_trends_2011_kreis

Chunk Five
Bild
webtypografie_trends_2011_kreis

Calluna
Bild
webtypografie_trends_2011_kreis

Adelle Basic
Bild
webtypografie_trends_2011_kreis

Deming EP
Bild
webtypografie_trends_2011_kreis

Sans Serif Fonts

Droid Sans


Bebas Neue
Bild
webtypografie_trends_2011_kreis

Futura PT
Bild
webtypografie_trends_2011_kreis

Franchise
Bild
webtypografie_trends_2011_kreis

League Gothic
Bild
webtypografie_trends_2011_kreis

Proxima Nova
Bild
webtypografie_trends_2011_kreis

Museo Sans
Bild
webtypografie_trends_2011_kreis

Calluna Sans
Bild
webtypografie_trends_2011_kreis

Neutra Text
Bild
webtypografie_trends_2011_kreis

Script Fonts

Ballpark


Marketing Script
Bild
webtypografie_trends_2011_kreis

Lobster
Bild
webtypografie_trends_2011_kreis

Lobster Two
Bild
webtypografie_trends_2011_kreis

Holla
Bild
webtypografie_trends_2011_kreis

Bistro Script
Bild
webtypografie_trends_2011_kreis

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
Bild
webtypografie_trends_2011_kreis

FitText.js
Bild
webtypografie_trends_2011_kreis

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.
Bild
webtypografie_trends_2011_kreis

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!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.

Interesse mit uns zu arbeiten?

Lass uns plaudern …

oder vereinbare gleich mit unserer CEO Susanne einen kostenlosen Termin.