Typografie im Design

Der erste Eindruck zählt, wie jeder Markenprofi weiß. Die meisten Benutzer*innen verlassen eine Webseite sehr schnell, wenn der Inhalt nicht klar und überzeugend ist. Das Kreativteam arbeitet hart daran, die Markenbotschaft in ansprechender und zugänglicher Sprache zu vermitteln. Jetzt zählen sie auf deine guten Entscheidungen für Typografie und Design, um die Lesbarkeit und das Markenengagement zu verbessern.

Lies weiter, um mehr darüber zu erfahren:

• Was Typografie ist und warum sie wichtig ist
• Die 5 beliebtesten Schriften und 6 Schlüsselelemente der Typografie
• Wie man Schriften und Schriftarten mit Figma findet und erkundet

Was ist Typografie?

Typografie im Design beinhaltet die Erstellung oder Auswahl eines Systems von Schriften und Schriftarten, um das geschriebene Wort auszudrücken. Diese kreative Kunstform kann starke Emotionen hervorrufen, indem visuell ansprechende Buchstaben verwendet und Typen so arrangiert werden, dass sie die Markenpersönlichkeit ausdrücken. Gut gestaltete Typografie kann die klare Kommunikation verbessern, mit einfacher Lesbarkeit und Verständlichkeit.

Warum ist Typografie wichtig?

Typografie spielt eine Schlüsselrolle bei der Erstellung qualitativ hochwertiger Websites, Apps, E-Mails, E-Books und mehr. Gute Typografie kann dir bei Folgendem helfen:

• Gewinne Benutzer*innen mit Schriften und typografischen Elementen, die ihre Aufmerksamkeit erregen, noch bevor sie mit dem Lesen beginnen.
• Lege eine visuelle Hierarchie fest mit konsistenten Schriftgrößen, Schriftstärken, Serifenschriftarten und/oder serifenlosen Schriftarten, Schriftpaarungen und Schriftartkombinationen, um Benutzer*innen zu führen und die Lesbarkeit zu verbessern.
• Mache die Marke bekannt. Bei konsequenter Verwendung hilft gute Typografie den Benutzer*innen, deine Marke durch die für deine Markeninhalte verwendeten Schriften und Schriftstile zu identifizieren.
• Unterstütze Inhaltsziele. Konsequente Buchstabenabstände, Zeilenlängen, Groß- und Kleinbuchstaben und andere typografische Elemente erhöhen die Lesbarkeit, während Schriftarten als Grafikdesignelemente Ton und Bedeutung verstärken.

Eine kurze Geschichte der Typografie

Johannes Gutenberg war im 15. Jahrhundert Teil einer europäischen Schriftenevolution, als er die erste Druckerpresse mit beweglichen Metalltypen erfand. Gutenberg verwendete alte gotische Kalligrafie-Buchstabenformen (auch bekannt als Fraktur), um längere Textzeilen für Manuskripte und religiöse Texte zu setzen. Bald darauf entwickelten Drucker in Italien eine einfachere, kompaktere Schrift, ursprünglich Antiqua genannt, heute besser bekannt als Roman. Europäische Drucker führten dann kursive Schriften ein und ermöglichten es, noch mehr Wörter pro Seite zu setzen.

Spulen wir vor in die späten 1700er- und frühen 1800er-Jahre vor, als die ersten modernen Serifenschriften auf den Markt kamen. Serifenlose Schriften folgten daraufhin und dominierten die europäische Druckwelt bis zum 20. Jahrhundert. Dann übernahmen klarere, besser lesbare Schriften wie Times New Roman, Futura, Helvetica und Arial. Heutzutage haben Grafik- und Webdesigner*innen weltweit Zugriff auf große Bibliotheken von Schriften und Schriftzeichensätzen.

Die 5 beliebtesten Schriften

Moderne Designer*innen wählen in der Regel aus fünf beliebten Schriften: Serif, Sans Serif, Schreibschrift, Monospace und Display. Jede Schrift umfasst eine Familie von Schriftarten, die die verschiedenen Stile dieser Schrift abdeckt. Zum Beispiel ist Helvetica eine Schrift, während Helvetica Light und Helvetica Regular Schriftarten sind.

