Typografie-Design für Anfänger: Ein Guide zu Regeln und Begriffen - 99designs (2024)

Typografie-Design ist allgegenwärtig. Ist dir schon jemals der Zeilenabstand bei der Zutatenliste auf der Rückseite einer Packung Kekse aufgefallen? Oder die Form der Zahlen auf einem Preisschild oder die Dicke der Buchstaben auf Straßenschildern? Dies sind vielleicht nicht deine ersten Anlaufstellen für Inspiration, aber sie sind Teil unsers täglichen Lebens.

Tatsächlich sind wir ständig von Buchstaben umgeben, egal wohin wir schauen. All diese Quellen bieten uns unterschiedliche Perspektiven und Erkenntnisse und zeigen uns die endlosen Wege, auf denen Typografie verwendet werden kann.

Bevor wir uns genauer mit Typgrafie-Design beschäftigen, lass uns einen Blick darauf werfen, was Typografie ist und woher sie stammt.

Eine kurze Geschichte der Typografie
—

Was ist Typografie-Design? Kurz gesagt ist Typografie-Design die Kunst, eine Botschaft in einer gut lesbaren und optisch ansprechenden Komposition zu arrangieren. Sie ist ein wesentliches Designelement. Typografie verlangt vom Designer nicht, eigene Buchstabenformen zu kreieren, sondern mit bereits vorhandenen Schriftarten zu arbeiten. Dieser Prozess erfordert vom Designer, eine Reihe Entscheidungen zu treffen, beispielsweise die richtige Schriftart auszuwählen, die richtige Schriftgröße, die Unterschneidung und den Zeilenabstand anzupassen und sich ein Layout zu überlegen, das Sinn ergibt.

Dies kann man einfach mithilfe von Laptops, Computern und sogar Telefonen machen. Dank der Technik werden Typografie und ihre Regeln jeden Tag von einer neuen Generation an Designern gemeistert, die sich Buchstaben auf eine Weise vorstellen, die wir uns noch vor wenigen Jahren überhaupt nicht vorstellen konnten.

Aber es ging nicht immer um Technik. Bewegliche Lettern wurden im frühen 15. Jahrhundert von Johannes Gutenberg erfunden und revolutionierten die Typografie, indem sie die Massenproduktion von Druckerzeugnissen ermöglichten. Doch schon bevor Drucktechniken existierten, schufen Menschen Bücher oder schriftbasierte Poster. Nur dass sie diese von Hand schufen, mit jeder Menge Geduld und Hingabe. Die Menschen kreierten schon immer schriftliche Botschaften. Das Fehlen von Papier und richtigen Schreibwerkzeugen hat sie dabei nicht aufgehalten. Antike Zivilisationen ritzten ihre Glyphen einfach in Stein oder Holz.

Wenn wir uns die Evolution der Typografie und all ihrer Werkzeuge und Techniken ansehen, sehen wir einen immerwährenden Kampf zwischen Handarbeit und Maschinenfertigung, zwischen organisch und geometrisch. Heutzutage führt das radikale Trennen dieser zwei Welten, ebenso wie das harmonische Verschmelzen ebendieser, zu neuer und ungewöhnlicher Typografie.

Begriffe des Typografie-Designs, die du kennen musst
—

Es gibt ein paar Grundregeln und Designbegriffe, die du kennen musst, bevor du dich mit Typografie beschäftigst. Hier sind die wichtigsten:

Stil

Buchstaben kommen in vielen verschiedenen Formen und Stilen daher. Sie zu kategorisieren kann schwierig sein, da viele Faktoren bedacht werden müssen: Ihr Aussehen, ihre Inspiration, die Zeit, in der sie entstanden sind, und ihre Verwendung. Der Einfachheit halber beziehen wir uns häufig auf drei große Stilkategorien und unterteilen diese in kleinere Kategorien.

Serifenschriften

Die ersten Serifenschriften waren inspiriert von traditioneller Kalligrafie und werdenHumanistoderOld Stylegenannt. Dieser Stil zeichnet sich durch weiche und abgerundete Formen und leicht unterschiedliche Stärken aus.

