Typographie: 12 handverlesene Infografiken für Einsteiger

Korrekte Typografie ist das vernachlässigte Stiefkind eines manchen Webdesigners. Man könnte mit diesem Thema Jahre verbringen und hätte immer noch nicht alles Wissenswerte darüber erlernt – so scheint es. Doch für Webentwickler bedeutet Zeit immer auch Geld und stundenlange Lektüre von Büchern, Whitepapers und Aufsätzen zum Thema sind einfach nicht drin. Dennoch müssen Webdesigner genug darüber wissen, um fundierte Entscheidungen bezüglich der Typografie in einem Projekt treffen zu können. Natürlich ist das alles leichter gesagt als getan. Genau deswegen haben wir uns im Web einmal für Sie umgesehen und 12 gute Infografiken zum Thema Typografie gefunden.

typographie-infografiken-teaser_DE

12 Infografiken zum Thema Typografie

Die von uns vorgestellten Infografiken verschaffen Ihnen die Grundlagen, um eine gute Entscheidung bei der Auswahl und Kombination von Fonts im Webdesign treffen zu können. Jede Website wird durch eine weise Auswahl und Nutzung von Font-Kombinationen gewinnen und einen wesentlich besseren Eindruck hinterlassen.

1. The 10 Commandments of Typography

Ein Klick auf die Grafik öffnet die volle Auflösung
font-infography-vorschau

Die 10 Gebote der Typografie von DesignMatic.com ist eine Referenz, die sich jeder Webdesigner und Webentwickler in die Lesezeichen speichern sollte. Es wird klar verständlich erklärt, was man auf keinen Fall tun sollte und auch, welche Kombinationen empfehlenswert sind. Vor jedem Projekt angesehen, bringt diese Infografik viel Wissen und typografische Schönheit in ein Projekt.

2. The Art Of Mixing Typefaces (Google Fonts Edition)

Ein Klick auf die Grafik öffnet die volle Auflösung
650-google-fonts-infographic-vorschau

Google Fonts ist eine hervorrage Ressource für Webdesigner und Entwickler. Doch bei mittlerweile über 600 gelisteten Fonts kann die Suche schon mal Zeit in Anspruch nehmen. Wie man die einzelnen Fonts miteinander kombinieren kann, bleibt eine offene Frage und erschwert die Suche zusätzlich ungemein. Die Infografik von FastPrint.co.uk hat sich dieser Thematik angenommen und 20 gut zu kombinierende Fonts herausgesucht. Diese können anhand der Infografik einfach miteinander kombiniert werden, so dass ein ansprechendes Ergebnis erzielt wird.

3. What Are The Origins of The World’s Most Important Typefaces

Ein Klick auf die Grafik öffnet die volle Auflösung
typefaces-large-vorschau

Obwohl wir alle täglich mit vielen verschiedenen Fonts arbeiten, so wissen wir doch sehr wenig über sie. Die Infografik von UberSuper.com möchte uns – grafisch schön aufbereitet – darüber aufklären, wo die einzelnen Schriftarten Ihren Ursprung haben. Die Infografik bietet einen Überblick über die weltweit beliebtesten Schriftarten und Ihre Herkunft.

4. A History of Western Typefaces

Ein Klick auf die Grafik öffnet die volle Auflösung
A History of Western Typefaces

Mashable.com behauptet, wir würden jeden Tag 490.000 Wörter nur im Internet sehen. Nehmen Sie nun noch Printmedien dazu, dürfte die Zahl wohl bedeutend höher liegen. Jedes Wort, welches wir lesen, ist mit einem bestimmten Font „gesetzt“. Die meisten Schriftarten sind gut gelungen und schön anzusehen und zu lesen. Doch das war nicht immer so. Diese Infografik dokumentiert die Geschichte der westlichen Typografie von seinen bescheidenen Anfängen bis hin bis zum heutigen Tag.

5. The Psychology Behind Type Choices

Ein Klick auf die Grafik öffnet die volle Auflösung
Psychology_Behind_Type-vorschau

Diese Infografik von Crazyegg.com hat das Potential, uns im guten Sinne zu beeinflussen und zum richtigen Punkt zu führen. Die Grafik erklärt anschaulich die Psychologie hinter einer Font-Wahl und geht ins Detail über die verschiedenen Arten der Typografie (Serif, Sans-Serif, Skript etc.). Zudem gibt sie uns Hinweise auf die Emotionen, die wir mit der Wahl eines Fonts hervorrufen können.

6. Fantastic Free Fonts and Where to Find Them

Ein Klick auf die Grafik öffnet die volle Auflösung
Fantastic-Fonts

Schöne Schriftarten zu finden ist niemals leicht. Diese Infografik von Plato Web Design verspricht, die Dinge wesentlich einfacher als zuvor zu machen. Es werden grundsätzlich einige der besten typografischen Möglichkeiten für eine Menge Anwendungsbereiche vorgestellt. Zum Beispiel die Wahl der Fonts für Tech-Projekte und vieles mehr. Wenn Sie dazu tendieren, immer die gleichen Fonts für Ihre Projekte zu nutzen, dann ist die Infografik genau richtig für Sie.

7. Periodic Table of Typefaces

