Überblick über Typografie-Grundlagen

Um die grundlegendste Erklärung zu verwenden, ist Typografie die Gestaltung und Verwendung von Schriftarten als Kommunikationsmittel. Viele Menschen glauben, dass die Typografie mit Gutenberg und der Entwicklung des beweglichen Typs begonnen hat, aber die Typografie geht noch viel weiter zurück. Dieser Designzweig hat seine Wurzeln eigentlich in handschriftlichen Letterforms.

Typografie umfasst alles von der Kalligraphie bis hin zum digitalen Typus, den wir heute auf Webseiten aller Art sehen. Zur Kunst der Typografie gehören auch Schriftgestalter, die neue Buchstabenformen erstellen, die dann in Schriftdateien umgewandelt werden, die andere Entwürfe für ihre Arbeit verwenden können, von gedruckten Werken bis zu den zuvor genannten Websites. So unterschiedlich diese Arbeiten auch sein mögen, die Grundlagen der Typografie unterstützen sie alle.

Die Elemente der Typografie

Wenn Sie jemals mit einem Webdesigner gesprochen haben, der in seiner Arbeit Typografie verwendet, haben Sie wahrscheinlich die Begriffe "Schrift" und / oder "Schrift" gehört. Viele Menschen verwenden diese beiden Ausdrücke austauschbar, es gibt jedoch einige Unterschiede zwischen diesen beiden Elementen.

Als Schrift bezeichnet man eine Familie von Schriftarten (wie Helvetica Regular, Helvetica Italic, Helvetica Black und Helvetica Bold). Alle verschiedenen Versionen von Helvetica bilden die gesamte Schrift.

Schriftart ist der Begriff, der verwendet wird, wenn sich jemand nur auf eine Gewichtung oder einen Stil innerhalb dieser Familie bezieht (z. B. Helvetica Bold). So viele Schriften bestehen aus einer Anzahl einzelner Schriften, die alle ähnlich und verwandt sind, sich aber in gewisser Weise unterscheiden. Einige Schriftarten enthalten möglicherweise nur eine einzige Schrift, während andere zahlreiche Variationen der Buchstabenformen enthalten können, aus denen die Schriftarten bestehen.

Wenn dies verwirrend erscheint, machen Sie sich keine Sorgen, wenn jemand kein Typografieexperte ist, wird er wahrscheinlich den Begriff "Schrift" verwenden, unabhängig davon, welchen dieser Begriffe er wirklich meint, und sogar viele professionelle Designer verwenden diese beiden Begriffe austauschbar. Wenn Sie nicht mit einem reinen Schriftdesigner über die Mechanik des Handwerks sprechen, sind Sie wahrscheinlich ziemlich sicher, welche der beiden Begriffe Sie bevorzugen. Das heißt, wenn Sie die Unterscheidung verstehen und die richtigen Begriffe richtig verwenden können, ist das nie eine schlechte Sache!

Schriftarten

Manchmal als "generische Schriftfamilien" bezeichnet, handelt es sich dabei um große Gruppierungen von Schriftarten, die auf einer Reihe generischer Klassifizierungen basieren, auf die verschiedene Schriftarten zutreffen. Auf Webseiten gibt es sechs Arten von Schriftklassifizierungen, die Sie wahrscheinlich sehen werden:

• Serif
• Serifenlos
• Skript
• Monospaced
• Kursiv
• Fantasie

Es gibt auch eine Reihe anderer Schriftklassifizierungen, die von diesen abgeleitet sind. Zum Beispiel sind "Slab Serif" -Schriften den Serifen ähnlich, aber alle weisen ein erkennbares Design mit dicken, klobigen Serifen auf den Buchstabenformen auf. Serifen und Sans-Serifen sind die zwei am häufigsten verwendeten Schriftarten, die auf den meisten Websites verwendet werden.

Anatomie der Schrift

Jede Schrift besteht aus verschiedenen Elementen, die sie von anderen Schriftarten unterscheiden, was als Schriftanatomie bezeichnet wird. Wenn Sie nicht speziell auf das Schriftdesign eingehen und brandneue Schriftarten erstellen möchten, müssen Webdesigner im Allgemeinen nur die Grundlagen der Schrifttypologie kennen.

Grundsätzlich sind die Elemente der Anatomie der Schrift, auf die Sie achten sollten, "Obergrenze" und "x-Höhe" sowie "Abseilen" und "Aufstieg".

Kappe und x-Höhe sind die Höhe der Großbuchstaben in der Schrift und die Höhe des Buchstabens x. Hier erfahren Sie, wie groß die größten Buchstaben sein werden und wie groß die Kleinbuchstaben sind. Alle Schriftarten werden basierend auf diesen beiden Eigenschaften bemessen.

