Springe zur HauptnavigationSpringe zum HauptinhaltSpringe zu den Kontaktdaten und SupportSpringe zum Footer
Blick auf die Frauenkirche Dresden

Webdesign Blog

Webdesign im Fokus

Tipps aus der Praxis, für die Praxis

Profitieren Sie von unseren gesammelten Erfahrungen. Machen Sie es gleich richtig.

TYPO3 Association Bronze MemberTYPO3 CMS Certified Integrator (TCCI)

Welche Schriftarten eigenen sich besonders gut für Ihre Website?

Gut lesbar und eigenständig - Webfonts tragen zum Charakter Ihrer Website bei

Handwriting

Welche Schriftarten eigenen sich besonders gut für Ihre Website?

Vorteile der Google-Fonts und die 6 schönsten Schriften für Webseiten

Wir beschreiben Ihnen die Vorteile von Webfonts in der pragmatischen Anwendung, ohne dass Sie eine Handvoll Fachbegriffe lernen müssen.

TYPO3 Association Bronze MemberTYPO3 CMS Certified Integrator (TCCI)

Der Begriff Webfonts ist Ihnen nicht geläufig? Kein Problem, die Bezeichnung kennen nur Webdesigner und Grafikdesigner. Gemeint sind damit Schriftarten. Dieser Artikel konzentriert sich darauf, wie wir mit einer gut ausgewählten Schriftart das Ziel Ihrer Website unterstützen.

Am Anfang war das Wort

Oder besser gesagt, die Sprache. Die Schrift ist eine lautmalerische Nachbildung dieser Laute. Erinnern Sie sich noch, wie Sie als Kind Lesen gelernt haben? Da wurden aus den einzelnen Buchstaben mit dem Mund Laute geformt und aus den einzelnen Lauten setzte sich das Wort zusammen.

Als Vielleser bildet man nicht mehr aus den einzelnen Buchstaben die Laute nach. Die Wahrnehmung ist durch das häufige Lesen so schnell geworden, dass man ein geschriebenes Wort und dessen Bedeutung sofort erkennt, wenn man es sieht. Anders ausgedrückt: Ein geschriebenes Wort wird bei Erwachsenen nicht mehr als einzelne Buchstaben gelesen. Stattdessen wird das vorhandene Wort als Ganzes wahrgenommen. Aus diesem Grund funktioniert auch das Überfliegen oder Querlesen eines Textes. Welche Bedeutung hat dies für die Qualität der Webschriften?

Eine schnelle Wahrnehmbarkeit der Web-Fonts ist von Vorteil

Seit der Einführung des Drucks haben sich die Schriftarten immer weiter entwickelt. Sie funktionieren so gut, dass wir uns gar keine Gedanken mehr darüber machen.

Wenn wir lesen, gleitet unser Blick schnell an den Sätzen entlang. Deshalb sind die senkrechten Linien der Buchstaben meist dicker als die waagerechten. Das schnelle Lesen führt zum selben Effekt wie bei einem Autofahrer auf der Straße - deshalb sind die Zebrastreifen so massiv ausgeführt.

Um dem Leser zu helfen, in der richtigen Zeile zu bleiben und nicht zu verrutschen, haben einige Schriftarten kleine waagerechte Füßchen. Manchmal befinden sich zusätzlich kleine waagerechte Striche oben auf den Buchstaben.  

Zusätzlichen Überblick bietet die deutsche Sprache durch die Groß- und Kleinschreibung. Dadurch werden wichtige Worte hervorgehoben und strukturieren den Satz.

Weshalb ist eine gute Lesbarkeit der Website so wichtig?

Die Qualität einer Website steht und fällt mit dem Inhalt. Der Inhalt muss interessant sein und sich gut lesen lassen. Die Schrift darf dem Leser keine Rätsel aufgeben und soll den Augen auch bei längerem Lesen vor dem Monitor keine zusätzliche Leistung abverlangen.

Kreative Schrift: der Gegensatz zu gut lesbaren Schriften?