• Serifenschriftarten: Dieser formelle, traditionellere Schrifttyp hat kurze Linien oder Konturen, die an den oberen und unteren Enden der Buchstabenformen herausragen. Etablierte Marken wie New York Times, Sony und J.P. Morgan entscheiden sich für eine Serifenschrift. Beispiele sind Times New Roman und Garamond.
• Serifenlose Schriftarten: Dieser einfache, moderne Schriftstil enthält nicht die Verzierungen, die in der Serifenschrift zu finden sind. Es ist eine beliebte Wahl für junge Marken und Tech-Start-ups (denken Sie an Target, Airbnb und Doordash). Beispiele für serifenlose Schriften sind Helvetica, Arial und Calibri.
• Schriftarten im Script-Stil: Dieser fließende, kursive Schriftstil kann von eleganter Kalligrafie bis zu verspielten Handschriftstilen reichen. Nicht ideal für Fließtext, eine Schreibschrift eignet sich am besten für Zitate, Unterschriften und kurze Überschriften. Beispiele sind Snell Roundhand, Pacifico und Scriptina.
• Monospace-Schriften: Diese Retro-Schrift im Schreibmaschinenstil zeigt Buchstaben und Abstände in fester Breite an, sodass die Zeichen jedes Wortes dieselbe Breite einnehmen. In Quellcode für eine einfachere Lesbarkeit verwendet, erscheinen Monospace-Schriften auch auf zahlreichen Websites und Grafikdesigns. Beispiele hierfür sind Courier, Bergen Mono und Source Code Pro.
• Schriftarten für Displays: Auch als dekorativ bekannt, kann diese auffällige Schrift Logos, Bannern und Überschriften Flair und Originalität verleihen. Zu den Beispielen für Display-Schriften gehören Clearview, Johnston und Skywalker.

Wichtige Elemente der Typografie

Du kannst das Aussehen, die Lesbarkeit und die Stimmung eines Worts, einer Textzeile oder eines Produkts anpassen, indem du ein oder mehrere typografische Elemente veränderst.

Ausrichtung

Um ein Gleichgewicht zu erreichen und Benutzer*innen zu helfen, leicht eine Seite nach unten zu navigieren, richte Designelemente wie dein Logo, ein Bild, die Kopfzeile und den Haupttext aus. Verteile jedes Designelement gleichmäßig und verwende konsequent Ränder und Innenabstände. Linksbündig, rechtsbündig, voll- oder zentriert: je nach den Anforderungen deines Projekts. Beispielsweise können Designer*innen eine Überschrift oder ein kurzes Zitat zentriert ausrichten, aber einen längeren Text linksbündig.

Farbe

Wähle eine Farbpalette aus, die mit deiner Marke übereinstimmt und deine Botschaft klar vermittelt. Passe die Textdeckkraft an und verwende Komplementärfarben, die gut miteinander kontrastieren, um Lesbarkeit und Zugänglichkeit sicherzustellen. Du kannst einen Farbkreisgenerator verwenden, um eine gut ausbalancierte Farbpalette zu erstellen. Profitipp: Sieh dir die Richtlinien für die Barrierefreiheit von Webinhalten an für ideale Kontrastverhältnisse. Kräftigere, leuchtendere Farben eignen sich möglicherweise besser für Überschriften und Unterüberschriften, während neutrale Farben für große Textblöcke geeignet sind.

Hierarchie

Die Entwicklung einer Hierarchie in deiner Typografie hilft dabei, wichtige Informationen zu priorisieren und hervorzuheben, sodass sie leicht zu überfliegen und zu verarbeiten sind. Formatiere Überschriften größer als Unterüberschriften und Unterüberschriften größer als Fließtext. Zum Beispiel beträgt der Fließtext einer Website typischerweise 16px, während H1-Überschriften auf 48px gesetzt sind. Spiele mit Weißraum, Textausrichtung, Farbe und verschiedenen Schriften, um die visuelle Hierarchie zu verstärken.

Kerning

Passe den Abstand zwischen einzelnen Buchstaben so an, dass die Distanz konsistent erscheint. Richtiges Kerning verbessert die visuelle Anziehungskraft deines Textes und verbessert die Lesbarkeit.

Zeilendurchschuss

Der Zeilendurchschuss bezeichnet die Zeilenhöhe – den Abstand zwischen der Grundlinie einer Textzeile und der Grundlinie der darüberliegenden Textzeile. Im Allgemeinen ergibt eine Zeilenhöhe, die 1,125- bis 1,200-mal so groß wie die Schriftartgröße ist (112,5%–120.0%), was zu einer besseren Lesbarkeit führt. Nichtsdestotrotz benötigt jede Schrift eine Feinabstimmung – einschließlich sorgfältiger Zeilenabstände.

Laufweite