Ungefähr Mitte des 18. Jahrhunderts entstand eine neue Art der Serifenschrift, die wir heuteBarock-Antiqua nennen. Dieser Stil markiert den Übergang zwischen Humanist und Moderne und kombiniert daher Eigenschaften dieser beiden Stile.

Gegen Ende des 18. und Anfang des 19. Jahrhunderts entstand ein radikalerer Stil der Serifenschrift: die Moderne. Wir erkennen diesen Stil am starken Gewichtskontrast und den dünnen, geraden Serifen.

Mit Entstehung der Werbung im 19. Jahrhundert kamen dieEgyptienne, auchSlab Serifgenannt, auf. Dank ihrer auffälligen Erscheinung und schweren Serifen waren sie der bevorzugte Stil für Werbebotschaften.

Serifenlose Schriften (Sans Serif)

Serifenlose Schriften gewannen im 20. Jahrhundert an Beliebtheit und wurden ebenfalls durch Kalligrafie beeinflusst, daher nennen wir diese ebenfallsHumanist. Wir erkennen eine leichte Schwankung beim Gewicht und eine insgesamt warme Stimmung.

Mitte der 1900er Jahre wurde Helvetica entwickelt, welche den Maßstab für serifenlose Barock-Antiqua legte. Diese Buchstaben sind uniform, starrer als zuvor und ihnen fehlt das handgemachte Element.

GeometrischeSans-Serif-Schriften sind das Equivalent zu modernen Serifenschriften. Sie bauen auf geometrischen Formen auf (der Buchstabe O ist ein perfekter Kreis) und die Spitzen der Buchstaben A oder N sind spitz und kräftig.

Kursiv

Script-Schriften imitieren handschriftliche kalligrafische Stile und können sowohl elegant und förmlich als auch chaotisch und leichtgängig sein.

Pinsel-Schriften ähneln Script-Schriften sehr stark, sind aber von Brushlettering inspiriert. Das macht sie auffälliger und weniger elegant.

Und schließlich hat derGothic- oder Blackletter-Stil traditionell Filzstift-Kalligrafie in seinem Stamm. Der Stil entstand aus der Karolingschen Minuskel und gegen Mitte des 12. Jahrhunderts entstand ein neuer Stil mit spitzen, geraden und eckigen Linien.

Schriftart vs. Schriftfamilie

Ich bin mir sicher, dass jeder schon mal Schriftart und Schriftfamilie verwechselt hat. Ich auf jeden Fall!

Eine Schriftfamilieumfasst das visuelle Design der Buchstabenformen und besteht aus mehreren Schriftformaten. Beim Metall-Schriftsetzen werden physische Buchstaben als Schriftart bezeichnet und diese enthält alle Buchstaben, Zahlen und Satzzeichen als einzelnes Element. In der digitalen Welt ist die Schriftart die Software, die wir installieren und nutzen.

Eine komplette Schriftfamilie kann unzählige Stile beinhalten: von super dünn bis super dick und von super eng bis super breit, sowohl in Normalschrift als auch in kursiv.

Doch halt, das ist noch nicht alles. Manche Schriftarten haben Kapitälchen (Großbuchstaben, die nur bis zur x-Linie gehen), Majuskelziffern und Minuskelziffern (Zahlen, die über die Grundlinie und x-Linie hinaus gehen und sich besser in Fließtext einfügen) und in manchen Fällen sogar zusätzlich alternative Buchstaben. Ganz schön viel, oder?

Anatomie

Die Anatomie der Buchstaben ist ziemlich komplex. Jedes kleine Detail und Element hat seinen eigenen Begriff.

Hier sind ein paar:

Und hier sind ein paar Satzzeichen mit ihren Namen und wie man sie richtig anwendet:

Typografische Illusionen erkennen
—

Buchstaben sind nicht nur so toll, weil sie so viele Emotionen ausdrücken, sondern weil sie auch unser Auge austricksen können.

Schauen wir uns mal ein paar optische Täuschungen im Typografie-Design an:

Illusion 1

Das S sieht aus wie ein perfekt symmetrischer Buchstabe, richtig? Nun, dem ist nicht so. Drehe ihn einfach um 180 Grad und du wirst sehen, dass die Oberseite tatsächlich kleiner ist als die Unterseite. Dadurch sieht es stabiler und sicherer aus.

