Profi-Homepage-Webdesign

Die 10 goldenen Regeln
der Homepage-Typografie (II)

Haben Sie schon einmal vom Flattersatz gehört? Oder sagt Ihnen der Axialsatz etwas? Wenn nicht, dann lesen Sie in Teil 2 unserer Artikelserie zur Homepage-Typografie, welche Geheimnisse sich dahinter verbergen.

Die optische Darstellung von Texten

In Teil I der Artikelserie wurde auf die Normen guter Typografien eingegangen. Der zweite Teil behandelt die optische Darstellung von Textkörpern und welche emotionale Wirkung diese auf den Betrachter ausüben.

Blogbeitrag-Homepage-Typografie-Teil-II-Beitragsbild

© fotolia.com: PictureP.

Regel 4: Schriftsatzarten
Die optische Gestaltung von Texten ist sehr wichtig, um einen barrierefreien Lesefluss zu gewährleisten. Ein wichtiger Bestandteil dessen ist der Schriftsatz, also die Form und Länge der Zeilen. Dabei wird zwischen drei verschiedenen Schriftsatzarten unterschieden, dem Flatter-, Block- und Axialsatz. Während der Blocksatz zwar allgemein bekannt ist, werden Flattersatz (linksbündig) und Axialsatz (zentriert) jedoch öfter genutzt.

Ein Flattersatz ist jedoch nur dann optimal, wenn er ordentlich „flattert.“ Das heißt, die Zeilenenden wechseln regelmäßig zwischen lang und kurz ab.

Blogbeitrag Typografie Flattersatz

Die Verwendung von Blocksatz macht im Online-Bereich nur in bestimmten Fällen Sinn, wie z. B. wenn auf gleicher Höhe ein weiteres Gestaltungselement platziert, eine optische Abgrenzung zum Umgebungstext gesucht wird oder der Text insgesamt nicht länger als 10 Zeilen ist.

Ein Blocksatz ist nur dann angenehm zu lesen, wenn:
– er zwischen 45 und 75 Satzzeichen lang ist.
– er keine optischen Löcher aufweist (hohe Wortabstände)
– und er nicht zu viele Trennungen aufweist.

Blogbeitrag Typografie Blocksatz

Ein Axialsatz (zentriert) kommt kaum in Fließtexten zum Einsatz, dafür ist er für das lesende Auge zu unregelmäßig. Aber um Passagen, Zitate oder Einschübe hervorzuheben ist er ideal. Wichtig ist: Der Umbruch sollte immer händisch nachkorrigiert werden.

Typo Grafiken Axialsatz

Regel 5: Welche Schriftart ist die passende?
Es gibt unzählige Schriftarten und sie alle erzählen eine ganz bestimmte Geschichte. Denn Schriftarten wecken Emotionen und kreieren ein thematisches Umfeld, was an folgendem Beispiel sehr deutlich wird:

Typo Grafiken Historische Schriftart

historische Schriftart, passend für Urkunden

Typo Grafiken Western Schriftart

Wuchtige Westernschriftart

Typo Grafiken Plakatschrift

unregelmäßig gestaltete Plakatschrift

Typo Grafiken Serifengepraegte Schriftart

Serifengeprägte (Serife = Buchstabenhäckchen) Zeitungsschrift

Typo Grafiken Schnoerkellose Schriftart

schnörkellose Schriftart, ideal für digitale Texte

Je nach Zielgruppe, Branche und Art der Homepage muss hier fein abgewogen werden, welche Schriftart letztlich zur eigenen Homepage passt. Dabei muss jedoch stets auf die gute digitale Lesbarkeit der gewählten Schrift geachtet werden.

