Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 13. Juli 2015

Typographie: 12 handverlesene Infografiken für Einsteiger

Korrekte Typografie ist das ver­nach­läs­sig­te Stiefkind eines man­chen Webdesigners. Man könn­te mit die­sem Thema Jahre ver­brin­gen und hät­te immer noch nicht alles Wissenswerte dar­über erlernt – so scheint es. Doch für Webentwickler bedeu­tet Zeit immer auch Geld und stun­den­lan­ge Lektüre von Büchern, Whitepapers und Aufsätzen zum Thema sind ein­fach nicht drin. Dennoch müs­sen Webdesigner genug dar­über wis­sen, um fun­dier­te Entscheidungen bezüg­lich der Typografie in einem Projekt tref­fen zu kön­nen. Natürlich ist das alles leich­ter gesagt als getan. Genau des­we­gen haben wir uns im Web ein­mal für Sie umge­se­hen und 12 gute Infografiken zum Thema Typografie gefun­den.

typographie-infografiken-teaser_DE

12 Infografiken zum Thema Typografie

Die von uns vor­ge­stell­ten Infografiken ver­schaf­fen Ihnen die Grundlagen, um eine gute Entscheidung bei der Auswahl und Kombination von Fonts im Webdesign tref­fen zu kön­nen. Jede Website wird durch eine wei­se Auswahl und Nutzung von Font-Kombinationen gewin­nen und einen wesent­lich bes­se­ren Eindruck hin­ter­las­sen.

1. The 10 Commandments of Typography

Ein Klick auf die Grafik öff­net die vol­le 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 spei­chern soll­te. Es wird klar ver­ständ­lich erklärt, was man auf kei­nen Fall tun soll­te und auch, wel­che Kombinationen emp­feh­lens­wert sind. Vor jedem Projekt ange­se­hen, bringt die­se Infografik viel Wissen und typo­gra­fi­sche Schönheit in ein Projekt.

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

Ein Klick auf die Grafik öff­net die vol­le Auflösung
650-google-fonts-infographic-vorschau

Google Fonts ist eine her­vor­ra­ge Ressource für Webdesigner und Entwickler. Doch bei mitt­ler­wei­le über 600 gelis­te­ten Fonts kann die Suche schon mal Zeit in Anspruch neh­men. Wie man die ein­zel­nen Fonts mit­ein­an­der kom­bi­nie­ren kann, bleibt eine offe­ne Frage und erschwert die Suche zusätz­lich unge­mein. Die Infografik von FastPrint.co.uk hat sich die­ser Thematik ange­nom­men und 20 gut zu kom­bi­nie­ren­de Fonts her­aus­ge­sucht. Diese kön­nen anhand der Infografik ein­fach mit­ein­an­der kom­bi­niert wer­den, so dass ein anspre­chen­des Ergebnis erzielt wird.

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

Ein Klick auf die Grafik öff­net die vol­le Auflösung
typefaces-large-vorschau

Obwohl wir alle täg­lich mit vie­len ver­schie­de­nen Fonts arbei­ten, so wis­sen wir doch sehr wenig über sie. Die Infografik von UberSuper.com möch­te uns – gra­fisch schön auf­be­rei­tet – dar­über auf­klä­ren, wo die ein­zel­nen Schriftarten Ihren Ursprung haben. Die Infografik bie­tet einen Überblick über die welt­weit belieb­tes­ten Schriftarten und Ihre Herkunft.

4. A History of Western Typefaces

Ein Klick auf die Grafik öff­net die vol­le Auflösung
A History of Western Typefaces

Mashable.com behaup­tet, wir wür­den jeden Tag 490.000 Wörter nur im Internet sehen. Nehmen Sie nun noch Printmedien dazu, dürf­te die Zahl wohl bedeu­tend höher lie­gen. Jedes Wort, wel­ches wir lesen, ist mit einem bestimm­ten Font “gesetzt”. Die meis­ten Schriftarten sind gut gelun­gen und schön anzu­se­hen und zu lesen. Doch das war nicht immer so. Diese Infografik doku­men­tiert die Geschichte der west­li­chen Typografie von sei­nen beschei­de­nen Anfängen bis hin bis zum heu­ti­gen Tag.

5. The Psychology Behind Type Choices

Ein Klick auf die Grafik öff­net die vol­le Auflösung
Psychology_Behind_Type-vorschau

Diese Infografik von Crazyegg.com hat das Potential, uns im guten Sinne zu beein­flus­sen und zum rich­ti­gen Punkt zu füh­ren. Die Grafik erklärt anschau­lich die Psychologie hin­ter einer Font-Wahl und geht ins Detail über die ver­schie­de­nen Arten der Typografie (Serif, Sans-Serif, Skript etc.). Zudem gibt sie uns Hinweise auf die Emotionen, die wir mit der Wahl eines Fonts her­vor­ru­fen kön­nen.

6. Fantastic Free Fonts and Where to Find Them

Ein Klick auf die Grafik öff­net die vol­le Auflösung
Fantastic-Fonts

Schöne Schriftarten zu fin­den ist nie­mals leicht. Diese Infografik von Plato Web Design ver­spricht, die Dinge wesent­lich ein­fa­cher als zuvor zu machen. Es wer­den grund­sätz­lich eini­ge der bes­ten typo­gra­fi­schen Möglichkeiten für eine Menge Anwendungsbereiche vor­ge­stellt. Zum Beispiel die Wahl der Fonts für Tech-Projekte und vie­les mehr. Wenn Sie dazu ten­die­ren, immer die glei­chen Fonts für Ihre Projekte zu nut­zen, dann ist die Infografik genau rich­tig für Sie.

