NEW KLICKS FROM THE BLOGKlick für Klick die neuesten Themen

In 5 Schritten zur perfekten Schrift für deine Website

Okay, let’s go! Du bist bereit dazu Neuland zu betreten und deinen digitalen Fußabdruck im Internet zu hinterlassen. Die Struktur deiner Website steht. Die Texte sind perfekt und die Fotos sind ein Genuss für´s Auge. Jetzt sitzt du mit einem Chai-Latte im Co-Working-Space vor deinem Macbook und es geht trotzdem nichts vorwärts?! Du fragst dich: „Wie finde ich die richtige Schrift für meine Website?“, „Welche Schrift passt zu mir?“ oder „Wie finde ich eine ähnliche Schrift zu meiner bestehenden Font?“. Fragen über Fragen und wir haben die Lösung dafür. Wir zeigen dir in 5 Schritten, wie du zur perfekten Schrift für deine Website kommst und geben dir weitere Inspirationen für dein Webprojekt.

Das A und O: die perfekte Lesbarkeit auf deiner Website

Damit deine perfekten Texte auch ideal vom Nutzer gelesen und verstanden werden können, musst du bei der Schriftwahl für deine Website einiges beachten. Etwas Nerd-Talk zum Einstieg: man unterscheidet bei Texten immer zwischen der Leserlichkeit und der Lesbarkeit. Die Leserlichkeit bezieht sich immer auf das Erkennen und Unterscheiden von einzelnen Buchstaben und Zeichen. Bei der Lesbarkeit hingegen geht es um die inhaltliche Verständlichkeit eines Textes. Wie wir aber schon wissen, sind deine Texte natürlich perfekt. Aber zurück: die Leserlichkeit einer Schrift im Web. Hierbei stehen Schriftgröße, Linienstärken, X-Höhe, Kontraste, Betrachtungsabstand, u.v.m. miteinander im Ring. Du merkst schon, die Ausrichtung und Anordnung der Schrift spielt eine große Rolle. Natürlich darf man nicht unerwähnt lassen, dass das Lesen einer Schrift auch immer an Gewohnheiten gebunden ist. Wo es früher ganz normal war, eine Frakturschrift zu lesen, tut man sich heute  deutlich schwerer damit.

Optimale Lesbarkeit im Web

Damit deine Texte gut gelesen und dann auch verstanden werden können, gibt es auch bei der Lesbarkeit technische Parameter. Hier gilt es zu beachten, dass die Abstände zwischen den Buchstaben (das „Kerning“) optimal gewählt sind, dass der Zeilenabstand (auch „Durchschuss“ genannt) perfekt sitzt und der Strichkontrast optimal gewählt ist. Das alles bringt aber auch nur dann etwas, wenn die Schriftgröße für deine Website richtig gewählt ist. Hast du alle diese Parameter bedacht, dann liegst du schon mal nicht mehr zu 100% daneben.

Schriftgrößen auf Websites

Hierzu gibt es eine gute alte Faustregel. Die Schriftgröße im Web sollte bei Fließtexten nämlich immer mindestens 14px betragen. Größer ist natürlich besser. Wir bei bitzinger arbeiten bei Fließtexten immer mit Schriftgrößenzwischen 14p und 18px.

Ebenfalls wichtig ist die Zeilenlänge. Zu lange, aber auch zu kurze Zeilen machen Texte unleserlich. Aus diesem Grund eine weitere Faustregel: eine Zeile (im deutschsprachigen genannt „Raum“) sollte aus circa 50 bis 70 Zeichen bestehen. Diese Regel kommt aus dem Printbereich, lässt sich jedoch auch sehr gut im Web anwenden.

Schriften im Web: Serifen oder Serifenlos?

Lass‘ uns kurz mal recapen: du weißt nun, dass du deine Schrift hinsichtlich des Schriftschnittes, der Schriftgröße, des Zeilen- und Zeichenabstandes und der idealen Zeilenlänge abstimmen musst. Doch nun kommt die Gretchenfrage: die Schriftart besser mit Serifen oder ohne?

Was sind eigentlich Serifen?

Berechtigte Frage an dieser Stelle. Serifen laufen dir jeden Tag zu Tausenden über den Weg. Am einfachsten erklärt: Serifen sind die „kleine Füßchen“ an den Strich-Enden eines Buchstabens. Diese Füßchen optimieren den Lesefluss im Print, da sie kleine Verbindungen zwischen den Buchstaben schaffen, du kennst es sicherlich aus deiner Tageszeitung.

Serifen im Web?

Schriftkombinationen aus Schriften mit und ohne Serifen bereichern deine Gestaltung. Solltest du dich für eine Serifenschrift auf deiner Website entscheiden, musst du unbedingt die Lesbarkeit prüfen. Hier raten wir dazu, Fließtexte tendenziell etwas größer zu gestalten, damit die Serifen auch auf schlecht aufgelösten Monitoren gut zur Geltung kommen. Nutzt du die Serifen für Überschriften oder besondere Auszeichnungen, bist du ziemlich safe unterwegs. 

Ähnliche Schriften im Web finden