Illusion 2

Obwohl es so aussieht, als hätten alle Buchstaben dieselbe Höhe, sind runde Formen tatsächlich ein wenig höher. Der Schnittpunkt des O zwischen Grundlinie und Oberlänge beispielsweise ist eigentlich nur ein einzelner Punkt. Dagegen berührt der Schnittpunkt des Buchstaben E diese Linien mit seiner gesamten Fläche. Da beide Buchstaben genau genommen dieselbe Größe haben, wirken sie unverhältnismäßig. Wir müssen das O ein bisschen größer machen, damit es optisch gleich aussieht.

Illusion 3

Damit der Buchstabe O symmetrisch und vom Gewicht her einheitlich aussieht, müssen wir dafür sorgen, dass das Gewicht nicht einheitlich ist. Drehe den Buchstaben O um 90 Grad und du wirst sehen, dass beide Seiten ein bisschen dicker sind als die Ober- und Unterseite.

Illusion 4

Da wir gerade dabei sind, Buchstaben zu drehen, lass uns diesen Trick doch mal beim Buchstaben A versuchen. Wenn du ihn horizontal drehst wirst du sehen, dass dieser scheinbar symmetrische Buchstabe eigentlich nicht symmetrisch ist. Bei manchen Buchstaben muss man ein wenig schummeln, selbst wenn das bedeutet, gegen die mathematische Regel zu verstoßen, damit sie optisch ansprechend aussehen.

Illusion 5

Wenn du irgendetwas über Kalligrafie weißt, dann weißt du, dass Aufstriche dünn sind und Abstriche dick und der Querstrich wieder dünn. Diese Regel muss selbst bei den einfachsten und geometrischsten Buchstaben angewendet werden, beispielsweise beim T.

Illusion 6

Man könnte denken, die Querstriche in den Buchstaben E und A finden sich beispielsweise in der Mitte der Buchstaben. Nicht ganz. Damit der Buchstabe gut ausbalanciert aussieht, muss er ein wenig verrückt werden. Indem du den Buchstaben umdrehst, kannst du klar erkennen, dass der Querstrich nicht ganz mittig ist.

Illusion 7

Die Buchstaben B, P und R sind Geschwisterformen, bei der die eine aus der anderen entstand. Das bedeutet allerdings nicht, dass sie alle dieselben Proportionen haben. Der Bogen des R muss ein bisschen dünner sein, damit er nicht viel zu dick wird, wenn wir ihn mit dem Bein verbinden. Dagegen muss der obere Bogen des B ein wenig kleiner sein als der untere, damit der Buchstabe stabiler wirkt.

Die Regeln im Typografie-Design
—

Ja, ich weiß. Regeln sind dazu da, um gebrochen zu werden, aber um die Regeln so zu brechen, dass es einem Designer nicht die Tränen in die Augen treibt, musst du sie zuerst kennen.

Wenn wir mit Schrift arbeiten und Paragrafen auf einer Seite arrangieren, müssen wir ein paar Sachen beachten und sicherstellen, dass das, was wir designen, lesbar und deutlich ist. Es sei denn natürlich, du kreierst ein abstraktes, experimentelles typografisches Poster und bist auf Chaos und Anarchie aus. Wenn es das ist, was du willst, nur zu. Aber wenn du mit langen Textkörpern arbeitest, die nicht nur dem Betrachter ins Auge springen, sondern auch eine Botschaft senden sollen, musst du bei jeder Entscheidung, die du triffst, behutsam vorgehen.

Ausrichtung

Die Ausrichtung bezieht sich auf die Anordnung eines Textkörpers auf einer Seite, genauer gesagt die Ausrichtung seiner Ränder auf dieser Seite. Es gibt 4 Arten von Ausrichtung, aber denk daran, dass keine weniger richtig als die andere ist. Sie sehen lediglich unterschiedlich aus und haben einen unterschiedlichen Vibe.

Linksbündig

