4.8
(67)

Der ausführliche Überblick

Schriftarten

Auf dieser Seite bekommst du einen umfangreichen Einblick in Schriftarten und deren Einteilung. Ich zeige dir  Einsatzgebiete und viele Beispiele. Zusätzlich erfährst du u. a., wo man Schriftarten finden und identifizieren kann.

Es gibt zigtausende Schriftarten. Um da einen Überblick zu behalten, gibt es sogar eine DIN-Norm (DIN 16518), die diese in elf Gruppen nach bestimmten optischen und historischen Kriterien sortiert. Für den Alltagsgebrauch ist diese Einteilung aber nur bedingt tauglich.

Daher wird gerne ein vereinfachtes System benutzt, das die Schriften zuerst in vier Kategorien eingeteilt, die sich dann auch noch weiter unterteilen lassen:

Das Verständnis der Schriftarten und ihrer Unterschiede ist essentiell, um selber eine gelungene typografische Gestaltung hinzubekommen.

Folgende Inhalte können dir neben den Schriftartendefinitionen ebenfalls helfen:

Serifenschriften

Mit Serifen sind diese feinen (manchmal auch dicken) Striche / häkchenartigen Erweiterungen am Buchstabenende gemeint:

Schriftarten – eine Einführung und Überblick 1

Die Serifen sollten dem Auge mehr Halt beim Lesen geben und damit die Lesbarkeit verbessern. Zeitungen und Bücher sind daher meistens in Serifenschriften gesetzt. Serifenschriften werden auch als Antiqua-(Schriften) bezeichnet.

Die verbesserte Lesbarkeit gilt nicht pauschal, sondern hängt im Detail von der Schriftart selber und anderen Einstellungen ab (die Sie im Laufe dieses Moduls noch kennenlernen werden).

Wichtig ist: Die vermeintlich bessere Lesbarkeit der Serifenschriften gegenüber serifenlosen Schriften trifft auf Bildschirmen – und damit im Webdesign – nicht immer zu.

Je nach Bildschirmauflösung verschlechtert sich die Lesbarkeit sogar, da die feinen Serifen nicht gestochen scharf dargestellt werden können.

Die Serifenschriften lassen sich in vier Unterbereiche aufteilen:

Schriftarten – eine Einführung und Überblick 2
Unterschiedliche Serifenschritftarten mit unterschiedlichen Serifenstilen und unterschiedlich guter Lesbarkeit
„Schriftarten mit Serifen haben oft einen etwas distanzierten, institutionellen Beigeschmack.“
Designer Dylan Todd

Klassische Serifenschriften

Diese „old-style“ Serifenschriften wirken sprichwörtlich alt, oder positiv formuliert: traditionell und historisch. Der Übergang zwischen den dünnen und dicken Strichen ist abgerundet:

Klassische Serifenschriftart
Die Garamond als klassische Serifenschrift

Sie vermitteln einen historischen Charme und können durchaus auch in modernen Publikationen zur Anwendung kommen.

In Headlines können die klassischen Serifenschriften ihre volle Wirkung entfalten. Je kleiner der Text, umso weniger sollten sie aber eingesetzt werden.

In Webdesigns vermitteln klassische Serifenschriften meistens einen modernen hochwertigen Stil:

Wirkung klassischer Serifenschriften:
Klassisch, traditionell, stillvoll, hochwertig

Beispiele für klassische Serifenschriften bei Webfonts-Anbietern:

Google Fonts:
Cormorant
EB Garamond
Crimson Text

Adobe Fonts:
Mrs Eaves
Adobe Caslon
Marco

Klassische Serifenschriftart
Klassische Serifenschriftarten im UI Design

Transitional Serifenschriften

Transitional Serifenschriften sind den klassischen Serifen ähnlich, nur dass die Enden der Serifen eckig sind:

Schriftarten – eine Einführung und Überblick 3

Sie wirken etwas moderner und leicht mechanisch und dadurch, dass sie nicht mehr so „antiquiert“ wie die klassischen Serifenschriften anmuten, werden sie öfters eingesetzt. Dies liegt auch an der besseren Lesbarkeit auf Bildschirmen.

Typische Transitional Serifenschriften sind z. B. die Times New Roman, Georgia und Baskerville.

Die Transitional Serifenschriften sind so etwas wir der Übergang zwischen den klassischen und den modernen Serifenschriften.

