TYPOGRAFIE

Allgemeine Informationen

In diesem Kapitel werden die wichtigsten Grundlagen zur Web-Typografie behandelt, welche für eine optimale Lesbarkeit eingehalten werden müssen. Im Unterschied zum Printdesign, in welchem die Makro- und Mikrotypografie bearbeitet werden kann, kann im Webdesign ausschliesslich die Makrotypografie bearbeitet werden. Zudem ist der Umbruch im Webdesign fluid. Das heisst, dass sich der Umbruch dem Endgerät anpasst. Auf folgende Themen wird in diesem Kapitel eingegangen:

Fonts

Es gibt viele Schriften, welche für eine Webseite benutzt werden können. Unterschieden wird zwischen Default Fonts und Webfonts. Sobald die Entscheidung gefällt wurde, muss man die jeweilige Vorgehensweise der Einbindung berücksichtigen.

DEFAULT FONTS

Default Fonts sind Standard-Schriften, welche auf allen Computern vorinstalliert sind. Die Schriften können immer geladen werden. Folgend ein kleines Beispiel:

p { font-family: "verdana", arial, sans-serif }

Für die Webseite wurde die Schrift «verdana» definiert. Wenn diese auf dem Computer nicht vorhanden ist, wird auf die Schrift «arial» zurückgegriffen. Wenn die Schrift «arial» auch nicht vorhanden ist, wird zu guter Letzt die Schrift in «sans-serif» angezeigt.

WEBFONTS

Unter Webfonts werden Schriften verstanden, welche online verfügbar sind. Damit ein Webfont optimal genutzt werden kann und möglichst kein Problem auftaucht, muss der ganze Zeichensatz der gewählten Schrift vorhanden sein. Die Einbindung vom Webfont kann über zwei Arten erfolgen.

1. Webfonts können über Typekit, Typothek oder Google Fonts eingebunden werden.

2. OTF oder TTF Fonts können auf den Server geladen werden und in der Webseite eingebunden werden.

Für die Webseite wurde die Schrift «verdana» definiert. Wenn diese auf dem Computer nicht vorhanden ist, wird auf die Schrift «arial» zurückgegriffen. Wenn die Schrift «arial» auch nicht vorhanden ist, wird zu guten Letzt die Schrift in «sans-serif» angezeigt.

Textstruktur

Definierte HTML-Tags geben eine klare Inhalthierarchie an. Mit ihnen kann ein ordentlicher Aufbau eingehalten werden. Für die Titelformate werden die HTML-Tags «H1 bis H6» verwendet. Die Grundschrift verwendet den Tag «p».

Schriftgrösse

Im Allgemeinen gilt: klare Grössenunterschiede pro Schriftwahl sind sehr wichtig für die Lesbarkeit. Im Web ist die Standardschriftgrösse 16px. Der klassische Lauftext hat eine Grösse von 16px bis 20px.
Die Schriftgrössen können in unterschiedlichen Einheiten angegeben werden:

• Pixel (px)
• Point (pt.)
• Prozent (%)
• em
• rem

EM und REM sind in proportionalen Verhältnissen definiert und sind daher ideal für eine responsive Webseite.

Makrotypografie

Im Web kann man Makrotypografie vornehmen. Was alles genau möglich ist, kann der untenstehenden Tabelle entnommen werden.