7. Periodic Table of Typefaces

Ein Klick auf die Grafik öff­net die vol­le Auflösung
Periodic_Table_of_Typefaces_small

Sollten Sie sich ein biss­chen mit Chemie aus­ken­nen, dann ist Ihnen das Periodensystem nicht gänz­lich unbe­kannt. Das Periodensystem stellt alle che­mi­schen Elemente mit stei­gen­der Kernladung (Ordnungszahl) und ent­spre­chend ihren che­mi­schen Eigenschaften, ein­ge­teilt in Perioden sowie Haupt- und Nebengruppen dar (Wikipedia).

Diese Infografik – erstellt von Cam Wilde – macht das glei­che für Typografie. Es lis­tet alle Schriftbilder zusam­men mit ihren Attributen. Beispielsweise zeigt es die Klassifizierung der ein­zel­nen Schriftbilder (dh Grotesk, serif, Skript, Humanist, Slab-serif, etc.) und ord­net sie in eine bestimm­te Reihenfolge.

8. The Guide to Typography and Fonts

Ein Klick auf die Grafik öff­net die vol­le Auflösung
font-deconstruction-small

Die Infografik von Thelogocompany.net berei­tet sehr schön Grundwissen über Fonts und Typografie auf. Es zeigt Ihnen ein Diagramm von jedem Attribut einer Schriftart. Die Attribute wer­den im ein­zel­nen vor­ge­stellt und benannt, zum Beispiel die Querlatte, das Kerning, das Bein, die Spur und die Schulter und vie­les mehr. Sollten Sie sich mit die­sen Dingen nicht aus­ken­nen, dann ist die­se Infografik genau das Richtige für Sie.

9. Fonts and Feelings: Psychology in Typography

Ein Klick auf die Grafik öff­net die vol­le Auflösung
Typography and Psychology

Diese schön gemach­te Infografik von Designtaxi.com möch­te dar­auf hin­wei­sen, dass Schriftarten nicht nur schön aus­se­hen, son­dern auch Emotionen bei einem Leser her­vor­ru­fen sol­len. Jede Schriftart wird hier­bei anders wahr­ge­nom­men. Viele Designer miss­ver­ste­hen die­se Tatsache, doch aus­ge­rüs­tet mit die­ser Infografik ver­mag ein Designer das Konzept der Typografie und der ver­bun­de­nen Emotionen schnel­ler umzu­set­zen.

Es wer­den Beispiele für vie­le ver­schie­de­ne Arten von Schriften (zum Beispiel Serif, Sans Serif, etc.) gezeigt und man bekommt eine Anleitung an die Hand, wie die Schriften höchst­wahr­schein­lich wahr­ge­nom­men wer­den. Die Infografik geht sehr ins Details und gibt Ihnen ein paar Schriften an die Hand, die Sie ver­wen­den kön­nen, um bestimm­te Wahrnehmungen zu errei­chen.

10. A Quick and Comprehensive Type Guide

Ein Klick auf die Grafik öff­net die vol­le Auflösung
A Quick and Comprehensive Typeguide

Es gibt so vie­les über Typografie zu ler­nen und zu ver­ste­hen. Sollten Sie sich mit dem gan­zen nöti­gen Input etwas “über­for­dert” füh­len, dann ist die­se Infografik von Fastcodesign.com viel­leicht genau das Richtige für Sie. Diese Infografik bie­tet Ihnen eine schnel­le und rela­tiv umfas­sen­de Anleitung für die Basics, die man als Designer wis­sen soll­te. Die Grundlagen der Typografie kön­nen Sie auf die­se Art inner­halb von nur weni­gen Minuten erler­nen.

11. So You Need A Typeface

Ein Klick auf die Grafik öff­net die vol­le Auflösung
So you need a typeface

Sie benö­ti­gen eine Schriftart? Dann kann Ihnen die­se ein­fa­che Infografik von Julian Hansen bei der Auswahl einer Schriftart für Ihr nächs­tes Projekt hel­fen. Beginnen Sie mit der Auswahl einer Projektart (zum Beispiel Logo, Flyer, Einladung, Infografik). Danach fol­gen Sie den Fragestellungen (Ja oder Nein) und die Grafik führt Sie zu der per­fek­ten Wahl der Schriftart(en) für Ihr Projekt.

Vielleicht erscheint die Grafik etwas umfang­reich und kom­pli­ziert beim ers­ten Mal, aller­dings führt sie rela­tiv schnell zum Ziel, nament­lich den pas­sen­den Fonts.

12. A Brief Introduction to Typography

Ein Klick auf die Grafik öff­net die vol­le Auflösung
brief_introduction_typography-small

Diese Infografik – erstellt von Buscando Trazos – bie­tet eine ele­gan­te Einführung in die Typografie. Es beginnt mit einer Liste der hun­dert bes­ten Schriften (die wun­der­schön in einem Kreisdiagramm ange­ord­net sind), gefolgt von mehr Details über die Top-10 Schriftarten. Danach bie­tet eine Zeitleiste einen kur­zen Einblick in die Geschichte der Schriften.

Im Anschluss wer­den eini­ge Informationen zu den ver­schie­de­nen Klassifizierungen gege­ben, und schließ­lich wird die Anatomie der Schriftarten und deren Eigenschaften gezeigt.

Fazit

Die Infografiken in die­sem Artikel bie­ten einen guten Einstieg in die Welt der Typografie. Sie eig­nen sich sehr gut dazu, sich das nöti­ge Grundwissen zu beschaf­fen und anzu­wen­den. Habe ich ein oder meh­re­re gute Exemplare ver­ges­sen? Welche ist Ihr Favorit!

Links zum Thema

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.