Du kannst die Lesbarkeit mit Laufweite (auch Zeichenabstand genannt) verbessern, was den gesamten Abstand zwischen Buchstaben in einem Wort oder einer Textzeile umfasst. Vergrößere die Laufweite, um Platz hinzuzufügen, und verringere die Laufweite, um ihn zu reduzieren. Wörter oder Sätze, die in Großbuchstaben angezeigt werden, sind manchmal leichter lesbar mit erhöhter Laufweite.

Wie man die richtige Schrift auswählt

Der Prozess der Auswahl einer Schrift gliedert sich in diese wichtigen Schritte:

• Berücksichtige den Umfang sowie die Anforderungen und Ziele deines Projekts. Stelle deinem Team wichtige Inhaltsfragen: Wie liefern wir Inhalte (über App, Website, E-Mail oder Printmedien)? Wer ist unser Publikum und was sind ihre Bedürfnisse? Welche Schriften und Schriftarten verwenden unsere Wettbewerber? Denke daran, dass einige Schriften besser für Überschriften als für Menütexte geeignet sind. Andere verfügen über große Schriftfamilien mit internationalen Schriftzeichen, Glyphen und anderen Sonderzeichen.
• Erstelle ein Moodboard, um einen visuellen Ton zu entwickeln, basierend auf Benutzer*innen- und Wettbewerbsforschung. Um loszulegen, verwende die Moodboard-Vorlage von FigJam. Tipp: Das Betrachten vergleichbarer Lösungen kann helfen, nützliche Muster und Normen zu erkennen.
• Erkunde Schriftoptionen auf dem Computer oder auf Websites wie Google Fonts. Suche nach einer Schrift mit visuellen Hinweisen, die das widerspiegeln, was dein Produkt oder deine Marke vermitteln soll. Wenn der Ton deiner Marke eher professional als unbeschwert ist, wähle zum Beispiel eine ernsthafte Schrift mit wenigen Verzierungen. Welche dieser Figma-Design-Beispiele wirkt auf dich professioneller? Wenn du das Modul auf der linken Seite ausgewählt hast, bist du auf dem richtigen Weg. Dieses Modul verwendet Roboto, eine saubere, leicht lesbare serifenlose Schrift. Das Modul auf der rechten Seite enthält Almendra, eine auf Kalligrafie basierende Schrift, die oft in Kinderbüchern verwendet wird.

• Wähle Schriften, die zur Marke passen und auffällig sind, um deine Projektziele zu unterstützen. Berücksichtige die gesamte Konstruktion der Buchstaben (z. B. x-Höhen, Großbuchstabenhöhen, Punzen, Oberlängen und Unterlängen), Skalierbarkeit, Lesbarkeit, Persönlichkeit und Dekoration. Diese Elemente beeinflussen das Gesamtbild und -gefühl einer Schrift.
• Probiere deine Schriften mit echten, relevanten Inhalten aus. Dies ist der beste Weg, um eine Schrift auszuwählen, die deine Benutzer*innen anspricht. Teste die Schrift in ein paar verschiedenen Größen, um sicherzustellen, dass sie sowohl für große als auch kleine Textmengen funktioniert.
• Teste deine Markenfarben an deiner Schrift. Beginne damit,schwarzen Text auf einem weißen Hintergrund und weißen Text auf einem schwarzen Hintergrund zu platzieren. Wende dann deine primäre Markenfarbe auf den Text an und sieh, wie die Schrift sowohl auf weißen als auch auf schwarzen Hintergründen funktioniert. Kehre die Farben um, um zu sehen, wie weißer und schwarzer Text auf einem Hintergrund in deiner primären Markenfarbe aussieht.

Schriftstärke und Stil

In einer Schriftfamilie, wie zum Beispiel Montserrat von Julieta Ulanovsky und ihrem Studio, gibt es mehrere Stile und Schriftstärken – wie regulär, fett, kursiv, dünn, schwarz etc. –, und jedes hat seine eigene Schriftart. Eine Schriftart ist eine Datei, die installiert wird, um einen Satz von Zeichen in einer bestimmten Schriftstärke und in einem bestimmten Textstil zu verwenden. Eine Schriftfamilie mit mehreren Schriftstärken hat für jede Stärke eine eigene Schriftart, zusammen sind sie als Schriftfamilie bekannt.

Die Schrift Montserrat umfasst 18 Schriftarten: Dünn, Dünn Kursiv, Extra-Leicht, Extra-Leicht Kursiv, Leicht, Leicht Kursiv, Normal, Normal Kursiv, Mittel, Mittel Kursiv, Halb-Fett, Halb-Fett Kursiv, Fett, Fett Kursiv, Extra-Fett, Extra-Fett Kursiv, Schwarz und Schwarz Kursiv.

