Wir lesen den ganzen Tag Texte. Ob online auf dem PC, beim Scrollen auf dem Smartphone, oder auf Werbeplakaten beim Spaziergang: Wir sehen ständig Typographie und machen uns oft gar nicht bewusst, wie viel Text wir tatsächlich den Tag über konsumieren. Daher ist Typographie weiterhin eins der unterbewertesten Themen im Bereich des Webdesigns.
Gute Typographie erfüllt ihren Zweck. Eine effektive typographische Wahl und Verwendung fällt beim Lesen nicht auf, sondern unterstützt ihre Intention still und heimlich. Dennoch ist Typographie eine filigrane Kunst mit vielen Feinheiten.
Stell dir beispielsweise vor, Wikipedia würde so aussehen:
Aber stattdessen hast Du Dir vermutlich noch nie Gedanken über die Schriftart von Wikipedia gemacht - und genau so soll es sein!
Eine gute Schrift ist lesbar und vermittelt das passende Lesegefühl. Denn wenn diese Aspekte nicht stimmen, ist der Inhalt egal. Der Benutzer wird nicht weiterlesen wollen.
In diesem Artikel gehen wir auf die essentiellen Grundlagen der Typographie im Webdesign ein, damit Du perfekt vorbereitet bist, Deine Website mit typographischen Inhalten zu füllen!
Was ist Typographie im Webdesign?
“Typografie ist, wie Sprache aussieht”, so beschreibt es Ellen Lupton.
Typographie ist die Kunst, Texte lesbar und ansprechend zu gestalten. Dabei werden die Schriftarten und die Textlayouts präzise aufeinander abgestimmt, um ein harmonisches Gesamtbild zu schaffen.
Web-Typographie ist hierbei die Spezialisierung von Typographie bezogen aufs Web. Die grundlegenden Ideen der Typographie im Print und im Web sind dabei sehr ähnlich, doch einige Besonderheiten müssen im Web dennoch beachtet werden, die wir im Folgenden aufschlüsseln werden.
Elemente der Typographie im Webdesign
Die Eigenschaften von Typographie lassen sich durch eine Vielzahl unterschiedlicher Begriffe beschreiben. Je intensiver Du diese kennst und verstehst, desto mehr siehst Du Typographie mit anderen Augen. Lass uns also gemeinsam herausfinden, von welchen Eigenschaften wir hier sprechen!
Was sind Typefaces und Fonts?
Eine Font ist hingegen eine Instanz eines Typefaces mit einer spezifischer Größe und einem spezifischen Style. Das Typeface Helvetica könnte also beispielsweise 16px groß und fettgedruckt sein und noch andere Spezialisierungen aufweisen.
Möchtest Du mehr über Typefaces und Fonts lernen? Dann schau Dir diesen Artikel an: LINK AUF TYPEFACES VS FONTS
Serif, Sans-Serif und andere Schrifttypen
Schriftarten lassen sich in unterschiedlichste Klassen kategorisieren, die wir im Folgenden zusammengefasst haben.
Serif
Serifschriften sind die vermutlich am meisten verwendeten Schriftarten im Print. Sie enthalten kleine dekorative Linien, die sogenannten Serifen.
Ein berühmtes Beispiel ist “Times New Roman”.
Sans Serif
“Sans” kommt vom französischen Wort für “ohne” und somit werden die Schriftarten ohne Serifen als Sans-Serif kategorisiert.
Ein berühmtes Beispiel hierfür ist “Helvetica”.
Monospace
Bei Monospace-Fonts sind alle Zeichen gleich breit. Ursprünglich wurden Monospace-Schriftarten für Schreibmaschinen entwickelt. Heute sind sie in Texteditoren und insbesondere für die Softwareentwicklung interessant, um Text und Code übersichtlich zu organisieren.
Ein weitverbreitetes Monospace-Typeface ist “Courier”.
Italic Type (Kursivschrift)
Ursprünglich zielten Kursivschriften darauf ab, handgeschriebene Schriftarten nachzuahmen. Der Fokus lag dabei nicht notwendigerweise auf Lesbarkeit, sondern Kursivschriften sollten hauptsächlich visuell ansprechend aussehen. Daher sollten Italic-Type-Typefaces eher für große Headings oder als hervorhebendes Gestaltmittel verwendet werden.
In der heutigen Zeit wird Kalligraphie oft als die künstlerische Ausprägung bezeichnet, schöne handgeschriebene Texte zu erstellen, wohingegen Kursivschrift geneigte Texte beschreibt.
Semantisch abgegrenzt von der Kalligraphie und dennoch Bezug dazu haben Calligramme: Calligram: So designst Du Kalligramme für Logos & Websites
Ein bekanntes Beispiel einer Kursivschrift ist “Indie Flower”.
Display
Eine Display-Schrift für die Verwendung in großen Größen optimiert, also beispielsweise für Anzeigentexte, Titel, Überschriften und nicht für längere Fließtexte.
Ein Beispiel hierfür ist das Google-Typeface “Lobster”.
Uniwidth
Bei einem Uniwidth-Typeface (oder auch Multiplexed oder Duplexed) haben alle Font-Variationen dieselbe Breite. Der Buchstabe A ist in “Light” also genauso breit wie in “Bold”. Das bedeutet allerdings nicht, dass ein A genauso breit ist wie ein I. Das wäre hingegen wieder eine Monospace-Font.
Uniwidth-Schriftarten sind insbesondere in UI-Elementen wie Buttons hilfreich, da diese beim Hovern mit der Maus fett werden können, ohne dass sich dabei das Layout verändert.
Ein Beispiel eines Uniwidth-Typefaces ist “Noi Grotesk”.
Kerning (Unterschneidungen)
Kerning ist der horizontale Abstand zwischen zwei individuellen Buchstaben oder Zeichen. Schriftarten können schmalere oder breitere Kernings haben und somit kann die Lesbarkeit und visuelle Gestalt der Font beeinflusst werden.
Das Kerning kann sich zwischen Paaren von Buchstaben unterscheiden. Somit ist beispielsweise oft die Buchstabenkombination “AV” näher aneinander, als die Buchstabenkombination “AA”.
Letter Spacing (Tracking, Laufweite)
Tracking (oder auch Letter Spacing oder Laufweite) beschreibt die Distanz zweier Buchstaben. Im Gegensatz zu Kerning legt Tracking genau eine Distanz fest, die zwischen allen Buchstabenpaaren identisch ist. Kerning ermöglicht es dann, diese Distanzen zwischen spezifischen Zeichenpaaren zu variieren, um so die Lesbarkeit zu verbessern.
Word Spacing
Word Spacing beschreibt den Abstand zwischen Wörtern. Hierbei ist das Ziel, Wörter klar und deutlich visuell voneinander zu trennen, ohne dabei den Lesefluss einzuschränken oder die visuelle Zusammengehörigkeit aufeinanderfolgender Wörter zu trennen.
Was meinen wir mit visueller Zusammengehörigkeit? Dieser Artikel klärt auf: Die 9 wichtigsten Gestaltgesetze & Anwendung im Webdesign
Legibility (Leserlichkeit) und Readability (Lesbarkeit)
Im Englischen wird oft zwischen “Legibility” und “Readability” unterschieden. Im Deutschen kommen diesen die Begriffe Leserlichkeit und Lesbarkeit am nächsten.
Leserlichkeit beschreibt, wie einfach es ist, zwischen zwei Buchstaben zu unterscheiden. Lesbarkeit hingegen bezieht sich darauf, wie einfach es ist, Fließtexte zu lesen. Bei Leserlichkeit geht es also um die individuellen Vergleiche, wohingegen es bei Lesbarkeit mehr um das Gesamtbild geht.
Leading (Line Height, Zeilendurchschuss, Zeilenabstand)
Leading (oder auch Line Height, Zeilendurchschuss oder Zeilenabstand) beschreibt die vertikale Distanz zwischen Textzeilen. Der Zeilendurchschuss wird von Baseline zu Baseline (LINK GLOSSAR BASELINE) gemessen.
Texte mit kleinerer Schriftgröße wie beispielsweise in Fließtexten sollten eine Line Height von bis zu 1.5em aufweisen. Das bedeutet, dass der Abstand zwischen den Baselines zweier aufeinanderfolgender Textzeilen etwa 1.5 Mal so hoch ist wie der Text selbst.
Große Überschriften hingegen funktionieren sogar oftmals gut mit Werten von unter 1em.
Hierarchie
Eine gute typographische Hierarchie zielt darauf ab, dem Leser mitzuteilen, welche Elemente zuerst gelesen werden sollen. Insbesondere in der heutigen Zeit, in der niemand mehr 2 Sekunden Geduld hat, weil Social Media ADHS-ähnliche Sympthome auslöst, solltest Du es dem Leser besonders leicht machen, relevante Inhalte zu finden.
Wenn Deine Texte nicht hierarchisch sinnvoll strukturiert sind, kannst Du Dir so viel Mühe beim Schreiben geben, wie Du willst, denn keiner wird finden, was er sucht. Verwende also genau eine präzise H1-Überschrift und gliedere die restlichen Inhalte hierarchisch in mehrere sinnvolle Überschriften der Form H2, H3, etc. auf. Zusätzlich kann die Hierarchie mittels Farbe, Kontrast und Größe unterstützt werden.
Nicht nur für den interessierten Website-Besucher, sondern auch für die Suchmaschine ist eine gute Strukturierung essenziell. In diesem Artikel lernst Du mehr über SEO und Überschriften: LINK ZU SEO HEADINGS UND HIERARCHIE
Kontrast
Grundsätzlich beschreibt der Kontrast, wie sehr sich zwei Elemente voneinander unterscheiden. Im Bezug auf die Typographie ist damit für gewöhnlich der Unterschied zwischen Schrift und Hintergrund gemeint. Dies kann durch unterschiedliche Helligkeit, aber auch durch unterschiedliche Farbwahl erreicht werden.
Wie erreicht man guten Kontrast im Webdesign? Finde es heraus!
Konsistenz
Konsistenz beschreibt in der Typographie die Eigenschaft, für wiederkehrende typographische Elemente konsequent dieselben Fonts zu verwenden. Nur so können Deine Besucher Deine Website ohne Verwirrungen verstehen und wissen, was die jeweiligen Elemente bedeuten. Halte also die Typographie von Überschriften und Body-Texten konsequent konsistent.
Alignment (Zeilenfall)
Beim Left-, Center- und Right-Alignment (oder auf Deutsch Linksbündiger Flattersatz, Mittelachsensatz und Rechtsbündiger Flattersatz) platziert man links, mittig oder rechts eine imaginäre Linie, an der sich der Text orientiert.
Es ist ebenfalls möglich, sowohl links als auch rechts eine imaginäre Linie zu platzieren und den Text an beiden Linien zu orientieren. Dafür müssen die Abstände zwischen den Wörtern angepasst werden. Dieses Alignment nennt man Justified Text, oder auch Blocksatz.
Grundlagen der Typographie im Webdesign
Du hast die Eigenschaften der Typographie verinnerlicht, aber wie wendest Du sie am besten an? Worauf ist zu achten?
Wir haben für Dich die wichtigsten Grundlagen zusammengetragen, sodass Du genau weißt, worauf Du beim Nutzen bestimmter Schriftarten achten solltest.
Verwende möglichst wenige Typefaces auf einer Website
Verwende so wenige Typefaces wie möglich. Eine häufige Empfehlung von Experten ist es, maximal zwei Typefaces zu verwenden. Eine kann für Überschriften und das Hervorheben wichtiger Elemente gewählt werden und die andere für gewöhnliche Fließtexte.
Viele erfolgreiche Websites arbeiten sogar nur mit einem einzigen Typeface. Dabei können unterschiedliche Fonts des Typefaces verwendet werden, also beispielsweise unterschiedliche Textgrößen oder Schriftstärken, um Variation zu schaffen.
Wenn Du wissen willst, worauf Du beim Kombinieren verschiedener Typefaces achten solltest, hilft Dir dieser Artikel weiter: LINK KOMBINIEREN VERSCHIEDENER TYPEFACES
Beginne mit Standard-Fonts
Standard-Typefaces und Web-Safe-Fonts (LINK GLOSSAR) haben eine Reihe an Vorteilen. Zunächst sind sie weit verbreitet und somit haben Leser die Font vermutlich bereits viele Male gesehen. Das ist kein Nachteil, denn so ist die Schriftart für die Leser vertraut und entspricht ihren Erwartungen.
Da Standard-Schriftarten weit verbreitet sind, wurden sie bereits auf unterschiedlichsten Geräten und Browsern getestet. Die Kompatibilität ist also so hoch, wie sie nur sein kann. Du wirst daher nie in Probleme rennen, dass Dein Typeface auf irgendeinem Gerät nicht korrekt angezeigt wird.
Gerade als neuer Webdesigner ist es oftmals schwierig zu erkennen, ob eine Schriftart ausschlaggebende Designfehler hat. Standard-Fonts haben sich aus gutem Grund als einige der beliebtesten Schriftarten herausgestellt, denn sie haben für gewöhnlich beeindruckend wenige Designfehler.
Möchtest Du allerdings dennoch unübliche Typefaces verwenden, solltest Du darüber nachdenken, in deinem CSS-Code (LINK GLOSSAR) einen Font Stack (LINK GLOSSAR) für Ersatzschriftarten festzulegen. So werden alternative Schriftarten verwendet, wenn Deine primäre Schriftart nicht angezeigt werden kann.
Wähle Typefaces, die in jeder Größe funktionieren
Einige Typefaces wurden spezifisch für eine große oder kleine Darstellung entwickelt. Diese Typefaces sollten mit Vorsicht verwendet werden.
In einigen Projekten kann es sinnvoll sein, unterschiedliche Typefaces für Überschriften und Fließtexte zu wählen. Allerdings sollte hierbei beachtet werden, dass Überschriften und andere große Textelemente für mobile Endgeräte oft verkleinert werden müssen. Wenn die gewählten Typefaces mit der kleineren Schriftgröße nicht mehr lesbar sind, sind sie vermutlich keine gute Wahl für Dein Webdesign-Projekt.
Verwende Fonts mit unterscheidbaren Buchstaben
Je einfacher individuelle Buchstaben voneinander unterschieden werden können, desto schneller und flüssiger können Deine Website-Besucher die Inhalte lesen und verstehen. Eine gute Leserlichkeit ist also essentiell, um die Aufmerksamkeit deiner Besucher möglichst lange auf Deiner Website zu fesseln.
Bevorzuge Sans-Serif-Typefaces für Fließtexte
Serif-Typefaces funktionieren ausgezeichnet für Überschriften und große Textelemente. Je kleiner die Schrift aber wird, desto schlechter wird die Lesbarkeit und die Serifen beginnen beim Lesefluss abzulenken.
Daher wird oft empfohlen, für den Body-Text Sans-Serif-Typefaces zu verwenden. Ihre minimalistische Gestalt ist optimal für kleine Schriftgrößen.
Achte auf ausreichenden Kontrast zwischen Schrift und Hintergrund
Die beste Lesbarkeit wird tatsächlich nicht durch schwarze Schrift (#000) auf einem weißen Hintergrund (#fff) erreicht! Das liegt daran, dass die weiße Farbe reflektive Eigenschaften und die schwarze Farbe absorbierende Eigenschaften besitzt. So wirkt das Endergebnis leicht verschwommen. Außerdem wird der weiße Hintergrund auf Dauer anstrengend für die Augen.
Stattdessen erreicht man die beste Lesbarkeit mit dunkelgrauer Schrift auf einer hellgrauen Oberfläche.
Möchte man Schrift über einem Hintergrundbild positionieren, sollte man ebenfalls auf ausreichend Kontrast achten. Hier kann beispielsweise ein dunkler Text über einem hellen Bild platziert werden oder andersherum.
Oftmals kann es auch sinnvoll sein, Bilder mit einem dunklen Overlay abdunkeln, sodass der Kontrast zu hellem Text darüber höher wird. Bei einem unserer Projekte für die Kneipe Sotti’s (LINK CASE STUDY SOTTIS) haben wir beispielsweise einen dunklen radialen Gradienten hinter dem hellen Text platziert, sodass ein höherer Kontrast erreicht wird.
Grundsätzlich wird von den Web Content Accessibility Guidelines (WCAG) empfohlen, für kleine Texte einen minimalen Kontrast von 4.5:1, und für große Texte einen minimalen Kontrast von 3:1 zu erreichen.
Wenn Du genauer testen möchtest, ob Deine Farbwahl ausreichend Kontrast mit sich bringt, kannst Du Tools wie den “Contrast Checker” von coolors verwenden. Aber auch Design-Tools wie Figma haben Plugins, um den Kontrast Deiner Kreationen zu testen.
Setze ausgefallene Fonts, hohe Font Weights, All-Caps-Texte und andere Highlight-Methoden sparsam ein
Der Hauptteil Deiner Website soll einfach lesbar sein und dabei nicht besonders auffallen. Hin und wieder gibt es allerdings Abschnitte, die Du gesondert hervorheben möchtest, da diese besonders wichtig sind.
Für solche Elemente kann es sinnvoll sein, ausgefallene Typefaces, hohe Schriftstärken und komplett groß geschriebene Texte zu verwenden. Um Hierarchie, Balance und Lesbarkeit zu bewahren, sollte man dabei allerdings nicht übertreiben.
Verwende sinnvolle Schriftgrößen
Webdesigner sollten grundsätzlich ihre Schriftgrößen in Pixeln (px) statt Points (pt) definieren, da dies im Online-Bereich der Standard ist.
Ist man sich bei der Wahl der Schriftgröße unsicher, dann ist 16px immer ein guter Startpunkt. Dies funktioniert super für mobile Geräte, kann aber für den Desktop etwas klein wirken. Insbesondere für Webseiten mit viel Text ist eher eine Textgröße um die 18px empfehlenswert.
Sekundäre Texte, also beispielsweise kleine Überschriften, sollten für gewöhnlich 2 bis 3 Größen kleiner als der Haupttext sein.
Für Überschriften kann man die Schriftgröße für den Body-Text hernehmen und sukzessive mit einem Faktor multiplizieren, um die Schriftgrößen aller Überschrift-Typen zu erhalten. Für den Desktop werden hierbei oftmals Faktoren um die Golden Ratio (≈ 1.618) oder bis zu 2 empfohlen.
Eine sinnvolle Größenverteilung kann also beispielsweise folgendermaßen aussehen:
Vermeide Widows, Orphans und unebene Rags
Eine Widow entsteht, wenn das Ende eines Paragraphen ganz oben in einer neuen Spalte in einer einzelnen Zeile landet. Ein Orphan entsteht, wenn das letzte Wort oder die letzte Silbe eines Paragraphen alleine in der letzten Zeile des Paragraphen steht. Wenn die erste Zeile eines Paragraphen in einer separaten Spalte steht, wird dies oft ebenfalls als Orphan bezeichnet.
Der Begriff Rags bezeichnet den unregelmäßigen vertikalen Rand eines Schriftblocks.
Vermehrtes Vorkommen von Widows, Orphans und Rags verschlechtern die Lesbarkeit Deines Textes, weshalb darauf geachtet werden sollte, dies so gut es geht zu vermeiden. Insbesondere bei wichtigen Überschriften ist es wichtig, diese negativen Eigenschaften zu vermeiden.
Wähle sinnvolle Zeilenlängen (45 bis 85 Charaktere)
Seit Jahren sagen Typographen bereits, dass 65 Charaktere die perfekte Zeilenlänge ist. Doch diese Angabe war ursprünglich für den Print gedacht. Ist sie dennoch ebenfalls optimal für den digitalen Bereich?
Verschiedene Quellen empfehlen einen Bereich von 45 bis 85 Charakteren für die Zeilenlänge. Kurzer, und man kommt nicht in den Lesefluss. Länger, und man verliert beim Wechseln zur nächsten Zeile, wo man gerade war.
Deine nächsten Schritte mit den Grundlagen der Typographie im Webdesign
Wir haben Dir die wichtigsten Grundlagen der Typographie im Webdesign vorgestellt. Aber was machst Du jetzt damit? Ganz einfach! Ausprobieren!
Am besten lernt man immer noch, wenn man neue Ideen umsetzt und nicht nur darüber liest. Wähle also ein neues Projekt oder setze Dich an Deine aktuelle Website und probiere die neu gelernten Konzepte aus. Ich wünsche Dir viel Spaß dabei!