Dies ist wahrscheinlich die häufigste Ausrichtung, da sie dem natürlichen Fluss der meisten Sprachen folgt. Wenn man diese Ausrichtung verwendet, muss man darauf achten, eine gut ausbalancierte rechte Seite zu erzeugen, mit Zeilenlängen, die sich natürlich anfühlen.

Achte darauf, einzelne Wörter auf neuen Zeilen zu vermeiden. Diese werden „Witwen“ genannt und sehen sehr traurig aus.

Rechtsbündig

Das Gegenteil von linksbündiger Ausrichtung. Rechtsbündige Ausrichtung verläuft entgegen dem Fluss der meisten Sprachen, was du durchaus zu deinem Vorteil nutzen kannst. Sei dir allerdings bewusst, dass diese Ausrichtung einen ungewöhnlichen Look erzeugt und bei langen Abschnitten das Auge ermüden kann. Um einen sauberen rechten Rand zu bekommen, solltest du Satzenden oder Kommata am Ende der Zeilen vermeiden.

Zentriert

Wenn es schlecht gemacht wird, kann eine zentrierte Ausrichtung eher langweilig und chaotisch aussehen. Wenn man allerdings aufmerksam vorgeht, kann sie ein elegantes und doch lebhaftes Gefühl erzeugen. Der Schlüssel zum Erfolg liegt darin, mit den Zeilenlängen zu spielen und gleichzeitig eine Balance zu wahren.

Blocksatz

Obwohl er modern und sauber aussehen kann, wenn man ihn richtig anwendet, kann der Blocksatz schnell in die Hose gehen. Da die Wörter die ganze Zeile füllen müssen, können ungünstige Räume zwischen ihnen entstehen. Achte darauf, dass alles gut ausgeglichen ist, und spiele wenn nötig mit der Textgröße, der Länge des Textfeldes und der Unterschneidung.

Laufweite

Das Anpassen des Raumes zwischen den Buchstaben nennt man Laufweitenveränderung. In den meisten Fällen nutzt man eine positive Laufweitenveränderung statt einer negativen, um eine offenere und luftigere Komposition zu erreichen.

Je größer der Text ist, umso größer wird der Raum zwischen den Buchstaben und daher muss die Laufweite abnehmen. Wenn der Text kleiner wird, müssen wir die Laufweite erhöhen.

Die Laufweite zu erhöhen kann schwierig werden, da wir es häufig ein wenig übertreiben. Ein Tipp lautet, daran zu denken, dass Großbuchstaben mehr Laufweitenveränderung ermöglichen als Kleinbuchstaben.

Unterschneidung

Unterschneidung ist die Veränderung des Raumes zwischen einzelnen Buchstaben. Auch wenn meistens eine Laufweitenveränderung ausreicht, müssen wir manchmal den Raum zwischen den einzelnen Buchstaben anpassen. Diese „unterschneidbaren“ Lücken tauchen meistens um Buchstaben wie A, W, V und T auf.

Schau mal, hier ist ein kleines Spiel, um zu testen, wie gut du in Unterschneidung bist!

Wenn wir mit gut konstruierten Schriftarten arbeiten, braucht es nicht viel Unterschneidung. Falls doch, können wir optische Unterschneidung nutzen (die automatisch von dem Programm vorgenommen wird, mit dem wir arbeiten) oder metrische Unterschneidung (die die Unterschneidung nutzt, die der Designer beim Designen der Schriftart vorgesehen hat). Wir können auch alles manuell machen (und unsere Intuition und Erfahrung nutzen).

Analysiere deine Buchstaben und wende die Methode an, die am besten für dich passt. Denke auch daran, dass nur weil optische Unterschneidung für eine bestimmte Schriftart funktioniert, das nicht bedeutet, dass sie in allen Situationen die beste Wahl ist.

Zeilendurchschuss

Der Abstand zwischen zwei Textzeilen nennt sich Zeilendurchschuss. Wenn du ihn anpasst, kannst du mit der Textur und Farbe der Absätze spielen und so einen optischen Hingucker und Hierarchie erzeugen. Die optimale Größe des Zeilendurchschusses hängt von verschiedenen Dingen ab, beispielsweise der Anzahl der Wörter im Verhältnis zum nutzbaren Platz, der Anzeigegröße oder einfach der Stimmung, auf die du aus bist.