Wirkung transitional Serifenschriften:
Traditionell, erhaben, klassisch, aber gleichzeitig auch modern und hochwertig

Beispiele für transitional Serifenschriften bei Webfonts-Anbietern:

Google Fonts:
PT Serif
Bitter
IBM Plex Serif

Adobe Fonts:
Kepler
Freight Text
Adobe Text
FF Tisa

Transitional Serifenschriften im Webdesign
Transitional Serifenschriften auf Websites

Moderne Serifenschriften

Diese Schriftarten haben einen starken Kontrast zwischen dünnen und dicken Strichen, dazu keinen abgerundeten Übergang:

Schriftarten – eine Einführung und Überblick 4

Aufgrund des starken Strichstärken-Kontrastes sind diese Schriften weniger gut lesbar und eher nur für Headlines geeignet.

Wirkung moderner Serifenschriften:
Elegant, modisch, kultiviert, zeitlos

Beispiele für moderne Serifenschriften bei Webfonts-Anbietern:

Google Fonts:
Bodoni Moda
Antic Didone

Adobe Fonts:
Linotype Didot
Bodoni URW
Heimat Didone

Moderne Serifenschriften auf Websites
Moderne Serifenschriften im Webdesign

Slab Serifen

Diese Schriften haben gar keinen oder nur wenig Kontrast zwischen den dünnen und dicken Linien:

Schriftarten – eine Einführung und Überblick 5

Die Serifen kommen daher sehr zur Geltung, die Texte sind dadurch sehr aufmerksamkeitsstark. Die Wirkung ist einerseits kraftvoll und stark, aber auch recht industriell-technisch und kühl.

Wie die modernen Serifenschriften eignen sich diese eher nur für Headlines.

Wirkung Slab Serifenschriften:
Stark, kraftvoll, technisch

Beispiele für Slab Serifenschriften bei Webfonts-Anbietern:

Google Fonts:
Zilla Slab
Josefin Slab
Roboto Slab

Adobe Fonts:
Yorkten Slab
Pragmatica Slabserif
Novecento Slab

Slab Serifenschriften im Webdesign

Serifenlose Schriften

Sie werden auch Sans-Serif, Linear-Antiqua oder Grotesk-Schriften genannt und besitzen keine Serifen, die Strichstärken sind nahezu einheitlich.

Sie wirken modern und zeitlos und kommen oft zum Einsatz, gerade auch auf Bildschirmen aufgrund der guten Lesbarkeit.

In User Interfaces sind serifenlose Schriften immer eine gute Wahl. Sie sind bei kleineren Größen gut lesbar und haben da deutliche Vorteile gegenüber Serifenschriften. Je größer der Text, umso geringer werden die allerdings die Unterschiede zu Serifenschriften.

Wirkung serifenlose Schriften:
Modern, klar, nüchtern, universell, objektiv, stabil, zeitgemäß/modern

Beispiele für serifenlose Schriftem bei Webfonts-Anbietern:

Google Fonts:
Noto Sans
Lato
Nunito
Inter

Adobe Fonts:
Acumin
Franklin Gothic URW
Futura PT
Nimbus Sans

Serifenlose Schriftarten im Webdesign
Serifenlose Schriften im Webdesign

Serif vs. Sans Serif

Welche Fonts sollten für Webseiten genutzt werden ​

Bei der Wahl einer Schriftart steht meistens zuerst die Entscheidung zwischen einer Serifen- oder serifenlosen Schriftart an. Ganz allgemein lässt sich folgendes festhalten:

Im Printbereich werden in Magazinen, Büchern und Zeitungen meistens Serifen-Schriftarten für (Fließ-)Texte eingesetzt. Diese fördern den Lesefluss. Währen serifenlose Schriftarten eher in Fachbüchern zum Einsatz kommen, damit genau auf jedes Wort geachtet wird.

Im Web war es lange anders, es gab (und gibt teilweise immer noch) Probleme mit der Darstellung feiner Serifen. Daher wird hier für kleinere Texte auf serifenlose Schriftarten zurückgegriffen, wie bspw. für Fließtexte. Bei Überschriften sieht das schon wieder anders aus. Hier ist man – sowohl im Web wie auch Print – freier bei der Entscheidung zwischen „Serif oder Sans Serif“-Schriften.

Schriftarten – eine Einführung und Überblick 6
Die bunte Vielfalt an Serifen- und serifenlosen Schriftarten auf Websites.

Sonstige Schriften