Ab- und Aufsteiger sind die Teile von Buchstaben, die unter und über der x-Höhenlinie liegen. Dies bezieht sich normalerweise auf Kleinbuchstaben. Zum Beispiel hat der Buchstabe "b" eine Steigung (das Stück, das vom Buchstaben "nach oben hängt"), während der Buchstabe "p" einen Abstieg hat (die Teile, die vom Buchstaben "nach unten" abtauchen).

Abstand um Buchstaben

Es gibt verschiedene Anpassungen zwischen und um Buchstaben, die die Typografie beeinflussen. Digitale Schriften werden mit vielen dieser Merkmale erstellt, und auf Websites können wir diese Aspekte der Schrift nur eingeschränkt ändern. Dies ist oft eine gute Sache, da die standardmäßige Anzeige von Schriftarten normalerweise vorzuziehen ist.

• Kerning: Der horizontale Abstand zwischen einzelnen Buchstaben
• Verfolgung: Der Abstand zwischen Buchstabengruppen
• Führend: Vertikaler Abstand zwischen Zeilen des Typs (dies wird in Webseiten als Zeilenhöhe bezeichnet)
• Messen: Die Länge von Textzeilen
• Ausrichtung: Text visuell links, rechts, zentriert oder ausgerichtet platzieren
• Ligaturen: Die Buchstaben sind so nah beieinander, dass ihre Anatomie kombiniert wird, wobei ein Buchstabe im Wesentlichen in einen anderen fließt

Weitere Typografieelemente

Typografie ist mehr als nur die verwendeten Schriften und das Leerzeichen um sie herum. Es gibt auch einige andere Dinge, die Sie beim Erstellen eines guten typografischen Systems für jedes Design beachten sollten:

"Silbentrennung" ist das Hinzufügen eines Bindestrichs (-) am Zeilenende, um Lesbarkeitsproblemen vorzubeugen oder die Rechtfertigung zu verbessern. Die meisten Webdesigner werden zwar häufig in gedruckten Dokumenten verwendet, ignorieren jedoch die Silbentrennung und verwenden sie nicht für ihre Arbeit, da sie von Webbrowsern nicht automatisch verarbeitet werden.

"Lappen" ist die ungleichmäßige vertikale Kante eines Textblocks. Wenn Sie auf Typografie achten, sollten Sie Ihre Textblöcke als Ganzes betrachten, um sicherzustellen, dass der Lappen keinen Einfluss auf das Design hat.Wenn der Lappen zu zackig oder uneben ist, kann dies die Lesbarkeit des Textblocks beeinträchtigen und ihn ablenken. Dies wird vom Browser automatisch in Bezug auf die Art der Zeilenumbrüche vom Browser behandelt.

Ein einzelnes Wort am Ende einer Spalte ist eine Witwe, und wenn es am Anfang einer neuen Spalte steht, ist es eine Waise. "Witwen" und "Waisen" sehen schlecht aus und können schwer zu lesen sein.

Die perfekte Anzeige Ihrer Textzeilen in einem Webbrowser ist eine zermürbende Angelegenheit, insbesondere wenn Sie eine responsive Website und unterschiedliche Anzeigen für unterschiedliche Bildschirmgrößen haben. Ihr Ziel sollte darin bestehen, die Site in verschiedenen Größen zu überprüfen, um das bestmögliche Erscheinungsbild zu erzielen, wobei Sie in bestimmten Fällen akzeptieren können, dass Ihr Inhalt Fenster, Waisen oder andere nicht ideale Anzeigen enthält. Ihr Ziel sollte es sein, diese Aspekte des Designs eines Typs zu minimieren und dabei realistisch zu sein, dass Sie nicht für jede Bildschirmgröße und Anzeige Perfektion erreichen können.

Schritte zum Überprüfen Ihrer Typografie

1. Wählen Sie die Schriftarten sorgfältig aus und prüfen Sie die Anatomie des Typs sowie die Art der Schriftart.
2. Wenn Sie den Entwurf mit Platzhaltertext erstellen, genehmigen Sie den endgültigen Entwurf erst, wenn Sie den echten Text im Entwurf gesehen haben.
3. Beachten Sie die kleinen Details der Typografie wie Bindestriche und Bindestriche.
4. Sehen Sie sich jeden Textblock an, als ob er keine Wörter enthalten würde. Welche Formen macht der Text auf der Seite? Stellen Sie sicher, dass diese Formen das gesamte Seitendesign nach vorne tragen.