UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Webtypografie Trends 2011

28. Juni 2011, von stephan
Liechtenecker Büro

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?
webtypografie_trends_2011_kreis
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!

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.
3 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
30. Juni 2011 um 09:49

Danke an Jürgen und Norbert.
@Ivy: Ballpark gehört im Moment auch zu meinen Highlights, ebenso wie die Futura und Copse 😉

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Ivy
29. Juni 2011 um 16:50

Also mir gefällt Ballpark sehr gut. Very very nice!

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
28. Juni 2011 um 17:33

sehr schöner beitrag!
fontsquirrel.com hatte ich bis dato noch nicht in der sammlung…

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

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
Close