Sollte man besonders exotische Schriften verwenden, um Aufmerksamkeit zu erreichen? Besondere Schriftarten haben ihre Berechtigung, wenn sie richtig eingesetzt werden. Eine futuristische Schrift kann in einer Überschrift oder in einen Logo oder verwandt werden, um Akzente zu schaffen.

Als Fließtext - das sind die umfangreichen Absätze - sollte eine exotische Schrift jedoch nicht eingesetzt werden. Das Auge freut sich zwar, eine neue Schrift zu sehen, der Reiz des Neuen und Außergewöhnlichen verfliegt aber ebenso schnell.

Tipp: Besser lesbar werden Absätze mit Fließtexten, wenn die Texte nicht als Blocksatz gestaltet werden, sondern nur linksbündig sind. Das ist genauso, als ob man mit der Hand schreiben würde. Auf der rechten Seite des Fließtextes enden die Zeilen unregelmäßig – das nennt man Flattersatz. Diese Unregelmäßigkeit gibt den Augen einen Anhaltspunkt, um flink die nächste Textzeile zu finden und nicht versehentlich in der Zeile zu verrutschen.

Warum dann trotzdem schöne Schriftarten?

Das Wort "schön" enthält ja bereits eine Wertung. Menschen bevorzugen eine Gestaltung, die nicht nur übersichtlich ist, sondern auch über praktische Erwägungen hinaus vorteilhaft ausschaut. Schön und praktisch brauchen sich nicht gegenseitig auszuschließen.

Was sind Webfonts?

Das sind Schriftarten, die für den Monitor optimiert sind. Schriftarten entstanden gemeinsam mit dem Buchdruck und dem Zeitungsdruck. Schriften für den Monitor haben andere Anforderungen. Die Schrift setzt sich nicht aus Druckerschwärze, sondern aus Pixeln zusammen. Je kleiner die Schriftgröße auf dem Monitor wird, aus desto weniger Pixeln besteht ein Buchstabe. Wenn man die Verkleinerung dem Zufall überlässt, werden die Pixel eines kleinen Buchstabens an einer ungünstigen Stelle platziert und die Schrift ist schlecht lesbar. Falls man genau hinsehen muss, ob man ein i oder ein l vor sich hat, lenkt das von der Botschaft ab, die Sie auf Ihrer Website vermitteln möchten.

Inzwischen gibt es eine reichhaltige Auswahl von digitalisierten Schriften, die für die Nutzung auf dem Monitor optimiert sind. Google hat ein großes Angebot an Schriftarten, die kostenlos genutzt werden können.

Tipp: Das stundenlange Arbeiten vor dem Monitor ist für die Augen ermüdend. Lesen auf dem Bildschirm - möglicher bei nicht optimalen Bedingungen - ist auf Dauer anstrengend. Erleichtern Sie den Besuch Ihrer Website durch klare Schriftarten.

Schriftarten und Barrierefreiheit

Der Begriff Barrierefreiheit bedeutet, dass die Website dem Besucher durch die Gestaltung und die technische Performance keine Hindernisse in den Weg legt. Insofern spielt auch die Auswahl der Typographie eine Rolle.

Fließtext sollte gut lesbar sein. Überschriften heben sich in der Gestaltung vom Fließtext ab. Die Hierarchie von Überschriften und Zwischenüberschriften muss eindeutig erkennbar sein. Das Auge nimmt eine Führung durch die typographische Gestaltung dankbar an.

Mehr über Barrierefreiheit inklusive pragmatischer Tipps

Barrierefreie Website: Ein Leitfaden für mehr Engagement

Planung einer barrierefreien Website

Barrierefreiheit erweitert Ihr Publikum, verbessert die Nutzererfahrung und stärkt Ihre Marke – ideal für Marketing-Experten, die mehr erreichen…

Analyse und Konzeption von Webseiten und Homepages

Erfolg durch Performance und Barrierefreiheit mit TYPO3

