Schriftgestaltung für Webseiten

0 | 13390 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Schriftgestaltung für Webseiten" mit Ihrem Wissen!

Für die Hervorhebung und Auszeichnung von Text in Webseiten stehen bedeutend mehr Möglichkeiten zur Verfügung, als Text fett oder kursiv zu gestalten. Dieser Artikel geht auf die Feinheiten der professionellen Schrifthervorhebung in Webseiten ein und zeigt, wie Sie Text ansprechend auszeichnen.

Anzeige Hier werben

Dabei geht es nicht um die Grundlagen der Schriftgestaltung wie Zeilenbreite oder Lesbarkeit, sondern lediglich um die Hervorhebung von Textteilen, um das schnellere Erfassen durch den Webseitenbesucher zu ermöglichen.

Wofür Textauszeichnung?

Die Auszeichnung von Text dient vielen Bereichen. Ein großer Bereich stellt dabei die Usability dar, sprich wie gut sich Ihre Webseite für Ihre Besucher benutzen lässt, jedoch lassen sich mit guter Textgestaltung auch noch viele weitere Punkte abdecken wie:

  • Aufmerksamkeit des Betrachters gewinnen
  • Strukturierung von Text
  • Auflockerung von Fließtext
  • Einpassen in das Seitendesign
  • Gruppieren von Elementen
  • Leserlichkeit für den Benutzer steigern

Freiraum

Der wohl wichtigste Bereich der Textauszeichnung ist die Nutzung von Freiräumen. Freie Bereiche in Texten zeigen dem Leser wo ein Text oder Absatz beginnt und wo dieser endet.

Zusätzlich lassen durch Freiräume, bzw. das Entfernen von Freiräumen Gruppierungen schaffen, wodurch Besucher der Webseite verschiedene Objekte als zusammengehörig Wahrnehmen. Die wissenschaftliche Grundlage für diese Auffassung bildet dabei das Gesetz der Nähe, welches Teil der Gestaltgesetze der Wahrnehmung ist.

Bild zu Schriftgestaltung für Webseiten
Zwei unterschiedliche Arten der Aufteilung

Im oberen grünen Bereich wird der Textbereich als ein Element wahrgenommen. Im unteren Bereich nimmt man jedoch zwei Bereiche wahr und erkennt so, dass es sich hierbei um zwei verschiedene Meldungen handelt. Mit Leerraum lässt sich also gut strukturieren.

Realisierung in CSS

Folgende CSS-Eigenschaften bieten sich an um Freiräume in Webseiten zu gestalten:

Schriftgröße

Ein einfaches Mittel zur Auszeichnung von Text in Webseiten ist die Schriftgröße. Elemente die größer erscheinen, erhalten beim Betrachter eine höhere Aufmerksamkeit und werden auf Grund der größeren Flächenbeanspruchung bevorzugt wahrgenommen.

Bild zu Schriftgestaltung für Webseiten
Textauszeichnung durch Schriftgröße

Farbe

Farbliche Hervorhebung

Farbe kann in auf viele verschiedene Arten eingesetzt werden, weil wir mit Farbe immer auch bestimmte Erfahrungen verbinden. So ist die Farbe Rot eine Signalfarbe, welche für Gefahr, Warnung oder Verbot steht und ihr daher von uns besondere Aufmerksamkeit geschenkt wird.

Bild zu Schriftgestaltung für Webseiten
Nutzen von Signalfarben

Hintergrundfarbe

Zusätzlich zur Änderung der Schriftfarbe haben Sie noch die Möglichkeit die Hintergrundfarbe in einzelnen Schriftelementen zu ändern. Achten Sie jedoch hierbei, wie auch bei der Schriftfarbe, darauf, dass der User möglicherweise denken könnte es handele sich hierbei um einen Link. Arbeiten Sie dezent!

Bild zu Schriftgestaltung für Webseiten
Anpassen der Hintergrundfarbe - www.tanyamerone.com

Bedenken Sie aber, dass dieses Stilmittel oft für die Auszeichnung von "Tags" (web-tags) verwendet wird, und daher zu Verwirrung führen kann.

Gruppieren durch Farbe

Farbe kann zusätzlich zur Gruppierung von Textelement genutzt werden. So erkennt der Besucher den Zusammenhang von einzelnen Textelement deutlicher und der Beginn, sowie das Ende eines Textbereichs wird ersichtlich.

