Profi-Homepage-Webdesign

Die 10 goldenen Regeln
der Homepage-Typografie

Die Kunst „Schrift zu arrangieren“ damit Sprache optimal präsentiert wird – das ist Typografie. Welche Regeln Sie bei der Schriftgestaltung Ihrer Homepage beachten müssen, lesen Sie hier.

Typografie – Eine jahrhundertealte Wissenschaft

Vom griechischen typos (Figur/Gestalt) und graphein (Schreiben) abgeleitet, ist die Typografie schon seit Jahrhunderten das wichtigste Gestaltungselement für Sprache. Dabei haben sich die Grundsätze, nach denen Schrift gestaltet wird, auch im digitalen Zeitalter kaum verändert. Denn die bildliche Präsentation von Sprache muss sich immer an bestimmte Prinzipien halten – an die 10 goldenen Regeln der Typografie:

Blogbeitrag-Homepage-Typografie-Beitragsbild

© fotolia.com: Rawpixel.com

Regel 1: Gute Lesbarkeit
Das hervorstechendste Merkmal einer guten Typografie ist deren barrierefreie Lesbarkeit. Dabei gilt die Faustregel:

Je schneller der Leser einen Text lesen kann, desto besser
ist dessen Typografie.

Maßgeblich für ein optimales Leseerlebnis sind also die einzelnen Textelemente. Sie bilden als Ziffern, Buchstaben, Satzzeichen und Zeilen den Textkörper, der als Gesamtbild folgenden Kriterien gerecht werden muss:

 

  • Der Leser liest nicht Buchstabe für Buchstabe, sondern springt mittels unregelmäßiger Augenbewegungen von einem Wortbild zum nächsten.
  • Der Textkörper darf gerade bei Online-Inhalten nicht zu lang sein und sollte durch Bilder, Grafiken und Aufzählungen optisch aufgelockert werden.
  • Die Zeilenlänge muss ohne Kopfbewegung auf den ersten Blick erfassbar sein.
Typo Grafik 1

Regel 2: Korrekter Einsatz von Satzzeichen
Die wichtigsten Satzzeichen sind zwar auf den ersten Blick Punkt und Komma, doch auch den Anführungszeichen, Binde-, Gedanken- und Trennstrichen kommen große Bedeutung zu. Denn sie gliedern den Text logisch, heben einzelne Passagen optisch hervor und tragen damit zur Übersichtlichkeit bei. Doch das funktioniert nur dann, wenn diese Satzzeichen auch korrekt gesetzt werden:

Anführungszeichen
Sie rahmen im Deutschen ein Wort oder eine Textpassage ein, beginnen unten und enden oben. Die Faustregel dazu lautet:

Typo Grafiken Anfuehrungszeichen

Alternativ können auch Guillements gesetzt werden:

Typo Grafiken Guillements

Sowohl „Akzent- und Anführungsstriche“ als auch geschlossene <> entsprechen nicht der deutschen Rechtschreibung und sollten daher nicht verwendet werden.

Bindestriche
Als verbindendes Textelement benötigen Bindestriche gerade in Online-Texten keine Leerzeichen, außer es folgt ein Bindewort:
Friedrich-Ebert-Straße
Friedrich- und Ebert-Straße

Gedankenstriche
Sie brauchen Platz, da sie Einschübe und Ergänzendes zum Text beisteuern. Richtige Verwendungsbeispiele wären:
Mit – mehr oder weniger – gutem Einsatz gespielt.
Außerdem werden Gedankenstriche bei Zeitraumangaben (1999 – 2010), Wortgruppen (Mutter – Kind – Vater) und in Aufzählungen verwendet.

Trennstriche
Gerade in Online-Texten sollten – soweit es möglich ist – keine Trennstriche zum Einsatz kommen. Dies kann zu sinnhaften Verwirrungen führen, wie folgendes Beispiel belegt:

Typo Grafiken Trennstriche

Weitere Verwirrung stiften Trennstriche, wenn sie in Überschriften, Abkürzungen und über Seitengrenzen hinweg Verwendung finden.

Regel 3: Optimale Zeilengestaltung
Ein gut lesbarer Text weist stets einen idealen Zeilenabstand auf. Gerade in Online-Texten ist dies sehr wichtig, da die Bildschirmauflösung, die Displaygröße und auch die Farbstufe die Definition des optimalen Zeilenabstands maßgeblich mitbestimmen. Der Zeilenabstand umfasst den Abstand zwischen den Grundlinien zweier übereinanderliegender Zeilen und muss folgenden Kriterien genügen:

  • Je länger die Zeilen eines Textes sind, desto breiter muss auch der Zeilenabstand ausfallen.
  • Der Zeilenabstand ist immer um ein Fünftel (120 %) größer als der Abstand zwischen den Buchstaben. Wenn also die Schriftgröße 10 pt ist, dann läge der ideale Zeilenabstand bei 12 pt.
  • Je nach Schriftart (insbesondere serifenlosen Schriften) kann der Abstand aber auch bei bis zu 150 % liegen.
Typo Grafik 2

In Teil 2 der Artikelserie „Die 10 goldenen Regeln der Homepage-Typografie“ erfahren Sie Interessantes zu Schriftsätzen und Schriftarten und lernen, wie Sie diese erfolgreich auf Ihrer Homepage einsetzen.

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

Please leave this field empty.

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

Please leave this field empty.

Neueste Beiträge

Neuestes Projekt