Gute Typografie ist ein notwendiges Element für ein gutes Nutzererlebnis. Damit du dieses Thema besser verstehst, haben wir die besten Tutorials zum Thema Typografie zusammengestellt, die für Anfänger*innen und fortgeschrittene Webdesigner*innen gleichermaßen nützlich sind.
Manche Webdesigner*innen halten die Typografie für eines der unwichtigsten Elemente des Webdesigns, aber sie kann das Nutzererlebnis in vielerlei Hinsicht beeinflussen.
Eine gute Typografie kann die Lesbarkeit, Lesbarkeit, Markenidentität, Zugänglichkeit und Konversionsrate verbessern. Schlechte typografische Entscheidungen hingegen können diese Faktoren schwächen und das Nutzererlebnis ruinieren.
Typografie ist also ein wichtiger Aspekt des Webdesigns und etwas, das jeder Designer lernen sollte, wenn er ein Webdesign-Unternehmen gründet. Zum Glück ist das Internet voll von hilfreichen Typografie-Tutorials und Kursen für Webdesigner.
In diesem Artikel werden wir 20 Webdesign-Tutorials vorstellen. Viele dieser Tutorials sind kostenlos online verfügbar, aber wir haben auch einige kostenpflichtige Online-Kurse aufgenommen. Schließlich muss man sich bei der Suche nach einem Job als Webdesigner von anderen abheben können, und ein Abschlusszertifikat einer anerkannten Institution oder eines Kursanbieters kann dabei helfen.
20 tolle Online-Typografie-Tutorials
Von grundlegenden Begriffen der Typografie bis hin zur Optimierung von Schriften mit CSS – wir haben die besten Typografie-Tutorials für Designer zusammengestellt.
1. Web-Typografie: Der komplette Leitfaden für Designer*innen
Schwierigkeitsgrad: Anfänger+innen bis Fortgeschrittene
Dauer: 30 Minuten
Kosten: Kostenlos
Dieses Typografie-Tutorial stammt von Elementor, was bedeutet, dass du mehr als nur lernst, wie man Typografie im Webdesign einsetzt. Du wirst lernen, wie du all das in die Praxis umsetzt – Dinge wie Formatierung, visuelle Hierarchie, ein Designsystem und so weiter – im Kontext von WordPress und Elementor.
2. So fügst du benutzerdefinierte Schriftarten zu deiner WordPress-Website hinzu
Schwierigkeitsgrad: Anfänger*innen bis Fortgeschrittene
Länge: 17:31
Kosten: Kostenlos
In manchen Fällen verfügt WordPress nicht über die spezifischen Schriftarten, die du verwenden möchtest. In diesem Typografie-Tutorial von Elementor erfährst du, welche Möglichkeiten du hast, um benutzerdefinierte Schriftarten zu einer WordPress-Website hinzuzufügen. Du kannst sie manuell mit CSS zu WordPress hinzufügen oder sie in Elementor hochladen und im Editor verwenden.
3. Globale Farben und Schriftarten von Elementor verwenden
Schwierigkeitsgrad: Anfänger*innen bis Fortgeschrittene
Dauer: 6:50
Kosten: Kostenlos
In diesem Video von Elementor erfährst du alles über die Funktion „Globale Einstellungen“ im Elementor-Editor. Dieses Tutorial zeigt dir, wie du diese Funktion nutzen kannst, um Farben und Schriftarten einzustellen und dann zu sehen, wie sie site-weit angewendet werden. Wenn du also Zeit bei der Aktualisierung deiner Schriftarten sparen und mehr Konsistenz in jede Website bringen willst, die du erstellst, ist dieses kurze Videotutorial ein Muss.
4. Der ultimative Leitfaden für grundlegende Typografie
Schwierigkeitsgrad: Anfänger*innen
Länge: 10:33
Kosten: Kostenlos
Der Name dieses Video-Tutorials von Envato Tuts+ ist etwas irreführend. Es sollte eigentlich „The Ultimate Guide to Basic Typography Terminology“ heißen. Aber wenn Sie ganz neu in der Typografie sind, ist dies ein wichtiger erster Schritt für Sie. Machen Sie sich mit Begriffen aus den Bereichen Typografie, Schriftarten, Dateitypen, Schriftstruktur, Schriftsatz und mehr vertraut.
5. Typografie-Tutorial für Einsteiger*innen: Alles, was du zum Erlernen der Typografie-Grundlagen brauchst
Schwierigkeitsgrad: Anfänger*innen
Dauer: 18 Minuten Lesen
Kosten: Kostenlos
Dieses Typografie-Tutorial von Hubspot ist eine weitere nützliche Einführung in die Typografie im Design. Du lernst gängige Begriffe, verschiedene Typografiestile und woher du deine Schriftarten beziehen kannst.
6. Einführung in die Typografie
Schwierigkeitsgrad: Anfänger*innen
Dauer: 8 Stunden
Kosten: Kostenlos
Wenn du für deine Einführung in die Typografie etwas Gründlicheres suchst, ist dieser Kurs des California Institute of the Arts eine gute Wahl. Die Teilnahme an diesem Kurs ist kostenlos, was ein großes Plus ist, da du eine Menge nützlicher Informationen erhalten wirst. Du lernst etwas über die Geschichte der Typografie, ihre Struktur, wie man sie benutzt, um eine Geschichte zu erzählen, wie man ihr Aussehen manipuliert und vieles mehr.
7. Die Psychologie der Schrift (Schriften, die Emotionen wecken)
Schwierigkeitsgrad: Anfänger*innen
Dauer: 15 Minuten
Kosten: Kostenlos
Wenn du neu im Design bist, ist dieses Tutorial von Envato Tuts+ eine gute Einführung in die Psychologie der Schriftarten. Ähnlich wie bei der Psychologie der Farbe lernst du die üblichen emotionalen Reaktionen auf und Assoziationen mit bestimmten Schriftarten kennen und erhältst Tipps, wie du sie zu deinem Vorteil nutzen kannst.
8. Web-Typografie für Designer*innen und Entwickler*innen
Schwierigkeitsgrad: Anfänger bis Fortgeschrittene
Dauer: 6,5 Stunden
Kosten: $109.99
Dieser Udemy-Kurs über Web-Typografie wird von Rob Sutcliffe von der Interface School unterrichtet. Es handelt sich um einen recht technischen Überblick über Typografie, der die verschiedenen Klassifizierungsarten, Tipps zur Auswahl und Kombination von Schriftarten, zur Verbesserung der Lesbarkeit und Reaktionsfähigkeit Ihrer Web-Typografie und vieles mehr behandelt.
Um diesen Kurs optimal nutzen zu können, solltest du über Grundkenntnisse in HTML, CSS und JavaScript verfügen. Das heißt aber nicht, dass du dich nicht anmelden solltest, wenn du ein neuer Designer bist – du erhältst lebenslangen Zugang zu diesem Kurs, so dass du zu ihm zurückkehren kannst, sobald du deine Fähigkeiten in diesem Bereich verfeinert hast.
9. Textuelle Elemente des Designs: Schriftarten, Typografie und Abstände
Schwierigkeitsgrad: Anfänger*innen
Dauer: 13 Stunden
Kosten: Kostenlos
Dieser Kurs der University of Colorado Boulder ist auf der Coursera-Website verfügbar. Es handelt sich um einen längeren Kurs, in dem du lernst, wie du die Textelemente manipulieren kannst, um mit deinem Design eine Geschichte zu erzählen. Der Kurs geht auf die Grundlagen ein und verzweigt sich dann in Typografieabstände, die Auswahl von Schriftarten, Schriftpaarungen und mehr.
10. Typografie für Designer*innen und Entwickler*innen – Design ist nicht gleich Design
Schwierigkeitsgrad: Fortgeschrittene
Dauer: 8,5 Stunden
Kosten: $99.99
Muhammad Ahsan Pervaiz ist der Schöpfer dieses 4,5-Sterne Udemy-Kurses über Typografie. Wenn du eine umfassende Schulung zu den Grundlagen der Typografie, zur Anpassung der Typografie, zur Auswahl und Kombination von Schriftarten und vielem mehr erhalten möchtest, ist dieser Kurs genau das Richtige für dich. In den Kurs sind Übungen integriert, so dass du auch praktische Erfahrungen bei der Umsetzung des Gelernten sammeln kannst, während du vorankommst.
11. Wann du welche Schriftart verwenden solltest (und wann nicht)!
Schwierigkeitsgrad: Anfänger*innen
Dauer: 12:55
Kosten: Kostenlos
Viele der Tutorials und Kurse, die du bisher in dieser Liste gesehen hast, haben sich mit dem Thema Schriftarten beschäftigt. Dieses Envato Tuts+-Tutorial geht jedoch wirklich in die Tiefe und schlüsselt die verschiedenen Arten und Unterkategorien von Schriftarten auf. Wenn du lernst, die Unterschiede in der Struktur der einzelnen Schriftarten zu erkennen, wird es dir viel leichter fallen, die richtigen Typografiestile für deine Websites auszuwählen.
12. Wie erkennt man, ob eine Schriftart gut oder schlecht ist?
Schwierigkeitsgrad: Anfänger*innen
Länge: 9:58
Kosten: Kostenlos
In diesem Typografie-Tutorial von Flux geht es um die Suche nach hochwertigen Schriftarten für deine Websites. Die Diskussion dreht sich vor allem darum, wie Webdesigner hochwertige Schriftgießereien und Websites finden können, von denen sie die Fonts beziehen. Denn selbst wenn du weißt, welche Art von Schrift du brauchst, kann eine schlecht gemachte Schrift (selbst wenn sie zu diesem Stil passt) all deine harte Arbeit zunichte machen. Diese Anleitung wird dir helfen, dieses Problem zu vermeiden.
13. Auswahl von Web-Schriftarten: Ein Leitfaden für Einsteiger*innen
Schwierigkeitsgrad: Anfänger*innen
Dauer: 10 Minuten
Kosten: Kostenlos
Dies ist ein praktischer Leitfaden von Google Design, mit dem du herausfinden kannst, welche Webfonts für die von dir erstellte Website geeignet sind. Das Tutorial führt dich durch eine Reihe von Faktoren, wie z. B. Projektumfang und mehrsprachiges Design, und verweist dich dann auf Google Fonts, die den Anforderungen deines Projekts entsprechen.
14. Wie du Schriftarten für deine Designs auswählst
Schwierigkeitsgrad: Anfänger*innen
Dauer: 7:35
Kosten: Kostenlos
In dieser Schritt-für-Schritt-Anleitung von Satori Graphics bekommst du praktische Anleitungen und Tipps zur Auswahl von Schriftarten für deine Projekte. Obwohl der Schwerpunkt hier auf Grafikdesign liegt, kannst du die gleichen fünf Schritte auch auf die Auswahl und Kombination von Schriftarten für alle anderen Projekte anwenden, an denen du arbeitest, sei es eine Website, eine App, ein Logo oder eine andere Art von Markenmaterial.
15. Wie man Schriftarten auswählt
Schwierigkeitsgrad: Anfänger*innen
Länge: 9:41
Kosten: Kostenlos
In diesem YouTube-Tutorial von Flux lernst du, wie du dich bei der Auswahl von Schriftarten nicht mehr auf Annahmen oder dein Bauchgefühl verlassen musst. Stattdessen gehst du bei der Auswahl von Schriftarten nach dem Prinzip der Zweckmäßigkeit vor. Außerdem bekommst du Hilfe bei der Suche nach Schriftgießereien, die Grafikmuster zur Verfügung stellen, damit du dich nicht nur darauf verlässt, was dein Bauchgefühl dir sagt, wie gut eine Schrift aussehen wird.
16. Pocket Guide zum Kombinieren von Schriftarten
.
Schwierigkeitsgrad: Anfänger*innen bis Fortgeschrittene
Dauer: 1 Stunde
Kosten: Kostenlos
Schriftarten zu kombinieren ist definitiv eine Kunst. Wenn du also lernen willst, wie man es macht, dann solltest du es von einem der führenden Designer lernen. Dieser Pocket Guide wurde von Tim Brown, dem Leiter der Typografieabteilung von Adobe Typekit & Adobe Type, erstellt. In diesem Leitfaden erfährst du, wie du herausfindest, welche Aufgaben deine Schriften erfüllen müssen, wie du eine Ankerschrift auswählst, wie du Schriften identifizierst, die die Ankerschrift ergänzen, und wie du dein Pairing objektiv beurteilen kannst.
17. Wie man die Schriftart im WordPress-Theme ändert (jedes Theme)
Schwierigkeitsgrad: Anfänger*innen
Dauer: 10 Minuten
Kosten: Kostenlos
Dieses einfache Tutorial von ThemeIsle zeigt dir zwei Möglichkeiten, wie du Schriftarten in WordPress ändern kannst. Du kannst Webfonts über den WordPress Customizer auswählen. Oder du kannst das Easy Google Fonts Plugin installieren und Google Fonts über den Customizer einstellen. Es gibt zwar eine Bonusoption, aber es ist besser, die universellen Schrifteinstellungen von WordPress zu verwenden, als die Schriftarten pro Block oder Seite zu ändern.
18. Moderne CSS-Techniken zur Verbesserung der Lesbarkeit
Schwierigkeitsgrad: Mittelstufe bis Fortgeschrittene
Dauer: 11 Minuten
Kosten: Kostenlos
Edoarda Cavazza hat diesen großartigen Artikel für das Smashing Magazine geschrieben, in dem es um die Verwendung von CSS zur Verbesserung der Lesbarkeit und Zugänglichkeit der Typografie deiner Website geht. In diesem Tutorial geht es insbesondere um die Verwendung von Abständen, um das beste Leseerlebnis für Besucher*innen zu schaffen. Wenn du dich noch nicht mit Kerning, Leading oder Tracking befasst hast oder kein grundlegendes Verständnis von CSS hast, solltest du mit dem Anfang dieser Liste von Typografie-Tutorials beginnen und später zu diesem Tutorial zurückkehren.
19. Einführung in variable Schriftarten im Web
Schwierigkeitsgrad: Mittelstufe bis Fortgeschrittene
Dauer: 20 Minuten
Kosten: Kostenlos
Variable Schriftarten sind eine relativ neue Sache, aber sie werden schnell von allen Browsern unterstützt, was bedeutet, dass es für Designer*innen und Entwickler*innen an der Zeit ist, sie zu verwenden (falls sie es nicht schon getan haben). Wie das Team von Google Developers in diesem Leitfaden zu variablen Schriftarten erklärt, sind sie äußerst wertvoll für die Leistung einer Website, da sie es dir ermöglichen, verschiedene Variationen einer Schriftart in einer einzigen Datei zu speichern. Um zu lernen, wie das geht, benötigen Sie einige CSS-Kenntnisse.
20. Lerne, wie man Schrift verwendet – Typografie-Handbuch-Kritik
Schwierigkeitsgrad: Anfänger*innen bis Fortgeschrittene
Dauer: 30:14
Kosten: Kostenlos
Dies ist ein interessantes Tutorial, denn es ist eigentlich gar kein Tutorial. Im Laufe von 30 Minuten siehst du, wie The Futur die Typografie bewertet, die bei der Erstellung ihres eigenen Typografie-Handbuchs verwendet wurde. Auch wenn sie das gedruckte Handbuch bewerten, ist es dennoch eine hilfreiche Übung, bei der du lernst, wie du deine eigene Arbeit überprüfst und dich daran gewöhnst, von Anfang an klügere Entscheidungen für deine Typografie zu treffen.
Beherrschung der Kunst der Typografie und Verbesserung der Benutzererfahrung
Sobald du einige Zeit mit diesen Typografie-Tutorials verbracht hast und das Wesentliche beherrschst, ist es an der Zeit, das Ganze in die Praxis umzusetzen.
Dabei solltest du bedenken, dass sich die Typografie, wie alles andere im Design auch, mit der Zeit weiterentwickelt. Die zugrundeliegenden Prinzipien und Richtlinien werden gleich bleiben, aber der Geschmack der Menschen wird sich ändern.
Stelle also sicher, dass du nicht nur die Grundlagen der Typografie beherrschst, sondern auch mit den Typografie-Trends Schritt hältst.
Übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/best-typography-tutorials/
