Typografie – Webdesign für Anfänger #1

Da vieler meiner aktiven Blog-Leser sehr interessiert an Webdesign sind, habe ich mir gedacht, dass ich für euch in nächster Zeit erstmal ein paar Artikel über Grundlegende Dinge im Webdesign schreiben werde. Heute fangen wir mal mit der Typografie an. Diese trägt im Web hohe Priorität. … Hoffentlich gefällt euch mein erstes Tutorial dieser Art.

   

Was ist Typografie?

Unter Typografie versteht man die Gestaltung und optimale Lesbarkeit (auf engl. Readability) von Texten.
 

Typografie ist nicht gleich Typografie

Vielleicht kennst du Typografie bereits aus dem Print-Bereich, dazu solltest du aber wissen, dass es hierzu einige Unterschiede gibt.

 

Grundbegriffe

Ich habe mir auch die Mühe gemacht und die wichtigsten Begriffe, CSS- und HTML-Tags gesammelt, mit denen man als Webdesigner viel zu tun hat.
HTML- und CSS-Tags?: Keine Sorge. Wenn dir das noch nichts sagt, ich werde in nächster Zeit noch viele weitere Anleitungen, Tutorials zu diesen Themen schreiben.

 

Überschriften (Headlines)

Mit den Überschriften-Tag h1 bis h6 kannst du dir sozusagen eine klare Hierarchie aufstellen. H1 ist die Hauptüberschrift deiner Webseite, H2 für die Unterüberschrift usw, … Damit finden sich deine Besucher schneller auf deiner Seite zurecht. Viele Suchmaschinen lesen die Wichtigkeit deiner Inhalte anhand der h-Tags ab.

 

Absätze (p)

Absätze bzw. Fließtexte kommen in einen p-Tag. (p steht für Paragraph)

 

Zeilenabstand – Line-Hight

Im Webdesign nennt man den Zeilenabstand Line-Hight, dieser ist für die Lesbarkeit eines Textes sehr wichtig. Ist der Zeilenabstand zu gering, wirkt der Text gequetscht. Ist der Zeilenabstand zu groß, werden die einzelnen Zeilen zu unabhängigen Elementen und es kann kein angenehmer Lesefluss entstehen.

 

Zeichenabstand – Letter Spacing

Diese CSS-Eigenschaft ist für den Abstand zwischen den einzelnen Buchstaben und Zeichen. Hier ist es ebenfalls wichtig.

 

Zeilenlänge – Line Length

Die Line Length bestimmt die Zeilenlänge eines Textes. Eine Zeile sollte weder zu kurz, noch zu lang sein. Der Leser sollte auf natürliche Weise, von Ende der einen Zeile, zum Anfang der nächsten folgen können.

  

Regeln für Webtexte

 

Scanbare Texte (scannable text)

Webtexte werden großteils überflogen bzw. vom Auge abgescannt, als in einem Buch richtig gelesen. Einige Punkte die wir dabei beachten sollten:

  • Der Text sollte nicht zu lange sein.
  • Zeilenabstände gliedern den Text.
  • Auflistungen lassen sich leicht lesen.
  • Schlüsselwörter kannst du durch Farbe, Fett oder Kursiv hervorheben.
  • Unterstrichene Wörter weisen auf Links hin.

 

Bilder

Lockere deine Inhalte zwischendurch immer wieder mit Bildern auf.
 

Struktur

Trenne deine Texte: Nutze Trennlinien, farbige Hintergründe, usw. … um deine Seite besser zu strukturieren.
 

Fokus-Elemente

Gestalte deine Seite aufregender indem du ein paar Fokus-Elemente wie Buttons, Bilder, Grafiken oder Icons verwendest.

  
Diesen Artikel werde ich immer wieder mal aktualisieren und erweitern. Solltest du irgendetwas nicht verstanden haben, kannst du gerne einen Kommentar hinterlassen oder mir eine Mail schicken.

1 KOMMENTARE

  1. Tommy
    Februar 20, 2014 19:36 Antworten

    Hey super 🙂
    Freu mich schon auf das nächste Tutorial

    mfg
    Tommy

Antworten