Marketing auf der Überholspur

22 November 2015

8 Kriterien für eine gute Webtypografie

Verfasst von | @

Webtypografie Tipps

Sie haben mit viel Aufwand Ihre Website - und Blog Inhalte auf die Probleme Ihrer Persona abgestimmt und trotzdem ist die Reichweite sehr niedrig und die Absprungrate sehr hoch? Unsere langjährige Erfahrung zeigt, dass die falsche Webtypografie eine der häufigsten Ursachen ist in diesem Zusammenhang. 

Wir haben daher 8 Kriterien zusammengestellt, die Ihnen helfen Ihre Typografie einmal genauer unter die Lupe zu nehmen und ggf. zu verbessern.

Mehr als 195 kostenlose Designvorlagen für visuelles Marketing – hier  herunterladen und für Social-Media, Infografiken und E-Mail einsetzen.

Die Hintergründe 

Eine einladende und optisch ansprechende Textgestaltung ist wichtig für den ersten Eindruck, den die Besucher von Ihrer Website bekommen. Die Typografie ist mitentscheidend für eine gute User Experience und führt dazu, dass der Besucher den Inhalt um ein Vielfaches intensiver liest und länger auf Ihrer Website bleibt.  

8 Kriterien der Webtypografie

1.  Der richtige Font 

Sollten Sie Serifenschriften oder serifenlose Schriften verwenden?

Webtypografie Tipps

Schriften bestimmen grundlegend das Aussehen einer Website. Kein Designer? Versuchen Sie es einmal mit diesen 5 Tipps, das Ergebnis wird Sie erstaunen. 

Grundsätzlich unterscheiden sich die beiden Schriftarten durch die Verwendung von „Füßchen“ – einem Querstrich, der den Buchstaben am Ende abschließt (Serife). Beliebte Serifenschriften sind z. B. Times New Roman oder Georgia, bekannte serifenlose Schriften sind z. B. Arial oder Verdana. 

Serifenschriften sind verspielter und dekorativer, die serifenlosen Schriften hingegen sind formal reduzierter und dadurch klar strukturiert. Sie sind daher auf dem Bildschirm einfacher zu lesen.

Grundsätzlich empfiehlt sich eine Kombination aus beiden Schriftarten, bei der die jeweiligen Vorteile genutzt werden, um ein angenehmes aber trotzdem aufmerksamkeitsstarkes Gesamterscheinungsbild zu schaffen. Für das passende Design auf Ihrer Website verwenden Sie am besten eine Serifenschrift für die Überschriften und eine ruhige, gut lesbare serifenlose Schrift für den Fließtext.

TIPP: Konsequente Umsetzung Ihres Corporate Design auch in der Typografie!
Verwenden Sie die in Ihrem Corporate Design festgelegte Typografie. Dies erhöht den Wiedererkennungswert bei Ihren Besuchern und zahlt in den Aufbau Ihrer Marke ein. 

2.  Die richtige Farbe

Sollten Sie hellen oder dunklen Hintergrund verwenden? 

Die Verwendung des klassischen Hell-Dunkel-Kontrasts ermöglicht das schnelle Erfassen von Texten auf dem Bildschirm. Am besten lesbar sind demnach dunkle Schriften auf hellem Untergrund. Eine hellere Schriftfarbe wirkt zwar oft edler, ein starker Lichteinfall kann aber dazu führen, dass das Lesen erschwert oder sogar ganz unmöglich wird. 


3.  Die richtige Größe

Wie stellen Sie Texthierarchien am besten dar? 

Im Allgemeinen richtet sich die Schriftgröße der Überschrift nach der Schriftgröße des Fließtextes. Um einen harmonischen und angenehmen Gesamteindruck des Schriftbildes zu erzeugen, empfehle ich ein durchschnittliches Verhältnis zwischen Überschrift und Fließtext von 2,5. Dabei sollte die Schriftgröße des Fließtextes nicht zu klein sein – der Fokus liegt auf der Lesbarkeit.

Ein Beispiel: Bei großen Bildschirmen eignet sich eine Größe von 40 Pixel für die Headline und 16 Pixel für den Fließtext.

Zur besseren Gliederung und Lesbarkeit des Textes empfehle ich Ihnen, zusätzliche Haupt- und Zwischenüberschriften – je nach Wichtigkeit/Bedeutung (Hierarchie) – in verschiedenen Größen zu verwenden. Im Web werden diese mit H1 bis Hn abgekürzt. Die H1 ist hierbei immer die Headline mit der größten Pixelanzahl, die Hn, z. B. eine Zwischenüberschrift, die mit der kleinsten Pixelanzahl.

4.  Der richtige Zeilenabstand 

Wie steigeren Sie den Lesekomfort?

