Typografie Grundlagen: 20 Tipps um deine Typografie Skills zu verbessern

Das Bild zeigt den Text "Type Tips" in der Schriftart "Editorial New", auf den mit Photoshop ein Glasfilter angewendet wurde. Die Schrift steht zentriert auf einem schlichten schwarzen Hintergrund. Dieses experimentelle Bild wird zu einem Blogbeitrag mit dem Titel "Typografie Grundlagen: 20 Tipps deine Typografie zu verbessern" verwendet.

Von Nine Blaess | 9:54 min

In diesem Beitrag
    Add a header to begin generating the table of contents
    LinkedIn
    Twitter
    Facebook
    Email

    Hast du dich schon mal gefragt, warum einige Designs viel ansprechender wirken als andere? Die Chancen stehen gut, dass es an der Typografie liegt. Tatsächlich kann eine geschickte Verwendung von Schriftarten die Qualität deiner Designs erheblich steigern. Hier sind 20 praktische Tipps, die du sofort umsetzen kannst, um deine Typografie-Fähigkeiten zu verbessern.

    Egal, ob du ein gestandender Profi bist oder gerade erst anfängst—hier sind einige praktische und umsetzbare Tipps zu den Grundlagen der Typografie, 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 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 perfekt zu einem Architekturbüro passen könnte. Für ein medizinisches Design hingegen solltest du eher bescheidenere 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 Informationshierarchie.

    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.

    Screenshot from MyMind website illustrating the importance of clear hierarchy in design. The image shows a layout with multiple elements arranged in a hierarchical manner, with a clear indication of which element should be noticed first, second and third. This image is relevant to the topic of typography tips.
    Image source: MyMind website, mymind.com

    Design-Tipp

    Frage dich beim Designen, welche Informationen der Leser als Erstes, als Zweites, Drittes … wahrnehmen soll.

    3. Nuzte Grid-Systeme

    Raster sind ein Rahmen aus Spalten und Zeilen, die eine Struktur für die Organisation deiner Inhalte schaffen.

    Sie helfen dabei, 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.

    Typography tips: On the left side of the image, there is a design layout displayed using a modular grid system. On the right side, there is an overlay that shows the grid lines used in the design.
    Modular grid system explained

    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.

    A screenshot from the Jokolade website showcasing effective use of color to direct attention to typography. The screenshot features a chocolate packaging where information is placed on a bright yellow lemon to stand out.
    Image source: Jokolade Website, www.jokolade.de

    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.

    The Aesop website is an example of effective use of white space. The website features an off-white background with large amounts of negative space, creating a clean and minimalist look.
    Image source: Aesop website, www.aesop.com

    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 die Augen schnell ermüden.

    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.

    An image with two halves side by side, both showing the word 'focus' in white on a black background. The left half of the image has the word optically aligned, while the right half of the image has the word mathematically aligned. The alignment differences are not visually apparent.
    Comparison: The word on the left is optically aligned, the word on the right is mathematically aligned

    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.

    A screenshot of a type scale in major third with the font "Roboto" and base size 16 pixels. The type scale includes font sizes ranging from 12.8 pixels (0.8 x 16) to 51.2 pixels (3.2 x 16) with increments of 1.25. The larger font sizes are located towards the bottom of the scale, while the smaller font sizes are located towards the top. The type scale is displayed in black on a white background.
    Screenshot of typescale.com

    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?

    Image of Cindy Hernandez's portfolio website featuring an example of a display font in use. The font is black and displayed on a vibrant purple background.
    The portfolio of Cindy Hernandez features the font Freight Text Display, source: www.cindy.works

    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.

    Screenshot of a lead paragraph example from the 'It's Nice That' website. The image shows a title with an accompanying image, and the lead paragraph placed underneath the title. The lead paragraph is set in a larger size than the content.
    Article on It’s Nice That, source: https://www.itsnicethat.com/articles/onnff-aicocken-profile-graphic-design-

    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.

    An illustration depicting two words, one on the left and one on the right, with an arrow pointing from left to right. The word on the left appears with irregular spacing between the letters, while the word on the right has uniform spacing between the letters. This is called kerning. Typography tip: kern your headlines

    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 und Bücher zusammenfasst.

    Und schließlich: üben, üben, üben! In diesem Artikel werden acht aktuelle Typografie-Trends vorgestellt, solltest du Inspiration benötigen.

    Vielleicht gefällt dir auch meine Zusammenstellung von Branding-Ressourcen.

    Picture of Nine Blaess

    Nine Blaess

    Hallo, ich bin Nine. Ich verbinde Strategie und Design, um maßgeschneiderte Markenidentitäten und Websites zu gestalten, die die Einzigartigkeit jedes Unternehmens unterstreichen.

    Hol dir mein Brand Storytelling Workbook plus regelmäßige Branding-Updates für 0 EUR.

    Brand Storytelling Workbook Mockup

    Join my newsletter!

    Receive regular branding updates and claim your free Brand Storytelling workbook.

    Brand Storytelling Workbook Mockup

    Melde dich für meinen Newsletter an!

    Erhalte regelmäßige Branding-Updates und mein Brand Storytelling Workbook als Dankeschön dazu.