Regel 6: Auszeichnung von Textpassagen
Es gibt viele schöne und ansprechende Schriftarten, sodass so mancher Webmaster versucht ist, auch für die Hervorhebung/Auszeichnung von einzelnen Passagen einfach eine andere Schriftart zu wählen. Doch hier ist Vorsicht angesagt: Eine zu bunte Mischung unterschiedlicher Schriftarten ergibt eine stilistische und formale Unübersichtlichkeit, die den Leser schon auf den ersten Blick wieder in die Flucht schlägt. Besser ist es, folgende Tipps für die Auszeichnung zu nutzen:

  • Kursive Schrift ist im Internet generell schwer lesbar, daher wird in digitalen Texten meist die Auszeichnung mittels Fettdruck bevorzugt.
  • Als Mittel der zweiten Wahl gilt hingegen die Verwendung einer anderen Schriftfarbe.
  • Kursive Schrift im Netz ist erst ab einer Schriftgröße von 15 px gut lesbar.
  • Da in Internettexten auch Linkverweise durch Unterstriche hervorgehoben werden, ist diese Form der Auszeichnung im digitalen Bereich verpönt.

Regel 7: Die richtige Schriftgröße
Für die Schriftgröße gilt dasselbe Prinzip, wie für die Schriftarten: Weniger ist mehr! Das heißt, die Schriftgröße sollte innerhalb eines Textes nicht zu oft wechseln und wenn ja, dann ausschließlich zwischen Überschriften und Fließtext. Der Einschub größerer oder kleinerer Textblöcke und Wörter wirkt unseriös und trägt zur Unübersichtlichkeit bei.

Das Zauberwort bei der Schriftgrößengestaltung lautet daher: Regelmäßigkeit. Wo regelmäßig zwischen großen und kleineren Schriften gewechselt wird, entsteht eine Struktur, die der Leser schnell verinnerlichen kann. Folgendes Beispiel veranschaulicht diese Problematik nochmals:

Im Beispieltext rechts wurden die Einschübe durch verschiedene Schriftgrößen optisch hervorgehoben dies wirkt auf den ersten Blick unstrukturiert und sollte vermieden werden. Achten Sie auf ein harmonisches Textbild.

 

Da jedes Medium/Display Schrift anders darstellt, ist auch die Schriftgröße maßgeblich davon abhängig. Folgende Schriftgrößenarten gelten hier als empfohlene Richtlinien für bestimmte Medien:

Konsultationsgröße
= Schriftgröße 6 – 8 pt (Digital: 6 – 8 px)

Ideal für gedruckte Sammelwerke, wie Lexika, Telefonbuch, Wörterbuch, sowie für Bildunterschriften im Online-Bereich.

Typo Grafiken Kein harmonisches Schriftbild

Lesegröße = Schriftgröße 9 – 14 pt (Digital: 10 – 14 px)
Normgröße für Druckmedien, wie Zeitungen, Zeitschriften, Artikel und Dokumente, sowie für digitale Texte.

Schau-/Displaygröße = 16 pt und mehr (Digital: ab 15 px)
Geeignet für Plakate, PowerPoint-Folien, Arbeitsblätter, Head- und Sublines, etc.

Im dritten und letzten Teil der Artikelserie zur Typografie im Online-Bereich gehen wir den Fragen nach, ob und inwiefern Schriften überhaupt kombiniert werden dürfen und welchen Regeln die ideale Smartphone-Typografie eigentlich folgt.

Kategorien

Profi Homepage Konstanz Icon

Erfolgreiche Homepage: Tipps für mehr Erfolg

Profi Homepage Konstanz Icon

Marketing: Möglichkeiten Ihre Kunden zu erreichen

Profi Homepage Konstanz Icon

Design: Moderne und funktionale Gestaltung

Technik

Technik:
Informationen rund um die Technik

Thema vorschlagen

Vorschlag

Kontakt

Bitte lasse dieses Feld leer.

Keine Artikel mehr verpassen

Melden Sie sich zu unserem Newsletter an und erhalten Sie regelmäßig die neuesten Beiträge sowie Tipps und Tricks rund um Online-Themen direkt in Ihr Postfach.

Kontakt

Bitte lasse dieses Feld leer.

Neueste Beiträge

Neuestes Projekt