Erfahren Sie, wie TYPO3 Caching und Responsive Design die Ladezeiten verbessern, die SEO steigern und die Konversionsraten erhöhen.

Webseiten, Onepager und Landingages planen, strukturieren und Ziele definieren

Mythen zur Barrierefreiheit von Webseiten

Was ist dran an den Mythen zur Barrierefreiheit? Lediglich die Pflicht gegenüber dem Gesetz oder beinhaltet ein barrierefreies Webdesign auch Chancen?

Webfonts richtig eingesetzt

Besondere Schriftarten tragen zum Charakter einer Webseite bei. Wie immer bei besonderen Gestaltungselementen gehören diese wohl dosiert platziert. Obwohl die interessant gestalteten Schriftarten dazu einladen, sie auf der eigenen Website auch zu verwenden, sollte man nicht mehr als eine exotischere Schriftart auswählen und diese auch nur an geeigneter Stelle. Hier bewährt sich die sichere Hand eines erfahrenen Webdesigners.

Früher war es komplizierter: die Schriftarten mussten sich bereits auf dem Computer befinden, der die Schrift anzeigt. Heute werden die Schriftarten einfach über den Webbrowser heruntergeladen. Entsprechende Hinweise erhält das Endgerät des Besuchers übermittelt. Das geht so schnell, dass man davon gar nichts merkt.

Tipp: Da seltene Schriften erst heruntergeladen werden, kann sich das bei mobilen Endgeräten in Sekundenbruchteilen bemerkbar machen. Hier gilt es abzuwägen. Wenn Geschwindigkeit ein bedeutendes Thema bei der Suchmaschinenoptimierung oder bei der User Experience (beim Besuchererlebnis) darstellt, sollte man auf exotische Webfonts verzichten.

Die Namen einiger Schriftarten kennen Sie bereits: Times New Roman oder Arial sind verbreitete Schriften. In Microsoft Word z.B. gibt es ein kleines Feld, mit dem Sie die bevorzugte Schriftart einstellen können.

Schriftarten unterstützen den Eindruck, den die Besucher von Ihrer Website erhalten. Die Schriftart sollte deshalb nicht nach dem persönlichen Geschmack des Website-Inhabers ausgewählt werden, sondern ob sie zum Thema der Website passt. Eine feierliche geschwungene Schrift eignet sich z.B. für Überschriften rund um das Thema Hochzeitsveranstaltungen. Eine grobe Schrift, die aussieht wie mit Schablonen aufgesprüht, ist für das Thema Abenteuerreisen oder Outdoor-Kleidung geeignet.

FIZ soft, die Webagentur aus Dresden, sucht die geeigneten Schriftarten für Ihre Website aus: Gut lesbare Webfonts für lange Lesetexte und ggf. eine interessante und charaktervolle Typo als Überschrift.

Tipp: Wie viele verschiedene Schriftarten oder Schriftgrößen sollte man bei einer Website einsetzen? Als Faust-Regel gilt hier die magische Zahl 3. Eine Website braucht eine Hauptüberschrift, auch H1 genannt. Zwischenüberschriften (H2) sind für die Struktur des Textes hilfreich. Schließlich gibt es noch den Lesetext.

Falls Sie einen besonderen Inhalt kennzeichnen, wie wir das hier bei den Tipps machen, können Sie den Lesetext kursiv setzen. Dann weiß der Leser sofort, hier kommt ein Tipp aus der Praxis. Das ist eine schöne Abwechslung für das Auge. Sie können den abgesetzten Text noch unterstützen, indem Sie einen Rahmen darum legen oder dem Hintergrund eine andere Farbe geben.

Kosten besondere Webfonts Geld?

Es gibt verschiedene Open Source-Anbieter, die Webfonts meistens kostenlos bereitstellen. Google ist wohl die bekannteste Quelle.

Einige Anbieter erlauben jedoch eine  Nutzung nur für den privaten Gebrauch. Wichtig ist auch, dass die angebotene Schrift die Besonderheiten der deutschen Sprache wie die Umlaute ä, ü und ö und das deutsche ß berücksichtigt.

