Schriften: das Auge dankt


Tipps für den Einsatz von Schriften auf Ihrer Website

Gut formatierte Webtexte kommen besser an. Sie erhöhen die Aufmerksamkeit und Besucher bleiben länger auf Ihrer Seite, die Lesbarkeit steigt deutlich. Folgende Punkte sollten Sie für den Schrifteinsatz beachten:

 

Kontrast
Der Leser freut sich über den Unterschied: Je dunkler die Schriftfarbe, desto heller der Hintergrund – und umgekehrt.

 

Schrift hervorheben

Ob fett, kursiv oder unterstrichen: Es gibt Möglichkeiten, bestimmten Passagen Ihres Textes mehr Gewicht zu verleihen. Aber gehen Sie mit der Schriftauszeichnung sparsam um. Heben Sie nur das hervor, was wirklich wichtig ist.

 

Schriftfarbe

Passen Sie die Schriftfarbe der Logo- bzw. Firmenfarbe an. Auch wenn Sie keine Logo- bzw. Firmenfarbe festgelegt haben, entscheiden Sie sich für eine Fließtextfarbe und ein bis zwei Überschriftenfarben.

 

Vermeiden sie ein stechendes Rot oder Blau und verwenden Sie keine Neonfarben. 

 

Schriftgröße

Wählen Sie für den Haupttext des Contexts eine Schriftgröße zwischen 14 und 16px für die Desktop-Darstellung. Auf gar keinen Fall weniger – und auch mit dem „mehr“ bitte vorsichtig umgehen. Eine zu kleine Schrift bereitet Probleme beim Lesen, mit einer zu großen Schrift verschwenden Sie Platz. Auch bei Überschriften sind 40px (in Abhängigkeit vom Webfont) meistens mehr als genug.

 

Schriftart

Als JIMDO-User steht Ihnen eine beachtliche Menge an Schriften zur Verfügung. Mehr als 800 Fonts werden über die Google Fonts Schnittstelle bereitgestellt - wenn Sie diese Schriften nicht kennen oder wissen, wie man hier methodisch vorgeht, verliert man sich schnell in der Fülle der Möglichkeiten.

 

Verwenden Sie am besten nur eine einzige oder maximal zwei Schriftarten für die komplette Website, einschließlich der Überschriften. Zur Hervorhebung wählen Sie einen verwandten Schnitt aus der gleichen Schriftart (z.B. Fett oder Kursiv) oder einen größeren Schriftgrad. Dies gilt vor allem für Überschriften, Untertitel, Bildunterschriften und Fußnoten.

 

Schrift nach Textinhalt auswählen

Bevor Sie sich für eine Schrift entscheiden, probieren Sie mehrere aus und lassen Sie sie auf sich wirken. Woran denken Sie im ersten Moment, wenn Sie die Schrift betrachten? Ihre Kunden werden wahrscheinlich ähnliche Assoziationen haben. Deshalb ist es wichtig zu erkennen, ob der Charakter einer Schrift zum Thema passt.

 

Für Fließtexte empfehle ich serifenlose Schriftarten wie z.B. Arial, Helvetica, Trebuchet, Verdana, Lucida Grande oder Droid Sans.

 

Es geht um Information, um Lesbarkeit und um Klarheit, verschnörkelte Schriften sind da fehl am Platz. Schließlich kommt es auf das Thema an. 

 

 

 

Bei einer coolen Website über neueste Modetrends und Arts wirken traditionelle Schriften wohl eher angestaubt. Der Bank, dem Antiquariat oder der Versicherung können hingegen auch Serifenschriften wie z.B. Georgia, Times New Roman, Droid Serif, Vollkorn gut zu Gesicht stehen.

 

Zeilenabstand

Eine optimale Lesbarkeit ist gewährleistet, wenn der Abstand zwischen den Zeilen rund 20% der Schriftgröße beträgt, oder eine "line-height" von 140 - 150% gewählt wird.

 

Aufzählungen

Verwenden Sie Aufzählungen immer dann, wenn es wirklich Sinn macht. Satzzeichen wie Striche oder Punkte (bullet points) sowie ein eingerückter Absatz sorgen für eine bessere Lesbarkeit.

 

Formatierung

Achten Sie auf eine möglichst einheitliche Formatierung für die gesamte Webseite. Setzen Sie Fließtext und Überschriften immer in derselben Schriftart, Schriftgröße und -auszeichnung sollten nicht variieren. Verwenden Sie nicht mehr als 40-60 Zeichen pro Zeile.

 

Textausrichtung

Verwenden Sie im Web möglichst keinen Block- oder mittig gesetzten Fließtext. Die Lesbarkeit wird stark beeinträchtig und die responsive Darstellung kann brutal darunter leiden. Nutzen Sie mittige Textausrichtung mehr für kleine Passagen oder Zitate, aber niemals für komplette Texte. Ihr Online- Publikum wird es Ihnen danken.

 

Kopfgrafiken

Gemäß den vorangegangenen Erläuterungen macht es nur dann Sinn Kopfgrafiken einzusetzen, wenn diese

  • in einem thematischen Verhältnis zum Inhalt stehen
  • nicht mit starken (oder animierten) Hintergrundbildern konkurrieren
  • nicht mit starken oder großformatigen Inhaltsbildern konkurrieren
  • qualitativ hochwertig sind sowie die Message und den Anspruch der Webseite unterstützen

Für die Auswahl von Headerbildern bei Stockbildern wie dem beliebten shutterstock.com gibt es interessante Auswahlhilfen. Zum Beispiel den Farbfilter mit dessen Hilfe farblich zum Hauptfarbton passende Bilder angezeigt werden, z.B. Bilder zum Suchwort „Strand“, die mit dem Farbton #C98E16 harmonieren.

 

Noch einmal sei empfohlen, nicht zu viel Bild zu verwenden. Wenn auf der Hintergrund-Fotoslideshow eine farbige Webseite steht, die ein buntes Headerbild verwendet und auch mit Fotos im Inhalt nicht geizt, wird

der User schlichtweg überfordert sein. Verwenden Sie Bilder nur dort, wo sie einen informellen - und sei es ausschließlich ästhetischen - Zweck erfüllen.


Text mit freundlicher Genehmigung von Jana Kiwitt, Berlin