Stärke bezieht sich auf die Dicke der Kontur eines Buchstabens. Eine Schrift kann in Schriftstärken von Hairline bis Ultra-Schwarz variieren und viele Schriftarten dazwischen haben, während einige Schrift möglicherweise nur in einer Stärke verfügbar sind. Diese Stärken haben auch eine Zahlenzuordnung, die beim Programmieren oder bei der Zusammenarbeit mit Entwickler*innen hilfreich ist. Schriftstärken stimmen im Allgemeinen mit einer Nummer auf einer Skala von 100 bis 900 überein, mit Intervallen von 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700 etc.

Schriftstil ist die Anpassung der Zeichen oder Großschreibung, wie z.B. Kursivdruck und Großbuchstaben. Einige Schriftarten haben keine Stiloptionen und bieten manchmal nur die Stärke Regular an.

Der Buchstabenfall, auch einfach als „Fall“ bezeichnet, ist die Unterscheidung zwischen kleineren Buchstaben wie Kleinbuchstaben und größeren Buchstaben wie Großbuchstaben oder Kapitalbuchstaben. Die meisten Schriftsätze haben Buchstaben in beiden Fällen, während Schriftarten wie Bangers nur in Großbuchstaben gesetzt sind. Schriften, die nur in Groß- oder Kleinschreibung gesetzt sind, sind weitaus seltener.

Im Englischen werden die verschiedenen Stile je nach den Umständen unterschiedlich verwendet:

• Title Case ist ein gemischter Groß- und Kleinschreibstil, bei dem alle Wörter in einem Satz großgeschrieben werden, mit Ausnahme von Artikeln, kurzen Präpositionen und Konjunktionen. Diese Ausnahmen sind etwas subjektiv.
• Der Satzanfang mit einem Großbuchstaben ist das, was wir gewohnt sind, wenn wir einen Text lesen, einschließlich dieses Satzes.
• ALL CAPS ist, wenn der gesamte Text in Großbuchstaben geschrieben ist, und wird häufig für Überschriften, Logos, Button-Text oder andere Arten von Labels verwendet. Verwende es zur Hervorhebung und nicht für längere Texte, bei denen das Fehlen von Ober- und Unterlängen es bei großen Mengen schwer lesbar machen kann. All Caps wird auch online verwendet, um Schreien zu implizieren, daher vermeide es in Chat- und konversationsbasierten Benutzeroberflächen.
• Kapitälchen sind in der Form ähnlich wie Großbuchstaben, sind jedoch so hoch wie die x-Höhe der Schrift. Kapitälchen werden verwendet, um sich vom Fließtext und Überschriftentext zu unterscheiden, werden jedoch in vielen Schriften nicht angeboten.
• ein durchgehend kleingeschriebener Text ist eine stilistische Wahl, die in einigen Produkten und Wortmarken aus ästhetischen Gründen verwendet wird.

Größe

Das Setzen und Ändern der Schriftgröße kann eine schwierige Entscheidung sein. Es wird stark vom Medium abhängen, in dem der Text erscheint, wie Papier, Mobiltelefon oder Werbetafel, und kann sich je nach Gerät des Betrachter*in oder der Reaktionsfähigkeit des Designs ändern.

Es ist wichtig, die Hierarchie mit deiner Schriftwahl zu bestimmen, indem du die Größe als eines der Elemente zur Betonung verwendest.

In der Webentwicklung müssen einige Schlüsselgrößen definiert werden, wie beispielsweise die Größen der Überschrift, Unterüberschrift, des Fließtextes, des Menüs und des Fußtextes usw. Viele Designer beginnen mit der Größe der Überschrift, auch bekannt als H1, aber es kann hilfreich sein, mit der Größe des Fließtextes zu beginnen, da Frontend-Entwickler es so implementieren könnten. Wenn Entwickler*innen in em messen, einer Maßeinheit, die auf Skalierung basiert, beträgt die Größe des Fließtextes 1 em und jede andere Textgröße ist ein Vielfaches oder ein Bruchteil davon.

Zum Beispiel ist eine häufige Fließtextgröße für das Web 16px. Die H1 kann auf 3 em gesetzt werden, also dreimal so groß wie der Fließtext, in diesem Fall 48px. Da die Webseite für mehrere Bildschirmgrößen entworfen wird, können die Designs, die du erstellst, je nach Gerät des Kunden unterschiedliche Schriftartgrößen erfordern. Die Entwickler*innen können dafür sorgen, dass sich die Fließtextgröße an die Browserdimensionen des Kunden anpasst und alle anderen Texte entsprechend skaliert werden.