Eine reichhaltige Auswahl an Schriftarten finden Sie bei Fontsquirrel. Die Auswahl bei Google Fonts ist zwar kleiner, aber immer noch umfangreich genug. Google Fonts nimmt besondere Rücksicht auf die deutschen Eigenheiten der Umlaute. Das Angebot wird von einem Schriftdesigner betreut und eignet sich ausgezeichnet für Webagenturen.

Weitere Anbieter sind 1001 Fonts und Softmaker. Neben den originären Anbietern von Webfonts gibt es noch Webseiten, die ihre Lieblingsschriften zusammengetragen haben. Diese stammen oft von anderen Anbietern. Deshalb sollte man vor dem Download auf der ursprünglichen Seite genau prüfen, ob diese Schriftart auch für eine kommerzielle Anwendung kostenfrei genutzt werden darf. 

Unter fontseek finden Sie die Information, wo es eine bestimmte Schrift zum Download gibt. Voraussetzung ist allerdings, dass Sie den Namen der Schrift kennen.

Kreative Webfonts für Ihre Website

Kreativität ist grundsätzlich zu begrüßen. Bei der Gestaltung einer Webseite ordnet sich die Kreativität jedoch einem bestimmten Zweck unter. Die Website hat ein bestimmtes Ziel. Der Besucher der Website kommt auf die Startseite, informiert sich im Laufe seiner Reise auf der Website und bestellt dann ggf. eine bestimmte Ware oder den Newsletter. Die Schriftart einer kommerziellen Website dient nicht der kreativen Selbstverwirklichung des Webdesigners oder des Webseiten-Inhabers, sondern dem Ziel der Website.

Bei den angebotenen Produkten können z.B. die harten Fakten eine andere Typographie haben als der Bereich, in dem die Anwendung des Gegenstandes beschrieben wird. Ein Messer eignet sich für den Angler und ein anderes als Multitool für den Camper. Ein Käufer interessiert sich dafür, aus welchem Stahl das Messer besteht und ein anderer interessiert sich für die Anwendungsmöglichkeiten. Durch die Gestaltung erhält das Auge eine bessere Orientierung und der Besucher gelangt sofort zu dem Bereich, der ihn interessiert.

Datenschutzkonforme Verwendung von Google-Fonts

So verwenden Sie Google-Fonts für Ihre Website – und berücksichtigen dabei die DSGVO

Wenn sich exotische Schriften nicht auf dem Endgerät befinden, werden sie heruntergeladen, damit der Text der Website in der vorgesehenen Schriftart gelesen werden kann. Wenn Schriften vom Google Server heruntergeladen werden, findet ein Datenaustausch zwischen dem Google Server und dem Endgerät statt, was in den meisten Fällen nicht datenschutzkonform erfolgt.

Umgehen lässt sich dieser Datenaustausch beim Download mit Google, indem die Schriften woanders abgelegt werden: auf einem eigenen Server oder eigenem Webspace. Das funktioniert mit dem kostenlosen Google Webfonts Helper.

Benötigen Sie Unterstützung bei der datenschutzkonformen Einbindung von Schriften auf Ihrer Website, sprechen Sie uns an. Wir helfen Ihnen gern und unterstützen Sie bei der Einbindung von Google-Webfonts auf Ihren Webseiten.

So betten Sie Google-Fonts mit @font-face in Ihre Website ein

Schriftarten, die sich nicht auf dem Endgerät befinden werden - wie gesagt - schnell über den Browser heruntergeladen. Die Google-Fonts erkennen, von welchem Browser die Anfrage kommt.

Als Vermittler zwischen der Google-Fonts-Website und dem Browser gibt es ein Protokoll namens @font-face. @font-face prüft, ob die Schrift bereits auf dem Endgerät vorhanden ist. Wenn Schriften auf den eigenen Server heruntergeladen und in einem Ordner abgelegt werden, wird dies ebenfalls über @font-face durchgeführt.