Neben den genannten „Standard“-Schriftarten gibt es noch die Schreibschriften und dekorative Schriften. Hier fällt sozusagen der ganze Rest hinein. Sie sind für Fließtexte ungeeignet, könnten bei Headlines Akzente setzen. Aber generell sind diese eher mit Bedacht einzusetzen.

Schreibschriften

Schreibschriften können einen persönlichen und authentischen Charakter vermitteln, sind aber – wie bei Handschriften eben so üblich – unterschiedlich gut lesbar. Die Auswahl reicht von eleganten bis zu verspielten Handschriften.

Schriftarten – eine Einführung und Überblick 7
Schreibschriften gibt es in vielen unterschiedlichen Stilrichtungen.
Für (kurze, vereinzelte) Headlines oder Akzente mögen Schreibschriften noch in Ordnung sein, längere Texte sollte aber vermieden werden. Im Webdesign können diese Schriftarten (höchstens) einmal gezielt Akzente setzen:

Wirkung Schreibschriften:
Persönlich, authentisch, verspielt

Beispiele für klassische Schreibschriften bei Webfonts-Anbietern:

Google Fonts:
Kalam
Pacifico
Dancing Script

Adobe Fonts:
FF Market
Graphite
Adobe Handwriting

Schreibschriften im Einsatz.
Schreibschriften im Webdesign

Dekorative Schriften

Schriftarten, die besonders auffällig und dekorativ sind (und in keine der anderen Kategorien passen), sie werden auch Display-Schriften genannt.

Die Vielfalt an dekorativen Schriften ist groß und reicht von futuristischen über verspielten bis zu „abgewetzten“ Fonts:

Dekorative Schriften & Display-Schriften im Webdesign

Auch diese sind eher für große Texte/Headlines geeignet (wenn überhaupt) und kaum für kleinere Texte.

Im Webdesign können diese Schriftarten (höchstens) einmal gezielt Akzente setzen.

Wirkung dekorativer Schriften:
Verspielt, individuell, „das gewisse Etwas“

Beispiele für dekorative Schriften bei Webfonts-Anbietern:

Google Fonts:
Lobster
Bungee Shade
Poiret One

Adobe Fonts:
Orbitron
Saffran
Milka

Dekorative Schriften im Einsatz.
Schriftarten – eine Einführung und Überblick 8

Schriften mit gleicher Zeichenbreite

Als Besonderheit könnte man noch die Monospace-Schriften einzeln auflisten. Die Buchstaben beanspruchen hier alle denselben Platz, sie heißen daher auch nicht-proportionale Schriften.

Schriften mit gleicher Zeichenbreite

Diese waren einst für Schreibmaschinen sinnvoll, werden heutzutage zum Beispiel beim Programmieren eingesetzt, wo jedes Zeichen eine sehr große Rolle spielen kann.

Auch HTML- und CSS-Code wird in den Code-Editoren damit angezeigt.

Code in Schriften mit gleicher Zeichenbreite

Aber in Designs finden die Monospace-Schriften ihren Einsatz. Bei Fließtexten eher ungeeignet, Headlines oder generell kürzere Texte können sie Akzente setzen wie in diesen Beispielen:

Wirkung Schriften mit gleicher Zeichenbreite:
Technisch, kühl, modern

Beispiele für Schriften mit gleicher Zeichenbreite bei Webfonts-Anbietern:

Google Fonts:
Roboto Mono
IBM Plex Mono
DM Mono

Adobe Fonts:
Source Code
Interstate Mono
Base Mono

Schriften mit gleicher Zeichenbreite im Einsatz.
Schriften mit gleicher Zeichenbreite in Webdesigns..

Schriftarten erkennen

Es kommt immer wieder vor, dass man eine schöne Schriftart gefunden hat, die man selber vielleicht auch gerne einsetzen würde. Problem: Die Schriftart ist in einem Logo, einer Drucksache oder einer Website – natürlich ohne Namensangabe. Hier für gibt es unterschiedliche Möglichkeiten trotzdem den Namen der Schriftart herauszubekommen.

Um Schriftarten in Websites zu identifizieren bedarf es eigentlich nur weniger Code-Kenntnisse. Mit den sog. „Webentwickler-Tools“ lassen sich diese herausfinden. Wer damit nicht umzugehen weiß – oder es noch einfacher mag – für den gibt es Browsererweiterungen, die entsprechende Infos liefern.