Ein Klick auf die Grafik öffnet die volle Auflösung
Periodic_Table_of_Typefaces_small

Sollten Sie sich ein bisschen mit Chemie auskennen, dann ist Ihnen das Periodensystem nicht gänzlich unbekannt. Das Periodensystem stellt alle chemischen Elemente mit steigender Kernladung (Ordnungszahl) und entsprechend ihren chemischen Eigenschaften, eingeteilt in Perioden sowie Haupt- und Nebengruppen dar (Wikipedia).

Diese Infografik – erstellt von Cam Wilde – macht das gleiche für Typografie. Es listet alle Schriftbilder zusammen mit ihren Attributen. Beispielsweise zeigt es die Klassifizierung der einzelnen Schriftbilder (dh Grotesk, serif, Skript, Humanist, Slab-serif, etc.) und ordnet sie in eine bestimmte Reihenfolge.

8. The Guide to Typography and Fonts

Ein Klick auf die Grafik öffnet die volle Auflösung
font-deconstruction-small

Die Infografik von Thelogocompany.net bereitet sehr schön Grundwissen über Fonts und Typografie auf. Es zeigt Ihnen ein Diagramm von jedem Attribut einer Schriftart. Die Attribute werden im einzelnen vorgestellt und benannt, zum Beispiel die Querlatte, das Kerning, das Bein, die Spur und die Schulter und vieles mehr. Sollten Sie sich mit diesen Dingen nicht auskennen, dann ist diese Infografik genau das Richtige für Sie.

9. Fonts and Feelings: Psychology in Typography

Ein Klick auf die Grafik öffnet die volle Auflösung
Typography and Psychology

Diese schön gemachte Infografik von Designtaxi.com möchte darauf hinweisen, dass Schriftarten nicht nur schön aussehen, sondern auch Emotionen bei einem Leser hervorrufen sollen. Jede Schriftart wird hierbei anders wahrgenommen. Viele Designer missverstehen diese Tatsache, doch ausgerüstet mit dieser Infografik vermag ein Designer das Konzept der Typografie und der verbundenen Emotionen schneller umzusetzen.

Es werden Beispiele für viele verschiedene Arten von Schriften (zum Beispiel Serif, Sans Serif, etc.) gezeigt und man bekommt eine Anleitung an die Hand, wie die Schriften höchstwahrscheinlich wahrgenommen werden. Die Infografik geht sehr ins Details und gibt Ihnen ein paar Schriften an die Hand, die Sie verwenden können, um bestimmte Wahrnehmungen zu erreichen.

10. A Quick and Comprehensive Type Guide

Ein Klick auf die Grafik öffnet die volle Auflösung
A Quick and Comprehensive Typeguide

Es gibt so vieles über Typografie zu lernen und zu verstehen. Sollten Sie sich mit dem ganzen nötigen Input etwas „überfordert“ fühlen, dann ist diese Infografik von Fastcodesign.com vielleicht genau das Richtige für Sie. Diese Infografik bietet Ihnen eine schnelle und relativ umfassende Anleitung für die Basics, die man als Designer wissen sollte. Die Grundlagen der Typografie können Sie auf diese Art innerhalb von nur wenigen Minuten erlernen.

11. So You Need A Typeface

Ein Klick auf die Grafik öffnet die volle Auflösung
So you need a typeface

Sie benötigen eine Schriftart? Dann kann Ihnen diese einfache Infografik von Julian Hansen bei der Auswahl einer Schriftart für Ihr nächstes Projekt helfen. Beginnen Sie mit der Auswahl einer Projektart (zum Beispiel Logo, Flyer, Einladung, Infografik). Danach folgen Sie den Fragestellungen (Ja oder Nein) und die Grafik führt Sie zu der perfekten Wahl der Schriftart(en) für Ihr Projekt.

Vielleicht erscheint die Grafik etwas umfangreich und kompliziert beim ersten Mal, allerdings führt sie relativ schnell zum Ziel, namentlich den passenden Fonts.

12. A Brief Introduction to Typography

Ein Klick auf die Grafik öffnet die volle Auflösung
brief_introduction_typography-small

Diese Infografik – erstellt von Buscando Trazos – bietet eine elegante Einführung in die Typografie. Es beginnt mit einer Liste der hundert besten Schriften (die wunderschön in einem Kreisdiagramm angeordnet sind), gefolgt von mehr Details über die Top-10 Schriftarten. Danach bietet eine Zeitleiste einen kurzen Einblick in die Geschichte der Schriften.

Im Anschluss werden einige Informationen zu den verschiedenen Klassifizierungen gegeben, und schließlich wird die Anatomie der Schriftarten und deren Eigenschaften gezeigt.

Fazit

Die Infografiken in diesem Artikel bieten einen guten Einstieg in die Welt der Typografie. Sie eignen sich sehr gut dazu, sich das nötige Grundwissen zu beschaffen und anzuwenden. Habe ich ein oder mehrere gute Exemplare vergessen? Welche ist Ihr Favorit!

Links zum Thema

(dpe)

ist freier Journalist, WordPress-Entwickler und Spezialist für WordPress-Sicherheit. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog TechBrain.de schreibt er über das Bloggen und veröffentlicht nützliche WordPress-Snippets.