Bis jetzt waren alle Inhalte für den Fall gedacht, dass du mit deiner Website auf einem weißen Screen beginnst und du dir von Grund auf Gedanken machst, wie du dein Projekt und im Konkreten die Schriftwahl für deine Website bewerkstelligst. Nun kann es jedoch der Fall sein, dass du eine bereits bestehende Schrift oder ein bestehendes Logo hast und du eine passende Font dazu finden musst. Für genau diese Fälle bietet uns das WWW wertvolle Tools zur Identifizierung von Schriften.

So findest du Schriften im Web

Das absolute Workhorse im Netz: https://www.whatfontis.com/

Diese Website hilft dir Schriften zu finden. Das einzige, was du tun musst, ist, den Screenshot oder das Bild deines Logos oder deines Schriftmusters hochzuladen und den Anweisungen auf der Website zu folgen. Whatfont spuckt dir im Anschluss eine ordentliche Liste an Schriften aus, die Ähnlichkeit zu deiner Vorgabe haben. Natürlich solltest du nicht die erstbeste Font nehmen, sondern die Schriften im Detail miteinander vergleichen. Frage dich: Wie sehen die Punzen aus? Wie ist die Achse der Schrift? Suche nach markanten Buchstaben in deinem Schriftbeispiel und vergleiche sie mit den Vorschlägen.

Kostenlose Schriften im Web: Google Fonts.

Nun hast du viel Theorie zum Thema Schriften im Web gehört. Nun fragst du dich aber sicherlich: Wo finde ich denn nun Schriften für mein Webprojekt? Genau hier kommst du nicht um Google Fonts herum. Google Fonts ist eine Sammlung von über 1400 Schriftarten, die dir Google zur freien Verfügung bereitstellt (dennoch gilt: Lizenzen prüfen!). Bei Google-Fonts findest du sicher eine Schrift, die deinen Ansprüchen gerecht wird. Der große Vorteil hier ist, dass diese Schriften sehr gut ausgebaut sind (Zeichensatz) und vor allem online funktionieren. Dies bietet Sicherheit für dich und dein Webprojekt. Du kannst hier nach Themen oder sogar speziellen Merkmalen einer Schrift suchen.

Unsere TOP5 Google-Fonts.

Seit Jahren gehen wir die digitale Reise mit unseren Kunden. Wir prüfen sämtliche Schriften und deren Eigenschaften immer mit der Vorgabe unseres Kunden. Im Laufe der Jahre haben wir also schon einiges an guten und auch schlechten Schriften gesehen. Um euch nun die Suche nach der perfekten Schrift für eure Website etwas zu erleichtern oder euch etwas Inspiration zu bieten, haben wir aus unseren Kreationen unsere favorite-Google-Fonts in ein Ranking gepackt.

Bedenke aber bitte, dass sich die Wahl deiner Schrift immer an den speziellen Bedürfnissen deines Kunden orientieren muss. Jede Schrift besitzt ihren eigenen Charakter. Schriften können verspielt, edel, ruhig, geometrisch, laut oder auch leise sein. Das sind jetzt nur ein paar Eigenschaften, aber jede Schrift kommuniziert ein gewisses Gefühl, eine Stimmung. Diese Stimmung muss zu dir, deinem Unternehmen oder deinem Kunden passen.

Schriftart Inter

Die Inter ist eine serifenlose Font, die eine gewisse Nüchternheit mit sich bringt. Sie eignet sich ideal für Fließtexte und zeichnet sich über eine großartige Lesbarkeit aus. Neun unterschiedliche Schriftschnitte bieten zudem ein breites Spektrum, aus dem man schöpfen kann.

fonts.google.com/specimen/Inter

Schriftart Abril Fatface

Serifen, Serifen, Serifen! Eine einzigartige Auszeichnungsschrift, die sich hervorragend für Überschriften und plakative Headlines anbietet.

fonts.google.com/specimen/Abril+Fatface

Schriftart Nothing you could do

Du möchtest deinem Webprojekt eine ganz besondere und vor allem persönliche Note verpassen? Dann ist „Nothing you could do“ die perfekte Font für dich.

fonts.google.com/specimen/Nothing+You+Could+Do

Schriftart Italiana

Eine Schrift, die ihre Wurzeln in der Kunst des schönen Schreibens hat. Sie eignet sich – ähnlich wie Abril Fatface – sehr gut für die Auszeichnung von Überschriften oder plakativen Headlines.

fonts.google.com/specimen/Italiana

Schriftart Space Grotesk

Eine geometrische Anmutung und liebevolle Details. Das zeichnet die Space Grotesk aus. Fünf Schnitte lassen das Herz eines jeden Grafikers höher springen. Space Grotesk eignet sich wunderbar für Überschriften und Auszeichnungen. Sie besitzt einen einzigartigen, technischen Charakter und ist in jedem Fall ein Hingucker.

fonts.google.com/specimen/Space+Grotesk

Schriften auf Websites, das musst du beachten

Um es kurz zu machen: einen ganzen Haufen. Du musst dir aber nur merken, dass du, sobald du an der Schrift einen Wert veränderst, immer die anderen Werte prüfen und angleichen musst. Wenn du diese Regel befolgst, steht deiner Website und den gut leserlichen Texten nichts mehr im Weg.

Solltest du dennoch Probleme haben, dann darfst du uns gerne kontaktieren. Wir helfen dir weiter und lieben es über Typografie zu schnacken.