Typografie im Webdesign: Teil 1 – Die wichtigsten Begriffe kurz erklärt

Elmastudio Artikel Thumbnail

Typografie im Webdesign. Dazu fällt mir vor allem ein Schlagwort ein: Lesbarkeit (oder auf engl. Readability).
Ich habe mich in letzter Zeit viel mit dem Thema Lesbarkeit im Internet aus­ein­ander gesetzt. Vor allem, da wir bei Elmastudio aktuell an einem neuen Projekt, spe­ziell für ältere Leser arbeiten. Bei einem Zielpublikum »50plus«, spielt die Lesbarkeit des Inhalts natür­lich eine beson­ders große Rolle. Ich habe eine kleine Serie, rund ums Thema Typografie im Web zusammen gestellt. Und hier kommt auch schon der erste Teil:

Typografie im Webdesign - Teil 1

Die wich­tigsten Begriffe kurz erklärt

h1 bis h6 – die Headlines

Mit den Tags h1 (für die Hauptüberschrift deiner Webseite), h2 für die Unterüberschrift usw. kannst du eine klare Hierarchie deiner Über­schriften fest­legen. Übri­gens lesen auch Suchmaschinen die Wichtigkeit deiner Inhalte anhand der h-Tags ab.

P (Paragraph) – der Fließtext

Den Fließtext deines Layouts kommt in den p-Tag.
z.B. <p>Hier kommt dein Text rein.</p>

Line-Height

Den Zeilenabstand zwi­schen ein­zelnen Textzeilen nennt man im Webdesign Line-Height. Für die Lesbarkeit eines Textes ist dieser Zeilenabstand sehr wichtig. Ist der zu gering, wirkt der Text gequetscht. Ist der Zeilenabstand zu groß, werden die ein­zelnen Zeilen zu unab­hän­gigen Elementen und es kann kein ange­nehmer Lesefluss entstehen.

Letter Spacing

Letter Spacing ist der Abstand zwi­schen den ein­zelnen Buchstaben eines Wortes. Genau wie beim Zeilenabstand spielt Letter Spacing eine große Rolle bei der Lesbarkeit.

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ür­liche Weise, von Ende der einen Zeile, zum Anfang der nächsten folgen können.

Margin

Margins sind die Außenränder eines Elements zu seinem Nachbarelement. Oder bei zwei inein­ander ver­schach­telten Elementen: Die Außenränder zu seinem »Elternelement«.

Padding

Padding dagegen ist der Leerraum zwi­schen dem Inhalt eines Elements und seinem eigenen Elementrand z.B. der Leeraum zwi­schen dem Text in einem Element und dem Elementrand.

Der Unterschied zwi­schen Margin und Padding erklärt sich am besten in einer Grafik.

Margins und Padding
Pixel (px)

Pixel und EMs sind Einheiten der Schriftgröße im Webdesign. Gibst du deine Schriftgröße (font-size) in Pixeln an, wird die Schriftgröße, unab­hängig von der Bildschirmgröße angezeigt.

EM

Im Gegensatz zu Pixeln ist die Einheit EM abhängig von anderen Schriftelementen auf einer Webseite. Wenn diese nir­gends in Pixeln bestimmt sind, ori­en­tiert sich 1em an den jewei­ligen Bildschirmeinstellungen (meis­tens sind diese stan­dard­mäßig auf 16 Pixel gestellt. 1em ist dann also = 16px).

Soweit erstmal zu den wich­tigsten Typografie-Begriffen im Webdesign. Ich hoffe, ich habe dir mit meiner Liste, schon ein biss­chen weiter helfen können.

Falls dir noch wei­tere wich­tige Begriffe ein­fallen, oder du eine Frage zu den oben bespro­chenen Begriffen hast, schreibt doch ein­fach einen Kommentar.

2 Kommentare

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*


Top