Der Zeilenabstand sollte mindestens einem Wert von 1,46 (Goldener Schnitt) entsprechen. Seine Hauptaufgabe ist es dem Auge zu helfen, den Anfang der nächsten Zeile leicht zu finden. 

Zusammen mit der richtigen Zeilenlänge wird ein harmonisches Textbild erzeugt, das den Lesekomfort steigert. Dabei gilt die Faustregel: Je länger die Zeilen, desto größer der Zeilenabstand.

Die optimale Zeilenlänge wird über die Anzahl der Zeichen pro Linie definiert: 75-90 Zeichen pro Linie (je nach Bildschirmgröße). Mit dieser Formel können Sie die Werte für Zeilenhöhe und Zeilenlänge (in pixel) berechnen: 

  • Schriftgröße Fließtext x 1,46 = Zeilenhöhe
  • Zeilenhöhe x 24,9 = Zeilenlänge

5.  Die richtigen Schriftformatierungen

Wie heben Sie wichtige Textstellen hervor?

Es gibt die unterschiedlichsten Möglichkeiten, Text innerhalb eines Fließtextes hervorzuheben. Die gängigste Methode ist der Fettdruck (Bold). Andere Hervorhebungen, wie z. B. kursiv stellen oder unterstreichen, sind für die Webtypografie nicht so gut geeignet.

Bei der Bildschirmdarstellung können gerade bei kursiven Schriften (Italic) Probleme auftreten, unterstrichene Texte werden eher als Link wahrgenommen. Noch deutlicher hervorheben kann man den Link durch eine zusätzliche Farbgebung, die sich beim drüber fahren per Mouse verändert. Aufzählungszeichen werden verwendet, um komplexe Themen zu gliedern und diese daher schneller und auf einen Blick erfassbar zu machen.

6.  Der richtige Einsatz von Lücken 

Wie verschaffen Sie Ihren Leser einen schnelleren Überblick?

Verwenden Sie genügend Lücken zwischen den einzelnen Absätzen. Dies hilft dem Leser, sich zuerst einen schnellen Überblick über Inhalt und Struktur des Textes zu verschaffen, bevor er an einer beliebigenTextstelle einsteigt, um eventuell nur die für ihn relevanten Absätze des Artikels zu lesen. 

7.  Die richtige Ausrichtung  

Sollte Ihr Text linksbündig oder zentriert sein?

Wir haben gelernt, von links nach rechts zu lesen, deshalb ist die beliebteste Ausrichtung für größere Textmengen linksbündig. Silbentrennung wird am Zeilenende nicht verwendet!

Bitte verwenden Sie keinen Blocksatz! Beim linksbündigen Flattersatz laufen die Zeilenenden frei aus und helfen somit dem Auge, die neuen Zeilen leichter zu finden. Zitate oder große Headlines werden oftmals zentriert in Szene gesetzt.

8.  Die richtige Schriftgrößen für Responsive Design

Wie passen Sie die Schriftgrößen auf die unterschiedlichen Display-Breiten an?

Webtypografie Tipps

Bei Anpassungen der Schrift für unterschiedliche Bildschirmgrößen ist es notwendig darauf zu achten, dass das Verhältnis der Schriftgrade zueinander harmonisch bleibt. Laut einer Studie, die vom smashingwebmagazine 2013 durchgeführt wurde, sind folgende Durschnittswerte empfehlenswert:

Bei einer Display-Breite von 500 Pixel:

  • Zeilenhöhe: 28 px
  • Schriftgröße Fließtext: 15 px
  • Anzahl Zeichen pro Linie: 77

Bei einer Display-Breite von 700 Pixel:

  • Schriftgröße Hauptüberschrift: 36 px
  • Schriftgröße Fließtext: 15.6 px
  • Anzahl Zeichen pro Linie: 82.7

Bei einer Display-Breite von 950 Pixel:

  • Schriftgröße Hauptüberschrift: 37.9 px
  • Schriftgröße Fließtext: 16.1 px
  • Anzahl Zeichen pro Linie: 84.4

Bei einer Display-Breite von 1600 Pixel:

  • Schriftgröße Hauptüberschrift: 40.7 px
  • Schriftgröße Fließtext: 16.2 px
  • Anzahl Zeichen pro Linie: 86.8

New Call-to-action 

Themen: SEO

Abonnieren

Kommentare

Leider ist es nicht mehr möglich, Kommentare für diesen Beitrag zu hinterlassen, da die Kommentar-Funktion für ältere Beiträge deaktiviert wird. Natürlich ist uns Ihre Meinung dennoch wichtig! Schicken Sie uns einfach einen Tweet @HubSpot, um uns zu kontaktieren!

Kommentare
X

Ihre Konkurrenz beliest sich auch.

Bleiben Sie am Ball mit unseren Tipps unserer Marketing-Experten und sichern Sie sich Ihren Wissensvorsprung. Abonnieren Sie jetzt den HubSpot Marketing-Blog.