Hast du dich jemals gefragt, warum manche Designs so viel ansprechender wirken als andere? Vielleicht liegt es ja an der Typografie. Tatsächlich kann eine geschickte Verwendung von Schriftarten die Qualität deiner Arbeit erheblich steigern. Hier sind 20 praktische Tipps, die du direkt umsetzen kannst, um deine Typografie zu verbessern
Egal, ob du ein Design-Profi bist oder gerade erst anfängst—hier sind einige praktische und umsetzbare Tipps zu den Typografie Grundlagen, mit denen du deine Designs auf die nächste Stufe heben kannst.
1. Berücksichtige die Zielgruppe
Bei Typografie geht es nicht nur darum, die richtige Schriftart oder Textgröße auszuwählen, sondern auch darum, die richtige Botschaft und Emotion zu vermitteln. Deshalb ist es so wichtig, die Zielgruppe zu berücksichtigen, für die du designst.
Die von dir gewählte Schriftart kann einen großen Einfluss darauf haben, wie die Menschen dein Design wahrnehmen. Serifenlose Schriften wirken zum Beispiel modern und schlicht, während Serifenschriften eher traditionell und edel erscheinen.
Ebenso kann eine extrem große Überschrift innovativ und experimentell wirken, was ideal für ein Architekturbüro sein könnte. Für ein medizinisches Design hingegen solltest du eher bescheidene Schriftgrößen wählen.
1. Wähle professionell designte Schriftarten
Professionelle Schriftarten wurden von erfahrenen Schriftdesignern entworfen und bieten eine breite Palette von Stilen und Schriftschnitten. Sie durchlaufen eine höhere Qualitätskontrolle, um Konsistenz und Lesbarkeit auf verschiedenen Plattformen und Geräten zu gewährleisten.
Wenn du auf der Suche nach Inspiration für die Verwendung von Schriftarten bist, dann schau mal in meinen monatlichen Font Fix für Februar und März rein.
Design-Tipp: Viele professionelle Type Foundries bieten Designern kostenlose Testversionen ihrer Schriften an. Du kannst diese Möglichkeit nutzten um mit verschiedenen Schriftarten zu experimentieren.
2. Wende Hierarchie an
Um den Betrachter nicht mit zu vielen Informationen zu überfordern, braucht jedes Design eine klare Hierarchie der Informationen.
Du kannst dies zum Beispiel durch die Verwendung von unterschiedlichen Schriftgrößen, -schnitten und -farben erreichen. Auf diese Weise kannst du das Auge des Lesers lenken und die wichtigsten Informationen hervorheben.
Ich finde es toll, wie simpel und zugleich effektiv die Website von MyMind es angeht.
Design-Tipp: Frage dich beim Designen, welche Informationen der Leser als Erstes, als Zweites, Drittes … wahrnehmen soll.
3. Nuzte Grid-Systeme
Raster teilen ein Layout in Spalten und Zeilen, um einen Bezugsrahmen für die Platzierung von Inhalten zu schaffen. Sie helfen dadurch Text und Bilder einheitlich und geordnet auszurichten.
Es gibt verschiedene Arten von Rastern, wie beispielsweise:
- das Manuskript-Raster,
- das Spaltenraster,
- das modulare Raster,
- das Grundlinienraster (engl. Baseline Grid),
- und das hierarchische Raster.
Je nach Anwendung eignen sich bestimmte Arten von Rastern besser als andere. So verwendet man ein Manuskriptraster meist für Buch-Layouts, während ein Spaltenraster sich gut für Webdesigns eignet.
Design-Tipp: Nimm dir etwas Zeit und experimentiere mit verschiedenen Rastertypen, um zu schauen, welcher Typ für dein Projekt am besten geeignet ist.
5. Brich aus dem Raster aus
Ich weiß, dass ich dir gerade empfohlen habe, Raster zu verwenden. Aber jetzt möchte ich dich ermutigen, auch mal aus dem Raster auszubrechen.
Raster können ein nützliches Hilfsmittel sein, um ein strukturiertes Layout zu schaffen. Allerdings besteht die Gefahr, dass dein Design zu starr und vorhersehbar wird, wenn du dich zu sehr an das Raster hältst. Das Brechen des Rasters kann deinem Design ein überraschendes Element hinzufügen und es dynamischer und ansprechender machen.
Design-Tipp: Übertreibe nicht. Oft genügt es, ein oder zwei Elemente außerhalb des Rasters zu platzieren, um Spannung zu erzeugen.
4. Mische nicht zu viele Schriftarten miteinander
Bei der Wahl von Schriftarten für dein Design gilt oft: Weniger ist mehr. Wenn du zu viele verschiedene Schriftarten verwendest, kann dein Design schnell überladen und unprofessionell wirken. „Nicht mehr als drei“ ist eine gute Faustregel beim Kombinieren von Schriftarten.
Design-Tipp: Zu ähnliche Schriftarten harmonieren nicht miteinander. Versuche Kontrast zu erzeugen und zum Beispiel eine Serifen-Schriftart mit einer serifenlosen Schriftart zu kombinieren. In diesem Artikel findest du weitere Tipps zur Kombination von Schriftarten.
5. Nutze Kontrast
Ich habe es eben schon angedeutet: Kontrast kannst du durch die Kombination von Schriftarten erzeugen. Aber auch durch Größe, Farbe und Gewicht (bold vs. light) von Schriften. Kontrast hilft dir, eine klare Hierarchie von Informationen zu schaffen und das Auge des Lesers zu lenken.
Ein Beispiel, das mir sehr gut gefällt, stammt von der deutschen Schokoladenfirma Jokolade. Sie haben eine bunte Form unter die Typografie gelegt, um den Text hervorzuheben.
Design-Tipp: Kontrast kann natürlich nicht nur durch Typografie, sondern auch durch andere Elemente wie Form oder Bilder, geschaffen werden.
6. Nutze Weißraum
Anfänger machen oft den Fehler, Weißraum zu vernachlässigen. Aber du musst nicht jeden Zentimeter mit Text oder Bildern zu füllen—oft ist weniger mehr.
Unter Weißraum versteht man die leeren Bereiche rund um die Gestaltungselemente. Wenn du Weißraum bewusst einsetzt, kannst du ein Gefühl der Ausgewogenheit schaffen und das Auge auf die wichtigen Elemente lenken.
Ein Beispiel dafür ist die Aesop Website, die nur wenige Elemente verwendet.
Design-Tipp: Versuch einmal, alles wegzulassen, was für die Vermittlung deiner Botschaft nicht notwendig ist. Dann fang langsam an, Designelemente hinzuzufügen.
9. Vermeide reines Schwarz und Weiß
Wusstest du, dass es in der Natur kein reines Schwarz und Weiß gibt? Alles reflektiert subtile Nuancen der Farben in seiner Umgebung.
Natürlich ist Kontrast wichtig, aber besonders auf Websites kann die Verwendung von reinem Schwarztext auf einem reinweißen Hintergrund schnell anstrengend für die Augen sein.
Nimm meine Website als Beispiel. Das Schwarz, das ich verwende, hat den HEX-Code #0D0E11 und das Weiß ist #FFFEFD. Der Unterschied mag auf den ersten Blick kaum bemerkbar sein, aber er macht einen deutlichen Unterschied.
Design-Tipp: Probiere doch mal verschiedene Schattierungen und Farbtöne aus, um die perfekte Balance für dein Design zu finden. Vertrau mir, dein Publikum wird dir danken.
10. Richte Gestaltungselementen optisch aus, nicht mathematisch
Statt den Text mathematisch auszurichten, solltest du ihn optisch ausrichten. Schriftendesigner nutzen auch optische Tricks, um Buchstaben ausgewogen und angenehm für das Auge erscheinen zu lassen. Warum sollte das bei der Platzierung von Schrift anders sein? Selbst wenn etwas perfekt ausgemessen ist, fühlt es sich nicht automatisch ausgewogen an.
Schau dir diese Beispiele an, um ein besseres Gefühl dafür zu bekommen, was ich meine.
Design-Tipp: Vertraue deinem Instinkt und richte den Schrift optisch und nach Bauchgefühl aus.
11. Verwende eine Schriftskala
Eine Schriftskala kann dir helfen, die Größe von Überschriften, Zwischenüberschriften und anderen Textelementen festzulegen. Dadurch schaffst du eine visuelle Hierarchie und dein Inhalt wird leichter lesbar.
Zu Beginn legst du eine Schriftgröße für deinen Fließtext fest und nutzt dann eine bestimmte Skala, um die Größe aller anderen Elemente zu bestimmen. Beliebte Verhältnisse sind beispielsweise der Goldene Schnitt oder die modulare Skala.
Design-Tipp: Unter typescale.com findest du ein praktisches Tool, das die Schriftgrößen für dich errechnet. Aber scheue dich nicht, die Größen optisch anzupassen, wenn sie sich nicht richtig anfühlen.
12. Verwende Display-Schriftarten für Überschriften
Display-Schriften wurden speziell entwickelt, um anspruchsvoll und elegant zu wirken, was sie zur perfekten Wahl für Überschriften macht.
Mit ihren kräftigeren Zügen und aufwändigeren Details können sie deinen Entwürfen eine raffinierte Note verleihen. Achte aber darauf, dass du Display-Schriften nur für große Texte verwendest, da sie in kleineren Größen unleserlich werden.
Bei der Auswahl von Schriftarten für eine Website solltest du auch vorsichtig sein, da jede installierte Schriftart die Ladezeit der Seite verlängern kann.
Deshalb ist es wichtig, sowohl Ästhetik als auch Praktikabilität im Auge zu behalten.
Unten ist ein Beispiel für die Schriftart Freight Display Pro von Cindy Hernandez zu sehen. Fallen dir die feinen Details auf?
Design-Tipp: Display-Schriften werden in der Regel mit Display bezeichnet, können aber auch Headline, Banner, Poster oder anders heißen.
7. Pass den Zeilendurchschuss an
Der Zeilendurchschuss (engl. leading) bezeichnet den Abstand zwischen den Textzeilen. Ein geeigneter Zeilenabstand ist weder zu groß noch zu klein, um das Auge zwischen den Textzeilen zu führen und Lesbarkeit zu gewährleisten.
Der Zeilenabstand wird von verschiedenen Faktoren beeinflusst, wie der Schriftart, -größe und Zeilenlänge. Längere Zeilen erfordern in der Regel einen größeren Zeilendurchschuss als kürzere, während Überschriften tendenziell einen kleineren Zeilenabstand brauchen als Bodytext.
Design-Tipp: Ein Zeilenabstand von 1,2 bis 1,5 mal der Schriftgröße ist meist ein guter Ausgangspunkt.
14. Verwende Lead-Paragraphen
Lead-Paragraphen sind kurze, markante Zusammenfassungen, die am Anfang eines Artikels stehen. Sie sollen die Aufmerksamkeit des Lesers wecken und ihm einen schnellen Überblick über das geben, was folgt.
Lead-Paragraphen sind besonders nützlich für das Web, wo Menschen dazu neigen, Inhalte zu überfliegen. In diesem Fall kann ein Lead-Paragraphen die Leser dazu bewegen, sich eingehender mit einem Artikel zu beschäftigen, auch wenn sie wenig Zeit haben.
Außerdem können sie den Lesern helfen, Inhalte zu teilen, ohne den ganzen Artikel lesen zu müssen.
Design-Tipp: Setze Lead-Paragraphen in einer größeren Schriftgröße oder beginne sie mit Großbuchstaben oder einem Kapitälchen.
15. Verwende kontrastarme Schriftarten für Fließtext
Wenn du für Barrierefreiheit gestaltest (oder eigentlich für jeden), solltest du deinen Text so einfach lesbar wie möglich machen.
Bei Schriftarten mit hohem Strichkontrast, wie beispielsweise Bodoni, können die dünnen und feinen Striche in kleinen Größen verblassen und den Text schwer lesbar machen.
16. Verwende Schriftarten mit einer größeren X-Höhe für Fließtext
Ein weiterer Faktor, den du beachten solltest, ist auch die x-Höhe der Schriftart. Schriftarten mit einer größeren x-Höhe bieten mehr Raum für die Zwischenräume innerhalb der Buchstaben wie e und o. Das macht sie in kleineren Größen lesbarer.
Achte jedoch darauf, dass du auch keine Schriftart mit einer zu großen x-Höhe wählst. Wir lesen Wortformen und nicht Buchstabe für Buchstabe. Eine zu große x-Höhe kann es erschweren diese Formen zu erkennen.
Design-Tipp: Wähle eine Schriftart, die das Wort Text im Namen trägt, um auf Nummer sicher zu gehen.
17. Hebe Text durch Kursivschrift hervor statt Fettschrift
Viele Menschen, einschließlich einiger meiner Kunden, neigen dazu, Wörter auf ihren Websites durch fettgedruckte Schrift hervorzuheben.
Ehrlich gesagt macht mich das ganz nervös. Wenn bestimmte Wörter stark hervorgehoben werden, springen Augen des Nutzers auf der Seite hin und her und es ist schwierig, sich auf etwas zu fokussieren.
Ich würde empfehlen, stattdessen kursive Hervorhebungen zu verwenden. Dadurch wird die Betonung subtiler und der Leser kann die gesamte Botschaft ohne Ablenkungen leichter erfassen.
8. Beachte das Kerning
Beim Kerning geht es darum, die Abstände zwischen den Buchstaben anzupassen, um das Aussehen und die Lesbarkeit des Textes zu verbessern. Besonders wichtig ist dies zum Beispiel beim Logo-Design oder bei Überschriften.
Gutes Kerning führt zu einem ausgewogenen und einheitlichen Schriftbild, während schlechtes Kerning zu unschönen Abständen führen kann, die die Lesbarkeit und Ästhetik beeinträchtigen.
Design-Tipp: Wenn du deine Kerning-Skills trainieren willst, kann dieses Kerning-Spiel dir vielleicht helfen.
9. Verwende OpenType-Funktionen und -Glyphen
OpenType-Funktionen und Glyphen sind Tools, die deine Typografie schnell aufwerten können. Sie bieten eine Vielzahl von Funktionen, wie Ligaturen, alternative Zeichen und Kapitälchen.
Ligaturen sind beispielsweise Kombinationen aus zwei oder mehr Buchstaben, die nahtlos ineinander übergehen und dadurch ein ansprechenderes Schriftbild erzeugen.
Design-Tipp: Um auf die OpenType-Funktionen und das Glyphen-Bedienfeld in Illustrator zuzugreifen, gehst du zum Menü „Fenster“ und wählst „Schrift > OpenType“ oder „Schrift > Glyphen“.
10. Verwende die richtige Interpunktion
Eine klare und verständliche Zeichensetzung ist ein wichtiger Bestandteil einer gelungenen Typografie. Sie hilft dabei, Verwirrung zu vermeiden und sicherzustellen, dass deine Botschaft klar und deutlich beim Leser ankommt. Achte daher darauf, Satzzeichen wie Kommas, Bindestriche und Gedankenstriche korrekt und mit dem richtigen Abstand zu verwenden.
Wenn du deine Kenntnisse in der Interpunktion verbessern möchtest, findest du hier eine kurze Liste der häufigsten Interpunktionszeichen, die oft verwechselt werden:
- Verwende einen Bindestrich (-), um zwei oder mehr Wörter zu einem zusammengesetzten Wort zu verbinden oder um Wörter am Ende einer Zeile zu trennen.
- Verwende einen Gedankenstrich, oder En-Dash (–), um eine Spanne von Zahlen anzugeben oder um zwei zusammenhängende Wörter zu verbinden.
- Verwende einen Gedankenstrich mit der Länge eines Gevierts, oder Em Dash (—), um eine Unterbrechung in der Gedanken- oder Satzstruktur zu kennzeichnen oder um Klammerausdrücke abzusetzen.
- Verwende einen Mittelpunkt (·) anstelle von Aufzählungszeichen, um eine Liste zu trennen.
- Verwende richtige Anführungszeichen („ “), um ein direktes Zitat oder ein Wort oder eine Phrase in einem bestimmten Sinn zu kennzeichnen.
- Verwende einen Apostroph (’), um die Auslassung von Buchstaben in einem Wort anzuzeigen.
- Verwende eine Ellipse (…), um das Auslassen von Wörtern anzudeuten oder um einen Gedankenabbruch zu suggerieren.
- Verwende die richtigen Symbole, wie zum Beispiel ½ anstelle von 1/2.
Fazit: Wie du deine Typografie verbesserst
Typografie spielt eine wichtige Rolle für den Erfolg eines jeden Designs. In diesem Blogbeitrag haben wir 20 Typografie-Tipps besprochen, mit denen du deine Typografie direkt verbessern kannst.
Lass uns noch einmal alles zusammenfassen.
Du hast verstanden, wie wichtig es ist, die Zielgruppe zu kennen. Bevor du mit dem Designprozess beginnst, solltest du dir überlegen, für wen und was du gestaltest.
Du hast gelernt, dass eine klare Informationshierarchie unerlässlich ist, um Informationen leicht verdaulich und visuell ansprechend zu vermitteln. Dazu gehören folgende Tipps:
- Lass genügend Weißraum
- Verwende Rastersysteme, um den Text auszurichten
- Setze Kontrasten durch die Gegenüberstellung von Schriftarten, Farben oder Größen
- Verwende eine Schriftskala, um harmonische Größen für deine Überschriften zu schaffen
Aber sei vorsichtig, wenn du versuchst, eine Hierarchie zu erstellen:
- Mische nicht zu viele Schriftarten
- Breche hin und wieder aus dem Raster aus, um Spannung zu erzeugen
Du hast gelernt, dass es bei Fließtext und Website-Designs besonders wichtig ist, auf die Lesbarkeit zu achten. Hier sind einige Tipps:
- Passe den Zeilenabstand an
- Verwende eine Schriftart mit geringem Kontrast für Fließtext
- Verwende Schriftarten mit einer größeren x-Höhe für Fließtext
- Hebe Text kursiv anstelle von fett hervor
Du hast verstanden, dass es bei der Beherrschung von Schriften auf kleine Details ankommt:
- Achte auf das Kerning
- Verwende OpenType-Funktionen und Glyphen
- Vermeide reines Schwarz und reines Weiß
- Verwende Display-Schriften für Überschriften
- Richte Schriftelemente optisch aus, nicht mathematisch
- Verwende die richtige Interpunktion
Und schließlich hast du gelernt, dass professionell gestaltete Schriften mit mehr Schnitten und einer höherer Qualitätskontrolle kommen. Das gibt dir mehr Flexibilität und verbessert die Lesbarkeit des Textes.
Wenn du diese Typografie-Tipps befolgst, wirst du deine Typografie auf die nächste Stufe heben und feststellen, dass sich deine Designs deutlich verbessern werden.
Möchtest du deine Typografie noch weiter verbessern? Eine Vielzahl von Büchern und Kursen bietet eine hervorragende Möglichkeit, sich in das Thema zu vertiefen.
Eine wertvolle Ressource ist auch The Flawless Typography Checklist von Typewolf, die das Wissen aus verschiedenen Quellen zusammenfasst.
Wenn dir dieser Artikel gefallen hat, findest du vielleicht auch meine anderen Artikel über Typografie interessant.
Wenn du etwas hinzufügen möchtest, würde ich mich freuen, von dir zu hören.