Details

Einen großen Teil der Typografie stellen die kleinen Details und die Nuancen dar.

Wenn man Text layoutet, ist zum Beispiel eines der Aspekte, die man untersuchen sollte, der Flattersatz. Der Flattersatz ist der unebene Rand von links- und rechtsbündigem Text. Er kann manipuliert werden, indem man die Breite eines Textfeldes vergrößert oder verkleinert oder den Buchstabenabstand des gesamten Textkörpers ändert.

Wenn ein oder zwei Wörter am Ende eines Absatzes stehen, wird dies typischerweise als „Hurenkind“ bezeichnet. Oder am Anfang der nächsten Spalte ein „Waisenkind“.

Wie May-Li Khoe jedoch anmerkt:

Bezeichne sie stattdessen als „Danglies“.

Wenn Textboxen angepasst werden, um Hänger zu vermeiden, wird die Zeilenlänge angepasst. Für Fließtext auf Englisch ist es ideal, die Zeilenlänge auf etwa 40 bis 60 Zeichen, einschließlich Leerzeichen und Interpunktion, zu begrenzen, um Barrierefreiheit und Lesbarkeit zu gewährleisten. Wenn Zeilenlängen länger als 60 Zeichen sein müssen, erhöhe die Zeilenhöhe für eine bessere Lesbarkeit.

Eine der einfachsten Möglichkeiten, ein Dokument oder eine Benutzeroberfläche gut gestaltet aussehen zu lassen, ist Konsistenz in der Positionierung von Objekten im Raum.

Angenommen, dein App-Bildschirm hat einen Titel, der sich 100px vom oberen Rand des Frames oder Bildschirms entfernt befindet. Du möchtest, dass alle anderen App-Bildschirme mit ähnlichen Titeln diese Titel an der gleichen Stelle haben.

Hilfslinien und Maße sind hier deine Freunde – klicke einfach und ziehe von einem Lineal in Figma, um eine Hilfslinie zu erstellen, und halte die Alt-Taste gedrückt, wenn ein Objekt ausgewählt ist, um den Abstand zu den umliegenden Objekten zu sehen.

Betrachte die linke Seite, oder den linken vertikalen Rand, einer Webseite, eines Posters, einer App-Oberfläche, einer Infografik usw., die ein Logo, ein Bild, eine Kopfzeile und etwas Fließtext enthalten. Das Ausrichten dieser Elemente zueinander erleichtert das Auge, die Seite hinunterzuwandern, lässt aber auch das Layout dieser Inhalte durchdacht und bewusst erscheinen.

Justierung ist ein Ausrichtungskonzept, das speziell für Textblöcke oder Zeilen gilt.

• Linksbündig ist, wenn der Anfang jeder Textzeile den gleichen x-Wert entlang eines linken Randes hat. Dies wird auch als linksbündig bezeichnet und erzeugt einen flatternden Rand rechts.
• Rechtsbündig bedeutet, dass das Ende jeder Textzeile bündig mit einem rechten Rand abschließt. Dies ist auch als rechtsbündig bekannt und erzeugt einen Fetzen auf der linken Seite.
• Blocksatz ist, wenn sowohl die linke als auch die rechte Seite der Textzeilen bündig mit beiden Seiten des Textkastens abschließen. Der Buchstabenabstand und der Wortabstand werden angepasst, um jede Textzeile auf eine einheitliche Breite zu setzen. Es gibt kein Flattersatz mit Blocksatz.
• Zentrierter Text ist das Fehlen von Ausrichtung.

Starte deine Typografieentdeckungen mit Figma

Figma bietet professionelle Designressourcen, um dir den Einstieg zu erleichtern, einschließlich dem Designtool von Figma und einem Beispiel zur Schriftenerkundung. Du kannst auch ein Marken-Moodboard mit dem Moodboard-Maker von FigJam erstellen.

Für weitere Profitipps lies den Artikel von Figma darüber, wie Typografiesysteme in Figma erstellt und implementiert werden.

Brauchst du Inspiration? Sieh dir die die umfassende Bibliothek von Typografievorlagen, Beispielen und Stilrichtlinien an, die von der Figma-Community geteilt werden.

Bereit, eine Schrift zu finden, die deine Marke hervorhebt?