Die richtige Schriftart für Ihre Webseite
Die große Auswahl an Schriftarten ist für uns selbstverständlich. Sie gehören für uns so fest zum Alltag, dass meist nicht hinterfragt wird woher Schriftarten eigentlich kommen? Doch es gibt bei Schriftarten einige Unterschiede, die gerade bei der Erstellung einer Webseite wichtig werden.
- Vorinstallierte Schriftarten sind bei jedem Betriebssystem von Beginn an eingerichtet. Sicher kennen alle Windows-Nutzer Schriftarten wie „Times New Roman“ oder „Comic Sans MS“. So gibt es auch für Mac-Geräte typische vorinstallierte Schriftarten.
- Daneben gibt es die lizenzpflichtigen Schriftarten. Für Schriftarten wie „Helvetica Neue“ muss vor der Nutzung ein Nutzungsrecht erworben werden. Diese Lizenz muss auf den geplanten Einsatz der Schriftart abgestimmt sein.
- Ein recht junger Zweig sind die Webfonts, welche primär für den Einsatz in Webseiten gedacht sind. Diese sind meist kostenfrei nutzbar.
Einsatz in Webseiten
Die richtige Auswahl der Schriftarten ist für die Erstellung einer Webseite sehr wichtig, da Webseiten von vielen verschiedenen Nutzern aufgerufen werden. Nutzt man in der Webseite z.B. die Schriftart „Times New Roman“, muss jeder Nutzer, der die Webseite aufruft, diese Schriftart auf seinem Rechner installiert haben. Wenige Schriftarten wie „Times New Roman“ oder „Arial“ sind auf nahezu allen Rechnern installiert. Bei lizenzpflichtigen Schriftarten wird es da schon schwieriger. Ist die in der Webseite genutzte Schriftart nicht auf dem aufrufenden Rechner installiert, wird eine alternative Schriftart genutzt. Dies kann zu großen Unterschieden in der Darstellung der Webseite führen.
Eine gängige Praxis diese Darstellungsfehler zu vermeiden ist das Mitliefern der Schriftart in der Website. Dabei wird die Schriftart bei der Webseite hinterlegt und direkt von dort genutzt. Man ist somit unabhängig von den System-Schriftarten des Nutzers und greift immer auf die hinterlegte Schriftart zu.
Noch einen Schritt weiter gehen die Webfonts. Diese sind auf den Servern der Anbieter wie Google Fonts hinterlegt. Webseiten können sich so bei Aufruf der Website die benötigten Schriftarten von den Servern der Anbieter herunterladen und nutzen.
Einbindung von Webfonts
Google Fonts bietet einen großen Pool an Schriftarten und auch die Einbindung ist schnell umgesetzt. Geladen wird die Schriftart in den benötigten Schriftschnitten (fett, kursiv, light, …) im head-Bereich des HTML-Gerüsts. Über das CSS kann die geladenen Schriftart dann eingesetzt werden.
Einbindung der Google Font „Roboto“ in den Schriftschnitten Normal, Medium kursiv und Fett:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500i,700" rel="stylesheet">
Nutzung der geladenen Schrift „Roboto“ im CSS:
font-family: 'Roboto', sans-serif;
Achtung bei zu vielen Schriftarten und -schnitten
Trotz der einfachen Einbindung sollte man die Performance der Webseite nicht aus den Augen lassen. Denn jede Schriftart und jeder Schriftschnitt muss beim Laden der Webseite heruntergeladen werden. Je mehr Schriftarten eingebunden sind, desto mehr leidet die Ladezeit. Auch Google Fonts warnt bei der Auswahl der Schriftarten und -schnitte vor der Ladezeit. Schon bei 6 Schriftschnitten einer Schriftart bezeichnet Google Fonts die Ladezeit als „langsam“. Webdesigner sollten dies schon bei der Gestaltung einer Webseite berücksichtigen.
Nutzung von lizenzpflichtigen Schriftarten
Für lizenzpflichtige Schriftarten gibt es Anbieter wie Fonts.com. Die Schriftarten werden dabei, wie auch die oben beschriebenen Webfonts, eingebunden. Da es sich um lizenzpflichtige Schriftarten handelt wird hier in der Regel je nach Höhe der Seitenzugriffe ein festgelegter Preis gezahlt.
Fazit
Mit auffallenden Schriftarten kann ein Webdesign deutlich interessanter gestaltet werden. Gerade für Überschriften ist der Einsatz einer anderen Schriftart besonders attraktiv. Daher wird heutzutage häufig auf Webfonts zurückgegriffen. Webdesigner bekommen durch die große Auswahl an Schriftarten viel Spielraum im Webdesign.
Auch gibt es viele Webseiten, die aufgrund der Corporate Identity des Unternehmens auf lizenzpflichtige Schriftarten zurückgreifen. So kann mit der Webseite, dem Logo und den Druckmitteln ein einheitliches Bild geschaffen werden.
Haben Sie eine Schriftart gefunden, die gut zu Ihrem Unternehmen passt? Treten Sie mit uns in Kontakt, wir binden die Schriftart in Ihre Webseite ein.
Kommentar von Lina
Interessanter Beitrag, besonders für mich als Designerin. Weiter so!