Hierarchie

Hierarchie hilft uns, visuelles Interesse zu erzeugen und den Blick des Betrachters entlang der Seite zu führen, wodurch es leichter und intuitiver wird, einen Text zu lesen. Der offensichtlichste und einfachste Weg um Hierarchie zu erzeugen besteht darin, unsere Informationen in unterschiedlichen Größen zu schreiben.

Wir können auch eine interessante Hierarchie erzeugen, indem wir einen Buchstaben oder den Zeilendurchschuss verändern oder die Größe des Textes anpassen. Wir können zudem die verwendeten Stile oder Farben mischen oder Sonderzeichen oder unterschiedliche Ausrichtungen und Layouts verwenden.

Wie wir unseren Text arrangieren – besonders welche Teile wir in den Vordergrund rücken – hängt stark davon ab, für was wir den Text vorbereiten: Print oder Digital. Wenn es für Print ist, handelt es sich um eine Zeitung mit viel Text, ein Magazincover mit einem Haupttitel und einigen kürzeren, die etwas über den Inhalt des Magazins verraten, oder ein Poster mit einem Titel und ein paar Infos wie Datum und Ort? Wenn es für das Internet ist, welches Ziel hat deine Seite dann: Wie lang ist der Text, den wir anzeigen müssen, und für wen designen wir ihn?

Bei Hierarchie geht es allerdings nicht immer darum, bestimmte Textstellen hervorzuheben. Wir können Hierarchie auch nutzen, um optisch interessante Kompositionen wie Muster und Formen zu kreieren, indem wir die Stärken, Farben und Größen verändern.

An all diese Dinge zu denken hilft uns dabei, eine ordentliche Hierarchie zu konstruieren, ohne den Leser zu überfordern.

Raster

Eines der wichtigsten Elemente, wenn man mit Textkörpern arbeitet, ist das Raster. Dieses kann sowohl simpel als auch komplex sein. Wenn wir Raster verwenden, rahmen wir im Grunde die auf einer Seite dargestellte Information ein. Dies gibt uns mehr Kontrolle darüber, wie wir die Elemente auf unserer Seite arrangieren. Bei der richtigen Verwendung von Rastern können wir Kompositionen kreieren, die den Blick des Betrachters lenken und die Informationen so leicht verständlich machen.

Wie bei allem anderen auch können wir entweder mit einfachen Rastern arbeiten oder uns total austoben und und komplizierte und komplexe Raster überlegen.

Eine weitere wichtige Sache, die du beim Arrangieren von Informationen auf einer Seite im Hinterkopf behalten solltest, ist Weißraum. Stell dich mit ihm gut und halte ihn jederzeit in deiner Nähe.

Viele haben das Verlangen, jede Ecke einer Seite mit Text oder Bildern zu füllen, doch viel Weißraum ist in der Regel eine gute Sache. Es lässt der Information Raum zum Atmen, macht die Komposition luftiger und hilft dem Leser, sich zurechtzufinden.

Die Kraft der Typografie
—

Typografie-Design kann großen Einfluss auf deine Botschaft haben. Wenn es richtig genutzt wird – eine gute Kombination aus Stil, Größe, Hierarchie und Unterschneidung – gibt es nichts, was du mit ihm nicht ausdrücken kannst. Von formalen und eleganten Seiten bis hin zu dynamischen und umwerfenden Kompositionen kannst du alles tun, was du dir nur vorstellen kannst.

Wenn du die Regeln und Fakten über Buchstaben kennst und die verschiedenen Wege, wie sie genutzt werden können, kannst du dich auf endlose Weise ausdrücken. Diese Regeln sind nur eine Anleitung. Ich empfehle dir, sie alle zu brechen! Lerne, experimentiere, vergiss, was du gelernt hast, mache Fehler und beginne von vorn. Wenn du das machst, wirst du deinen ganz eigenen Stil entwickeln.

Du möchtest mehr über Typografie lernen? Schau dir die neuesten Schrift-Trends, die besten Schriftkombinationen und die besten Logoschriften an.