Browser-Erweiterungen, die bei der Schrifterkennung helfen:
Fonts Ninja
Fount
WhatFont (Firefox)
WhatFont (Chrome)

Schriftart erkennen
Schriftart erkennen mit dem Online-Tool WhatTheFont.

Liegt der Text in Bildform vor (Foto, Scan oder auch Screenshot), dann gibt es Online-Tools, die bei der Schrifterkennung helfen. Teilweise gibt es von den Tools auch Apps, die die Schriftartenerkennung dann ganz einfach per Smartphone ermöglichen.

Tipps zur Schrifterkennung in den Online-Tools:

  • Möglichst großer Helligkeitskontrast zwischen Text- und Hintergrundfarbe. Ideal ist schwarze Schrift auf weißem Grund.
  • Je besser die Auflösung und je weniger optische „Störgeräusche“ um den Text sind, umso besser kann die Schriftart identifiziert werden.
  • Der Text sollte horizontal ausgerichtet sein.
  • Die Buchstaben sollten nicht zu dicht beieinander stehen oder mit anderen visuellen Elementen kollidieren.
  • Der Text sollte möglichst nur lateinische Buchstaben enthalten.
  • Der Text sollte nur eine zu identifizierende Schriftart enthalten.
  • Bei Bedarf den Text per Bildbearbeitungs-/Grafikprogramm entsprechend bearbeiten/zurechtschneiden.

Systemschriftarten – Websafe Fonts

Die im Betriebssystem vorinstallierten Schriftarten heißen Systemschriften. Leider sind nicht überall dieselben Schriftarten vorinstalliert. Wenn man auf Systemschriften zurückgreifen möchte, muss man einen kleinen gemeinsamen Nenner suchen, den möglichst die meisten User zur Verfügung haben. Es bleiben dann nur wenige Schriftarten übrig. Diese nennt man das websichere Schriftarten (Websafe Fonts).

Systemschriften - Websafe Fonts
Überblick über die verbreitesten Systemschriften / Websafe Fonts

Eine umfangreiche Übersicht der Systemschriften gibt es bei:
CSS Font Stack.

Vorteile der websichere Schriftarten:

  • Müssen nicht geladen werden, da sie schon auf dem Anwender-Computer installiert sind.
  • Sind meistens für die Darstellung auf Bildschirmen optimiert.

Websichere Schriftarten, die man ruhigen Gewissens einsetzen kann:

  • Arial (sans-serif)
  • Arial Black (sans-serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Impact (sans-serif)
  • Times New Roman (serif)
  • Didot (serif)
  • Georgia (serif)
  • American Typewriter (serif)
  • Andalé Mono (monospace)
  • Courier (monospace)
  • Lucida Console (monospace)
  • Monaco (monospace)
  • Comic Sans MS (cursive)

Schriftarten finden

Die besten Ressourcen für neue Schriftarten

Es gibt unzählige Schriftarten, so dass der Überblick nicht nur schwer fällt, sondern eigentlich nicht zu schaffen ist. Ich habe dir aber ein paar Links zu Schriftarten-Ressourcen zusammen gestellt. Unterteilt in kostenlose und kostenpflichtige Schriftarten.

Denk daran günstig ist auch manchmal billig ( aber nicht immer 😉

Überblick an Quellen von kostenpflichtigen Schriftarten:

MyFonts
FontShop
Montotype
Adobe Fonts

Schriftarten – eine Einführung und Überblick 9
Font Foundries bieten hochwertige Schriftarten, an denen man sich noch nicht satt gesehen hat.

Schriftarten kennenlernen, finden und identifizieren.

Der Überblick über die verschiedenen Schriftarten ist wichtig, um ein Verständnis für diese und ihre Wirkungen zu bekommen. Dies hilft bei der Wahl der passenden Schriftarten und bei der typografischen Gestaltung.

Schriftarten – eine Einführung und Überblick 10

Über 8.250 sind schon dabei:

Exklusive Webdesign-Inhalte

Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps

Deine Daten sind sicher. Mehr Infos: Beispiele, Datenschutz, Analyse und Widerruf

Optimiere Websites und
deinen Webdesign-Workflow:

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.
Mehr über diese Website und den Autor erfahren   →

Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.

Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…

Bewertungsergebnis: 4.8 / 5. | Anzahl der Bewertungen: 67

Nach oben scrollen

Über 8.250 sind schon dabei!

Exklusive Webdesign-Inhalte

Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps: