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:
Mit Serifen sind diese feinen (manchmal auch dicken) Striche / häkchenartigen Erweiterungen am Buchstabenende gemeint:
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 mit Serifen haben oft einen etwas distanzierten, institutionellen Beigeschmack.“Designer Dylan Todd
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:
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
Transitional Serifenschriften sind den klassischen Serifen ähnlich, nur dass die Enden der Serifen eckig sind:
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
Diese Schriftarten haben einen starken Kontrast zwischen dünnen und dicken Strichen, dazu keinen abgerundeten Übergang:
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
Diese Schriften haben gar keinen oder nur wenig Kontrast zwischen den dünnen und dicken Linien:
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
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
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.
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 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.
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
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:
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
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.
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.
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
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)
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.
Online-Tools zur Schrifterkennung:
WhatTheFont
Font Finder
Fontspring Matcherator
Font Identifier
Identifont
Tipps zur Schrifterkennung in den Online-Tools:
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).
Eine umfangreiche Übersicht der Systemschriften gibt es bei:
CSS Font Stack.
Vorteile der websichere Schriftarten:
Websichere Schriftarten, die man ruhigen Gewissens einsetzen kann:
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 kostenlosen Schriftarten:
Google Fonts
Graphic design junction
1001fonts
Freebiesbug
Urbanfonts
Fontspace
DaFont
Font Squirrel
Fontdaddy
Free Fonts Download
Überblick an Quellen von kostenpflichtigen Schriftarten:
Font Foundries – Schriften direkt vom Hersteller:
Just another Foundry
TypeMates
FDI Type Foundry
Typotheque
Fontfabric
Fontwerk
Fontsmith
Hoefler&Co.
Good Type Foundry
Black[Foundry]
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.
Über 8.500 sind schon dabei:
Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps
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.
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…
Unser Content wird täglich von tausenden Webdesignern genutzt
Webdesign Journal – Webdesign aus Leipzig und Frankfurt am Main
Ein Projekt von hahnsinn – Webdesignagentur aus Leipzig & Frankfurt am Main
Über 8.500 sind schon dabei!
Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps:
