So bringen Sie mit Webfonts mehr Kreativität auf Ihre Website
Letzte Aktualisierung am 17 März 2023 um 10:57 am
5,00/5Tolle kreative Schriften einfach auf der Firmenwebsite integrieren, das gelingt mit Webfonts. Anders als bei den Systemschriften müssen diese Schriften nicht auf einem lokalen Computer installiert werden, sondern werden von einem externen Webserver bezogen. Die meist genutzten Webbrowser wie Mozilla Firefox, Google Chrome, Internet Explorer oder Safari unterstützen Webfonts.
Der technische Fortschritt ermöglichte die Trennung von HTML, dem Inhalt von den gestalterischen Elemente, die im CSS festgehalten werden. Webfonts sind also digitalisierte Schriftarten, welche direkt beim Besuch Ihrer Website vom Rechner des Nutzers geladen werden. Bei der Anwahl Ihrer Webseite erhält der Browser die Information, auf welchem Server sich die verwendete Schrift befindet, damit sie abgerufen werden kann. Die Schrift muss also nicht auf dem lokalen Rechner installiert sein.
Webfonts, Systemschriften und Desktopfonts
Webfonts sind mittlerweile bei fast allen Websites hinterlegt. Im Vergleich dazu werden Desktopfonts vorrangig für Printprodukte eingesetzt. Dazu werden diese vom entsprechenden Server heruntergeladen und auf dem Computer installiert. Die Systemschriften wiederum sind vorinstallierte Schriften, sie sich auf fast allen Rechnern befinden.
Vor der Entwicklung der Webfonts wurden die Systemschriften als sogenannte “Web Safe Fonts” verwendet. Die Mehrzahl der Webseiten nutzten Systemschriften, da diese auf fast allen Rechner bereits verfügbar waren. Heute kommen die Systemschriften als Fallback Font dann zum Einsatz, wenn aus irgendeinem Grund der entsprechende Webfont nicht geladen werden konnte.
Welche Arten von Webfonts gibt es und wo werden diese eingesetzt?
Webfonts werden als kostenfreie Web Open Font Formats angeboten oder auch als lizenzpflichtige Schriftsätze, die mit Kosten verbunden sind. Die Auswahl an Webschriften ist riesig und für das ungeübte Auge ist es manchmal schwer, den passenden Font zum Thema zu finden.
Achten Sie bei der Wahl der Schriftart auf die zwei Hauptaspekte, die Lesbarkeit und die Wirkung. Diese zwei Punkte sollten immer in Verbindung mit dem Medium betrachtet werden. Erleichtern Serifen-Schriften das Lesen von kleinem Text in gedruckten Produkten, so können sie jedoch in der Webpräsenz nicht immer den gleichen Effekt erzeugen. Hier lohnt es sich, die unterschiedlichen Schriftarten zu testen.
Extravaganz in die Überschriften
Möchten Sie Überschriften oder einige Textpassagen besonders hervorheben, so können Sie hier ruhig zu ausgefallenen und auffälligen Schriftarten greifen. Viele Designer bedienen sich unterschiedlicher Schriftschnitte einer Font Family, um die Wertigkeiten der Textelemente zu definieren. Übertreiben Sie es bei der Wahl der Fonts nicht, denn zu viele verschiedene Webfonts bringen leicht Unruhe und Unübersichtlichkeit auf die Seite.
Generell werden vier unterschiedliche Font Faces unterschieden:
Serifen-Schriften
Das markante Merkmal aller Serifen-Schriften ist der kleine Querstrich am Ende der Buchstabenbalken. Bekannte Vertreter dieser seriös und traditionell wirkenden Schriftarten sind Century, Times New Roman oder Palatino. Diese Fonts werden besonders gern bei langen Texten und Büchern eingesetzt, da das menschliche Auge diese Schriften leicht lesen kann und nicht so schnell ermüdet.
Sans-Serif-Schriften
Die Sans-Serif-Fonts verzichten, wie der Name schon erahnen lässt, auf die kleinen Querbalken und setzten stattdessen auf unterschiedliche Strichstärken. Besonders gern bei kurzen Texten verwendet, kommen die Vertreter wie Arial, Helvetica und Verdana eher modern und technisch daher.
Handschriften
Sollen bestimmte Elemente auf Ihrer Website besonders stark hervorgehoben werden, so empfehlen sich mitunter die Handschriften, die eine ganz persönliche Note versprühen. Die Schriften Bradley Hand ITC, Informal Roman oder auch Matura MJ Script lassen sich bestens als Überschriften einsetzen.
Schreibschriften
Für Überschriften und andere kurze Texte, die eine besonders emotionale und feierliche Wirkung erzielen sollen, eignen sich die Schreibschriften. Die Buchstaben sind hier meist miteinander verbunden.
Worauf sollte beim Einsatz verschiedener Webfonts geachtet werden?
Die eben aufgelisteten Eigenschaften der Webfonts sind natürlich nur generell zu sehen. Gerade mit einem unerwarteten Einsatz bestimmter Schriften können Sie mehr Aufmerksamkeit erzeugen und den Blick der Nutzer lenken. Weitere Tipps für die Verwendung der Webfonts sind:
- Funktionalität sollte gerade bei langen Textpassagen im Vordergrund stehen. Eine gute Lesbarkeit ist in diesem Fall Pflicht. Achten Sie außerdem darauf, dass bei Aufrufen der Webseite von mobilen Geräten besonders selten genutzte Schriften mitunter eine längere Ladezeit verursachen.
- Wählen Sie Webfonts entsprechend Ihrer Zielgruppe aus. Inhalt der Webseite und Wirkungsbereich Ihres Unternehmens müssen zur Schriftart passen. Eine Kombination von Serifen- und Sans-Serifen-Schriften bringt in den meisten Fällen eine sehr gute Optik. Schreib- und Handschriften sollten hingegen eher sparsam genutzt werden.
- Nutzen Sie nicht zu viele verschiedene Webfonts. In der Praxis hat sich der Einsatz von zwei Schriften bewährt. Dabei wird auf einen gut lesbaren Font im Fließtext gesetzt und auf einen weiteren Font in den Überschriften.
- Setzen Sie auf Kontraste. Während der Webfont für die Textpassagen eher der Funktionalität unterliegt, können Sie für Header und Sonderelemente durchaus zu kontrastreichen Schriftarten greifen. Achten Sie lediglich darauf, dass die gewählten Schriften stilistisch nicht zu weit auseinanderliegen.
Wo finden Sie Webfonts?
Momentan können Sie eine breite Auswahl an Webfonts im Netz finden. Die Schriften sind entweder als Open Source kostenlos erhältlich oder sind mit einer Lizenzgebühr verbunden. Die Lizenz wird entweder einmalig gezahlt, damit Sie die Schrift auf Ihrem eigenen Server installieren können oder Sie zahlen entsprechend nach Dauer der Nutzung.
Die bekanntesten Webfont-Bibliotheken sind:
- Adobe Edge Webfonts
- Google Fonts
- Font Squirrel
- Linotype
- fonts.com
- MyFonts
Wie betten Sie Webfonts ein?
Webfonts werden bei der Programmierung einer Website im CSS Cascading Style Sheet hinterlegt. Neben der Angabe, auf welchen Webserver die Schrift zu finden ist, werden im CSS auch unter anderem auch Angaben zur Schriftgröße gemacht. Mit einer korrekten Einbindung verbindet sich der Browser Ihrer Kunden automatisch mit dem Webbrowser, der den entsprechenden Webfont beherbergt und Ihre Website wird wie gewünscht angezeigt.
Bei WordPress, dem beliebten System zur Websiteerstellung, werden Webfonts mit Hilfe von Plugins integriert oder mit den entsprechenden Verlinkungen. Der große Vorteil von WordPress, die Einbettung können Sie leicht vornehmen, ohne spezielle Programmierkenntnisse zu besitzen.
Font Konvertierung
Mitunter ist es notwendig, Fonts zu konvertieren, damit diese auf bestimmten Betriebssystemen funktionieren. Dafür gibt es im Netz kostenlose Font Converter wie zum Beispiel den FreeFontConverter. Hier können Sie die meisten Schriften in ein anderes Format konvertieren. Die am häufigsten verwendete Formate sind TrueType (.Ttf), PostScript (.Ps) und Open Type (.OFT). Natürlich gibt es noch weitere Formate, die ein Konverter umwandeln kann.
Font Hinting
Der Begriff Font Hinting wird verwendet, wenn Hints beit Outline Font Files eingebettet werden. Dies ermöglicht, dass Webfonts auch bei kleinen Darstellungen gut leserlich und deutlich bleiben. Hints sind entsprechend zusätzliche digitale Informationen, welche die optimale Darstellung eines Fonts und seiner typischen charakterlichen Eigenschaften erlaubt.
Dabei wird zwischen PostScript Hints und TrueType Hints unterschieden. Es kann außerdem eine Wahl vorgenommen werden, um nur zeichenspezifische Hints zu setzen. Die Qualität der Hints sollte in die Wahl des richtigen Webfonts mit einfließen. Es muss jedoch klar sein, dass auch mit der Verwendung des Font Hinting bestimmte Eigenschaften eines Webfonts eingebüßt werden, wenn die Textpassagen sehr klein geschrieben sind.
Font Kerning
Font Kerning findet momentan in der digitalen Typographie noch keine große Anwendung. Mit Kerning wird das manuelle Anpassen der Abstände zwischen Buchstaben bezeichnet. Gerade im Printsektor wird dies bei kritischen Buchstabenkombinationen eingesetzt, die mit zu wenig Abstand Lesbarkeit verlieren. Das Gleiche gilt für Sonderzeichen oder Ziffern.
Im CSS kann aktuell das “Font-Kerning” angegeben werden. Die Qualität ist aber noch nicht mit dem manuellen Font Kerning im Printbereich vergleichbar.
Vor- und Nachteile von Webfonts
Die Vorteile der Webfont überwiegen mittlerweile eindeutig. Hauptvorteil ist und bleibt die Tatsache, dass die Schriften nicht extra auf dem eigenen Gerät installiert werden müssen. Das Laden vom Webserver ist schnell und unkompliziert und ermöglicht die Verwendung auch bei verschiedenen mobilen Endgeräten.
Des Weiteren sind diese Fonts ohne Probleme skalierbar und zoombar. Die Qualität ist hochauflösend und mit den vielen unterschiedlichen Webfont-Bibliotheken ist die Auswahl riesig.
Jedoch birgt die Nutzung von Webfonts auch einen kleinen Nachteil. Sind die Schriften nicht korrekt eingebettet, kann sich die Ladezeit Ihrer Webseite erhöhen. Nutzen Sie urheberrechtlich geschützte Webfonts, sollten Sie diese via Pay-as-you-go-Systemen erwerben. Hier werden Ihnen die Kosten nach Anzahl der Seitenaufrufe berechnet. Eine weitere Variante ist das einmalige Zahlen einer Lizenzgebühr. Jedoch gibt es momentan viele Schriftsätze, die als Open Source deklariert sind und somit ohne Gebühren genutzt werden können.
Fazit
Mit der Wahl des passenden Webfonts geben Sie Ihrer Website das Extra an Individualität, welches Sie von der Konkurrenz absetzt. Im Vordergrund sollte jedoch immer die Funktionalität für den User stehen. Analysieren Sie Ihre Zielgruppe, Ihr Markenumfeld und definieren Sie, wie Sie und Ihr Unternehmen wahrgenommen werden wollen. All diese Informationen lassen sich mit Typografie und den passenden Inhalten übertragen. Sollten Sie sich hier nicht sicher sein, so unterstützen Designagenturen und Grafikbüros bei der Erstellung und Umsetzung von Marketing Konzepten.
Mit Webfonts können Sie kreative Ideen umsetzen und emotionale Reaktionen erzeugen. Dabei sind diese Fonts immer verfügbar, müssen nicht extra installiert werden, denn sie werden von den Geräten Ihrer Kunden direkt aus dem Netz verwendet. Perfekt für die heutige mobile Welt.
