Hallo und HerzlichWillk ommen bei der Usability AcaDemy! I c H bi n Vanessa und werde e u ch heute etwas üBer die TYpo grafie erzählen.

Du hattest Probleme dabei den Text zu lesen? Keine Sorge da bist du nicht die einzige Person. Das hängt damit zusammen, dass die Schrift die Augen ziemlich überanstrengt und die Abstände zwischendurch viel zu groß sind. Also im groben lässt sich sagen, die Typografie hat im hohen Bogen versagt. Doch was ist eigentlich Typografie? Darauf gehe ich noch etwas genauer ein.

Was ist Typografie?

„Typografie ist die Kunst, richtige Abstände und Proportionen für Texte zu finden.Vornehmlich Ziel der Typografie ist dabei eine lesefreundliche Textgestaltung zu finden.“

-C.D. Khazaeli, Crashkurs Typo und Layout (2005), S. 70

Sehr interessant, aber was bedeutet das übersetzt? Einfach gesagt, Typografie ist das Erscheinungsbild von Text. Die eine Aufgabe der Typografie ist es die Lesbarkeit eines Textes zu erhöhen, damit der Inhalt verständlich rüberkommt und die andere, die Botschaft des Textes zu untermalen. Dies kann durch gut durchdachte Proportionen, Schriftarten, Schriftgrößen und Farben für den Text erreicht werden. Wichtig hierbei ist noch zwischen Mikro -und Makrotypografie zu unterscheiden.

Was ist der Unterschied zwischen Mikrotypografie und Makrotypografie?

Mikrotypografie

Mikrotypografie oder auch Detailtypografie genannt, befasst sich mit den Feinheiten des Schriftsatzes eines Layouts. Somit ist diese für die Optik und die Lesbarkeit zuständig. Zu Mikrotypografie gehören folgende Aspekte, wie die Laufweite, diese beschreibt den Abstand zwischen einzelnen Buchstaben. Des Weiteren sind die Spationierung, der horizontale Abstand zwischen einzelnen Zeichen, und die Ligaturen, Verbindung zweier oder mehrerer Buchstaben zu einem einzigen, ein Bestandteil. Genauso gehören die Wortabstände, Schriftarten und richtige Zeichensetzung dazu.

Makrotypografie

Die Makrotypografie beschäftigt sich mit dem Layout der Druck- oder Webseite. Hier werden unter anderem das Seitenformat, der Satzspiegel, aber auch Schriftgröße, Zeilenabstand oder die Verwendung und Platzierung von grafischen Elementen bestimmt. Wichtig hierbei ist es das Verhältnis zwischen bedruckter und unbedruckter Fläche zu beachten, damit es nicht zu überladen wirkt.

Wie beeinflusst sie uns im Alltag? Wie wirken Schriften auf uns?

Typografie begegnet uns überall im Alltag. Die Müsliverpackung verrät uns ihren Inhalt, das Ausgangsschild wo es rausgeht und das Straßenschild wo es hingeht. All das nehmen wir unbewusst aus unserer Umgebung wahr und beeinflusst uns. Egal ob es die Wahl der Schriftart, der Satz der Buchstaben oder die Verwendung von Satzzeichen ist. Dabei kommen wir auch auf die User Experience zu sprechen. Den Begriff kennen wir bereits aus dem Artikel „Usability und User Experience: Was ist der Unterschied?“. Wenn uns ein Logo oder Schriftzug eines Kalenders nicht anspricht, werden wir ihn nicht kaufen, vielleicht verbinden wir auch unterbewusst etwas mit genau dieser Schriftart, dass wir nicht mögen. Deshalb kann das Gestaltungsmittel Schrift nicht nicht auf uns wirken.

Typografie, Kalligrafie, Lettering – Was ist der Unterschied?

Da ich im oberen Teil bereits Typografie erklärt habe, werde ich hier nur noch kurz auf die anderen beiden Arten eingehen.

Lettering

Kurz gesagt ist Lettering die Kunst, Buchstaben und Schriftzügen zu zeichnen. Hierbei steht die Gestaltung von Wörtern, Buchstaben oder Sätze im Vordergrund. Dabei sind keine Grenzen gesetzt, ob verschiedene Schriftstile, verschiedene Formen, Verschnörkelungen oder Groß- und Kleinbuchstaben.

Kalligrafie

Kalligrafie ist die hohe Kunst der Schönschrift. Dabei übt man so lange einzelne Buchstaben zu schreiben und auf die Linienführung zu achten, bis man sie perfekt ausüben kann.

Typografie im Web – worauf du achten solltest

Die Typografie im Web hat sich sehr weiterentwickelt. Wir können endlich Webfonts (lizenz- bzw. kostenfrei und kostenpflichtige Schriftarten) verwenden und müssen nicht mehr die Standardschriftarten wie Verdana, Tahoma oder Arial. Dennoch müssen wir bei der Auswahl einiges beachten, wie zum Beispiel die verschiedenen Endgeräte. Somit sollte die Typografie auf Smartphones, Tablets oder Monitoren gut lesbar sein. Wie du dies erreichen kannst, erzähle ich dir.

Wähle immer eine gut lesbare Schrift! Dabei musst du dich nicht immer nach deinem Corporate Design richten, da manche Schriften nicht im Web funktionieren, wie sie es im Print tun würden. Schriften mit starken Serifen funktionieren dafür gut. Für Headlines kannst du auch speziellere Schriftarten wählen, aber dennoch auf die Lesbarkeit achten und bei Fließtexten solltest du hauptsächlich auf die Lesbarkeit achten.

Definiere für dich selbst H1-Hx und den Fließtext! Dabei solltest du festlegen wie die Schriftart & -schnitt; Schriftgröße; Zeilenabstand, bzw. Line Hight und Frabe sein sollte. H1 (größte Überschrift) sollte nur einmal gesetzt werden, wegen der SEO.

Achte auf eine visuelle Hierarchie! Setze deutliche Absätze zwischen verschiedenen Elementen, zum Beispiel durch Zwischenüberschriften, damit der Leser nicht von Informationen überflutet wird.

Verzichte auf manuelle Umbrüche! Denn im Web werden Wörter nicht automatisch getrennt, somit entstehen durch manuelle sehr unschöne und mehrere Umbrüche hintereinander.

Ich hoffe, ich konnte euch einen kleinen Überblick über die Typografie verschaffen und ihr könnt die kleinen Tipps für eure Webseite umsetzen.