Bild zu Schriftgestaltung für Webseiten
Gruppierung durch Farbe

Gewichtung durch Deckkraft

Möchte man bestimmten Element auf der Webseite verschiedene Gewichtungen verpassen, so ist eine gute Möglichkeit dafür die Deckkraft des entsprechenden Elements zu reduzieren. Durch solch ein Ausgrauen tritt dieses Element deutlich in den Hintergrund und wird vom Benutzer eher als unwichtig oder optional empfunden.

Bild zu Schriftgestaltung für Webseiten
Gewichtung durch Transparenz

Fett

Durch die Möglichkeit Teile von Texten fett zu gestalten, lassen sich besondere Passagen sehr gut hervorheben. Sie sollten jedoch achten fette Schrift nicht zu stark einzusetzen. Setzen Sie Akzente und heben Sie einzelne Wörter hervor, gestalten Sie jedoch nie einen kompletten Satz fett, dadurch verliert das Stilmittel an Kraft und der Text ist für den Leser schwierig zu lesen.

Bild zu Schriftgestaltung für Webseiten
Fette Schriften zur Hervorhebung

Kursiv

Diese Auszeichnungsmöglichkeit stellt eine dezente Art der Hervorhebung dar. Sie sollten jedoch bei der Nutzung von schrägem Text vorsichtig sein. Am Monitor lässt sich kursive Schrift deutlich schlechter erkennen als normale Schrift und stoppt somit den Lesefluß und verringern die Lesbarkeit des Textes. Nutzen Sie daher, wenn überhaupt, kursive Auszeichnung nur für einzelne Wörter.

Bild zu Schriftgestaltung für Webseiten
Kursive Schrift im Einsatz

Unterstrichen

Textpassagen oder Wörter durch Unterstreichen hervorzuheben ist auf Webseiten nicht zu empfehlen. Unterstreichungen im Netz weisen auf einen Hyperlink hin und verwirren die Besucher nur, wenn sie dort dann keinen vorfinden.

Großschrift und Kapitälchen

Großbuchstaben und Kapitälchen sind eine weitere Möglichkeiten einzelne Wörter in Fließtexten (z.B. Namen) hervorzuheben. Sie können auch zur Menügestaltung verwendet werden (siehe Bild). Auch hier gilt: Nur für einzelne Wörter verwenden.

Bild zu Schriftgestaltung für Webseiten
Kapitälchen

Verschiedene Schriftarten

Ein Stilmittel zur Textauszeichnung, welches besonders durch den Web 2.0 Trend vorangetrieben wurde ist die Nutzung von unterschiedlichen Schriftarten auf einer Seite. Dadurch lassen sich Textbereiche nochmals gut voneinander differenzieren. Dabei wird meistens eine serifenlose mit einer Serifenschrift kombiniert.

Es sollten hier aber nicht zu viele verschiedene Schriftarten benutzt werden, da dies die Webseite chaotisch wirken lässt. Mehr als zwei verschiedene Schriftarten sind nicht zu empfehlen (vor allem wenn z.B. in einem Logo noch eine weitere zur Verwendung kommt).

Bild zu Schriftgestaltung für Webseiten
Hervorhebung durch unterschiedliche Schriften

Sparsame Anwendung

Die Merkmale sollten konsistent und sparsam verwendet werden. Werden Hervorhebungen zu viel verwendet (z.B. Fettschrift mehrer Absätze Fließtext) verlieren Sie ihre Funktion und erschweren zusätzlich die Lesbarkeit.

Kombinieren

Lernen Sie die verschiedenen Gestaltungsmittel zur Formatierung von Text sinnvoll und effektiv einzusetzen, ihre Besucher werden es Ihnen danken. Textlich gut formatierte Webseiten lassen sich deutlich schneller erfassen und die gesuchten Inhalte herausfiltern. Unterhalb finden Sie noch die Webseite www.happycog.com, welche verschiedene Schriftkontraste optimal einsetzt.

Bild zu Schriftgestaltung für Webseiten
Guter Einsatz von Schriftkontrasten - www.happycog.com

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Schriftgestaltung für Webseiten" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Schriftgestaltung für Webseiten" hier bearbeiten.

Mitarbeiter