Die Arbeit mit Google-Fonts ist für Webagenturen angenehm und die Darstellung der Webfonts funktioniert zuverlässig.

Webfont mit Link einbinden

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'
    rel='stylesheet'
    type='text/css'>

Die Einbindung von Webfonts per Link direkt von Google ist einfach, jedoch in den meisten Fällen nicht datenschutzkonform. Daher empfehlen wir die Webfonts vom eigenen Webserver zu laden.

Webfont über CSS einbinden

body { font-family:'Roboto',sans-serif;font-weight:300 }
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'), 
       url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

Die 6 schönsten Schriftarten – unsere persönliche Auswahl

Eine schöne Schrift allein macht keinen guten Webfont. Eine Typo soll angenehm lesbar sein, auch über einen längeren Zeitraum. Dies ist besonders wichtig am Monitor, wo das Lesen für die Augen anstrengender ist als auf Papier. Die Schriftarten werden immer weiterentwickelt. Dabei sind verschiedene moderne Schriftarten entstanden. Wir stellen Ihnen unsere Favoriten vor.

Roboto

Trotz des Namens Roboto, der an Maschinen oder Science Fiction erinnert, ist die Schrift moderat gestaltet, gut lesbar und klar. Andriod verwendet sie als Standardeinstellung.

Open Sans

Open Sans wurde ursprünglich im Auftrag von Google entwickelt. Die Schrift wirkt sympathisch und großzügig mit viel Raum für die Gestaltung der kreisförmigen Buchstabenelemente.

Montserrat

Montserrat ist ebenfalls sehr gut lesbar und gehört seit 2012 zu den Open Source-Schriften.

Lato

Lato ist das polnische Wort für Sommer. Die feine Gestaltung der eleganten Schrift kommt besonders gut bei den Großbuchstaben zur Geltung.

Handwriting

Handwriting erweckt den Eindruck, die Schrift sei von Hand erstellt worden. Gut geeignet für Texte mit persönlicher Note.

Raleway

Raleway erhält seinen eigenständigen Charakter durch die verspielte Gestaltung des kleinen und großen W.

Tipp: Probieren Sie bei der Auswahl einer Schriftart verschiedene Schriftgrößen aus. Wie wirkt die Schriftart als Überschrift? Ist sie auch als Fließtext noch gut lesbar? Gefällt sie Ihnen auch noch, wenn Sie einen Absatz kursiv gestalten? Behält die Schriftart ihren Charakter, wenn sie fett ausgezeichnet wird? Experimentieren Sie ein wenig, lernen Sie die favorisierte Schriftart besser kennen.

Lassen Sie sich zeigen, wie die bewusste Auswahl der Webfonts durch die sichere Hand einer Webagentur den Auftritt Ihrer Website aufwertet. Fordern Sie ein kostenfreies Expertengespräch bei uns an.

Wissenswertes rund um das Thema Webdesign ...

Webdesign im Fokus - wissenswerte Informationen rund um Ihre Homepage. Lesen Sie hier alle wichtigen Informationen zu Webdesign und Suchmaschinenoptimierung.

TYPO3 Camp Mitteldeutschland 2020

TYPO3 Camp Mitteldeutschland 2024

TYPO3 Camp Mitteldeutschland 2024 in Dresden: Innovation, Vernetzung, Inspiration. Seien Sie dabei! #t3cmd

Organische Suchergebnisse für Webseite verbessern

Wie Texter Ihre Website und Suchmaschinenoptimierung verbessern

Erfahren Sie, wie Texter den Content Ihrer Website beleben und die Suchmaschinenoptimierung gezielt verbessern. Ein Mehrwert, der sich als Investition…

Onepager - Ihre Website im Mini-Design

ChatGPT im Marketing: Wie die KI Zielgruppen anspricht und Texte optimiert

ChatGPT optimiert Website-Texte mit hoher Verarbeitungsgeschwindigkeit, hat aber Grenzen in der emotionalen Intelligenz.