Skip to content

Webfonts und Iconfonts

Webseiten vermitteln in der Regel Informationen und bestehen daher auch - im Regelfall sogar: weit überwiegend - aus Text. Text, der möglichst angenehm zu lesen sein soll, und dabei am besten noch gut aussehen. Zu bedenken sind daher die Auswahl einer geeigneten Schriftgröße, ein passender Zeilenabstand und eine lesefreundliche Zeilenlänge - aber auch eine gut lesbare und “schöne” Schriftart. Die Zeiten von “Serifenschrift, alternativ serifenloser Schrift auf weißem Hintergrund” sollten im Jahr 2015 eigentlich vorbei sein, gibt es doch genügend Auswahl.

Allerdings: es genügt - wie immer - nicht, einfach eine hübsche Schrift auszuwählen und dann auf dem eigenen Rechner zu testen, wie die Seite damit aussieht, denn der Browser greift bei der Schriftdarstellung auf die Schriften zurück, die ihm das System zur Verfügung stellen kann. Ist eine Schrift lokal nicht verfügbar, wird stattdessen eine - hoffentlich angegebene - (generischere) Alternative verwendet:

 font-family: Verdana, Arial, Helvetica, sans-serif;

Das kann dann immer noch ungefähr so aussehen, wie man sich das vorstellt … oder eben auch nicht.

Webfonts

Eine alternative Vorgehensweise bieten “Webfonts” - seit CSS 2 kann nämlich eine Schriftart via @font-face (Erläuterung) eingebunden bzw. nachgeladen werden. Das hat den Nachteil eines (zumeist nur leicht) verzögerten Aufbaus der Seite und - gerade bei langsamen, ggf. mobilen Verbindungen - eines (merklich) größeren Donwload-Volumens, aber den Vorteil, dass eine große Auswahl tatsächlich überall verfügbarer Schriften bereitsteht.

Als Quelle bietet sich zunächst Google Fonts an, wo Google über 600 Schriftarten in allen Variationen zur freien Verfügung bereitstellt. Wem das nicht genügt, der kann auf kostenlose Alternativen wie Fontsquirrel oder kostenpflichtige Angebote zurückgreifen, bspw. von Typekit aus dem Hause Adobe, von fonts.com aus dem Hause Monotype oder von MyFonts.

In jedem Fall sollte man nicht übersehen, dass zumeist verschiedene Schriftschnitte benötigt werden, also unterschiedliche Schriftstärken (mager, normal, halbfett, fett), Schriftlagen (normal, kursiv) oder auch Schriftbreiten (schmal, normal, weit). Daher muss man bei kostenlosen Anbietern wie Google Fonts das Einbinden aller benötigten Schriftschnitte bedenken und vor allem bei kostenpflichtigen Anbietern prüfen, ob der angegebene Preis auch alle erwünschten oder erforderlichen Schriftschnitte umfasst.

Iconfonts

Wer Windows nutzt, kennt sicherlich Symbolschriftarten wie Wingdings oder Webdings, die keine Buchstaben, Zahlen und sonstige Zeichen enthalten, sondern stattdessen eben Symbole, mit denen sich Profile in sozialen Netzwerken verlinken oder die Navigation oder auch Buttons elegant gestalten lassen.

Zu diesen Iconfonts gehören bspw. die (kostenpflichtigen) GLYPHICONS, von denen die Halflings kostenloser Bestandteil von Bootstrap sind, oder auch die (kostenlose) Font Awesome, deren Macher mittlerweile mit fonticons auch eine (kostenpflichtige) Sammlung verschiedener Iconfonts anbieten.

Solche Iconfonts werden wie Webfonts eingebunden und können dann einfach als “leeres”, mit einer entsprechenden CSS-Klasse versehenes Inline-Element verwendet werden: <span class="fa fa-twitter"></span> zeigt das Twitter-Symbol an. Außerdem können sie natürlich via CSS direkt in andere Elemente ein- bzw. an diese angebunden werden, wie ich in meinem Beitrag “Kennzeichnung von Links in HTML-Dokumenten” schon dargestellt habe.

Icon- und Fotobibliotheken

Natürlich ist Text nicht alles, und ein Bild sagt mehr als tausend Worte. Außerdem steigert ein favicon den Wiedererkennungswert einer Webpräsenz.

Auch hier gibt es eine ganze Reihe von Angeboten, die Icons oder Fotos kostenlos oder gegen geringe Lizenzgebühren zur Verfügung stellen, z.B. Iconfinder für Icons oder pixelio.de und fotolia für Fotos.

Aber Obacht! Nicht immer ist jede denkbare oder auch nur gebräuchliche Nutzungsform mitlizensiert, und die Lizenzbedingungen - bspw. die Angabe des Rechteinhabers und/oder ein Link zur Bilddatenbank - wollen beachtet werden, um Rechtsstreitigkeiten zu vermeiden. Eine entsprechende Infografik von bildersuche.org hilft bei der Auswahl und beim Umschiffen von rechtlichen Klippen. Außerdem liefert die Grafik eine Zusammenstellung der verfügbaren Anbieter frei Haus.

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]

Trackbacks

Netz - Rettung - Recht am : Webdesign anno 2015

Vorschau anzeigen
Webdesign ist ein Beruf - und eine Kunst. Und damit nichts, was man sich “mal eben” im Vorbeigehen für die professionelle Gestaltung der eigenen Webpräsenz aneignen kann. Dennoch müssen Webseiten (gerade heute!) nicht mehr entweder “kla

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Noch keine Kommentare

Kommentar schreiben

HTML-Tags werden in ihre Entities umgewandelt.
Markdown-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Identicon/Ycon Autoren-Bilder werden unterstützt.
Formular-Optionen
tweetbackcheck