Einige Webdesigner mögen Typografie als eines der am wenigsten wichtigen Elemente des Webdesigns betrachten, jedoch kann sie die Benutzererfahrung auf vielfältige Weise entscheidend beeinflussen.

Gute typografische Entscheidungen können die Lesbarkeit, Verständlichkeit, Markenidentität, Zugänglichkeit und Konversionsrate stärken. Schlechte typografische Entscheidungen hingegen können diese Faktoren schwächen und die Benutzererfahrung beeinträchtigen.

Typografie ist demnach ein wichtiger Aspekt des Webdesigns und etwas, das jeder Designer erlernen sollte, wenn er ein Webdesign-Unternehmen gründet. Glücklicherweise ist das Internet voll von hilfreichen Typografie-Tutorials und Kursen für Webdesigner.

In diesem Artikel werden wir 20 Webdesign-Tutorials besprechen. Während viele dieser Tutorials kostenlos online verfügbar sind, haben wir auch einige kostenpflichtige Online-Kurse aufgenommen. Schließlich müssen Sie sich abheben können, wenn Sie versuchen, Webdesign-Aufträge zu finden, und ein Abschlusszertifikat von einer anerkannten Institution oder einem Kursanbieter kann dabei hilfreich sein.

Entdecken Sie die neuesten Typografie-Trends und lassen Sie sich inspirieren

Inhaltsverzeichnis

20 erstaunliche Online-Typografie-Tutorials

Von grundlegenden Typografie-Begriffen bis hin zur Optimierung von Schriftarten mit CSS haben wir die besten Typografie-Tutorials für Designer zusammengestellt.

1. Webtypografie: Der umfassende Leitfaden für Designer

Elementor-Typography

Fähigkeitsniveau: Anfänger bis Fortgeschrittene

Länge: 30 Minuten

Kosten: Kostenlos

Dieses Typografie-Tutorial stammt von Elementor, was bedeutet, dass Sie mehr als nur die Verwendung von Typografie im Webdesign lernen werden. Sie werden lernen, wie man all dies in die Praxis umsetzt — Aspekte wie Formatierung, Etablierung visueller Hierarchie, Erstellung eines Designsystems und dergleichen — im Kontext von WordPress und Elementor.

2. Wie man benutzerdefinierte Schriftarten zu Ihrer WordPress-Website hinzufügt

Using-Custom-Fonts-Elementor

Schwierigkeitsgrad: Anfänger bis Fortgeschrittene

Dauer: 17:31

Kosten: Kostenlos

In manchen Fällen verfügt WordPress nicht über die spezifischen Schriftarten, die Sie verwenden möchten. Daher werden Sie in diesem Typografie-Tutorial von Elementor erfahren, welche Optionen Sie haben, um benutzerdefinierte Schriftarten zu einer WordPress-Website hinzuzufügen. Sie können diese manuell zu WordPress hinzufügen, indem Sie CSS verwenden, oder Sie können sie in Elementor hochladen und sie vom Editor aus nutzen.

3. Wie man Elementors globale Farben Schriftarten verwendet

Elementor-Global-Colors

Schwierigkeitsgrad: Anfänger bis Fortgeschrittene

Dauer: 6:50

Kosten: Kostenlos

In diesem Video von Elementor werden Sie alles über die Funktion der globalen Einstellungen im Elementor-Editor erfahren. Dieses Tutorial wird Ihnen zeigen, wie Sie diese Funktion nutzen, um sowohl Farben als auch Schriftarten festzulegen und dann beobachten, wie sie seitenübergreifend angewendet werden. Wenn Sie also Zeit bei der Aktualisierung Ihrer Schriftarten sparen und eine größere Konsistenz in jede von Ihnen erstellte Website bringen möchten, ist dieses kurze Video-Tutorial ein Muss.

4. Der ultimative Leitfaden zur grundlegenden Typografie

Envato Tuts

Fähigkeitsniveau: Anfänger

Dauer: 10:33

Kosten: Kostenlos

Der Titel dieses Video-Tutorials von Envato Tuts+ ist etwas irreführend. Es sollte eigentlich „Der ultimative Leitfaden zur grundlegenden Typografie-Terminologie“ heißen. Dennoch, wenn Sie absolut neu in der Typografie sind, ist dies ein wichtiger erster Schritt für Sie. Machen Sie sich mit Begriffen vertraut, die sich auf Typografie, Schriftarten, Dateitypen, Schriftstruktur, Satz und mehr beziehen.

5. Typografie-Tutorial für Anfänger: Alles, was Sie über Typografie-Grundlagen wissen müssen

Hubspot-Typography-Tutorial

Fähigkeitsniveau: Anfänger

Dauer: 18-minütige Lektüre

Kosten: Kostenlos

Dieses Typografie-Tutorial von Hubspot ist eine weitere nützliche Einführung in die Typografie im Design. Sie werden gängige Begriffe, verschiedene Typografie-Stile sowie Quellen für Ihre Schriftarten kennenlernen.

6. Einführung in die Typografie

Coursera-Intro-Typography

Fähigkeitsniveau: Anfänger

Dauer: 8 Stunden

Kosten: Kostenlos

Wenn Sie nach einer tiefgreifenderen Einführung in die Typografie suchen, ist dieser Kurs des California Institute of the Arts eine gute Wahl. Die Einschreibung für diesen Kurs ist kostenlos, was ein großer Vorteil ist, da Sie eine Fülle nützlicher Informationen daraus gewinnen werden. Sie werden etwas über die Geschichte der Typografie, ihre Struktur, wie man sie zur Erzählung einer Geschichte nutzt, ihr Erscheinungsbild manipuliert und vieles mehr erfahren.

7. Die Psychologie der Schriftarten (Schriftarten, die Emotionen hervorrufen)

Envatotuts-Psychology-Fonts

Fähigkeitsniveau: Anfänger

Dauer: 15 Minuten

Kosten: Kostenlos

Wenn Sie neu im Design sind, wird dieses Tutorial von Envato Tuts+ als hervorragende Einführung in die Psychologie der Schriftarten dienen. Ähnlich wie bei der Farbpsychologie werden Sie die üblichen emotionalen Reaktionen auf und Assoziationen mit bestimmten Schriftarten kennenlernen und Tipps erhalten, wie Sie diese zu Ihrem Vorteil nutzen können.

8. Web-Typografie für Designer Entwickler

Udemy-Web-Typography

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. Dies ist ein ziemlich technischer Überblick über Typografie, der die verschiedenen Arten von Klassifikationen, Tipps zur Auswahl und Kombination von Schriftarten, die Gestaltung lesbarer und responsiver Web-Typografie und vieles mehr untersucht.

Um das Beste aus diesem Kurs herauszuholen, sollten Sie über gewisse Grundkenntnisse in HTML, CSS und JavaScript verfügen. Das bedeutet nicht, dass Sie sich nicht anmelden sollten, wenn Sie ein neuer Designer sind — Sie erhalten lebenslangen Zugang dazu, sodass Sie darauf zurückgreifen können, sobald Sie Ihre Fähigkeiten in diesem Bereich verbessert haben.

9. Textuelle Gestaltungselemente: Schriftarten, Typografie und Abstand

Coursera-Textual-Elements-Design

Fähigkeitsniveau: Anfänger

Dauer: 13 Stunden

Kosten: Kostenfrei

Dieser Kurs der University of Colorado Boulder ist auf der Coursera-Webseite verfügbar. Dies ist ein umfangreicher Kurs, in dem Sie erlernen werden, wie man textuelle Elemente manipuliert, um mit Ihrem Design eine Geschichte zu erzählen. Der Kurs behandelt die Grundlagen und geht dann auf Typografie-Abstände, Schriftartenwahl, Schriftartenpaarung und weitere Aspekte ein.

10. Typografie für Designer Entwickler - Exzellieren Sie im Design

Dont-Suck-At-Design-Tutorial

Schwierigkeitsgrad: Fortgeschritten

Dauer: 8,5 Stunden

Kosten: 99,99 €

Muhammad Ahsan Pervaiz ist der Urheber dieses mit 4,5 Sternen bewerteten Udemy-Kurses über Typografie. Falls Sie eine umfassende Schulung zu Typografie-Grundlagen, Typografie-Anpassung, Schriftartenwahl und -paarung sowie weiteren Themen wünschen, ist dies ein hervorragender Kurs. Übungen sind in den Kurs integriert, sodass Sie auch praktische Erfahrungen bei der Umsetzung des Gelernten sammeln werden.

11. Wann welche Schriftart verwendet werden sollte (und wann nicht)!

Envato-Tuts-2

Fähigkeitsniveau: Anfänger

Dauer: 12:55

Kosten: Kostenfrei

Viele der Tutorials und Kurse, die Sie bisher in dieser Liste gesehen haben, haben das Thema Schriftarten berührt. Dieses Envato Tuts+ Tutorial geht jedoch sehr detailliert auf das Thema ein und erläutert die verschiedenen Typen und Unterkategorien von Schriftarten. Indem Sie lernen, die Unterschiede in der Struktur jeder Schriftart zu erkennen, wird es Ihnen wesentlich leichter fallen, die richtigen typografischen Stile für Ihre Websites auszuwählen.

12. Wie erkennt man, ob eine Schriftart gut ist oder nicht?

Flux

Fähigkeitsniveau: Anfänger

Dauer: 9:58

Kosten: Kostenfrei

Dieses Typografie-Tutorial von Flux beschäftigt sich mit der Suche nach hochwertigen Schriftarten für Ihre Websites. Die Diskussion dreht sich hauptsächlich darum, wie Webdesigner qualitativ hochwertige Schriftartenhersteller und Websites finden können, um ihre Schriftarten zu beziehen. Denn selbst wenn Sie verstehen, welche Art von Schriftart Sie benötigen, könnte eine schlecht gestaltete Schriftart (auch wenn sie diesem Stil entspricht) all Ihre harte Arbeit zunichtemachen. Dieses Tutorial wird Ihnen helfen, dieses Problem zu vermeiden.

13. Auswahl von Webschriftarten: Ein Leitfaden für Anfänger

Google-Design

Fähigkeitsniveau: Anfänger

Dauer: 10 Minuten

Kosten: Kostenfrei

Dies ist ein praktischer Leitfaden von Google Design zur Bestimmung der richtigen Webschriftarten für jede Website, die Sie erstellen. Das Tutorial führt Sie durch eine Reihe von Faktoren, wie Projektumfang und mehrsprachiges Design, und verweist Sie dann auf Google Fonts, die den Anforderungen Ihres Projekts entsprechen.

14. Wie man Schriftarten für seine Designs auswählt

Satori-Graphics

Fähigkeitsniveau: Anfänger

Dauer: 7:35

Kosten: Kostenfrei

In diesem Schritt-für-Schritt-Leitfaden von Satori Graphics erhalten Sie praktische Anleitung und Tipps zur Auswahl von Schriftarten für Ihre Projekte. Obwohl hier ein starker Fokus auf Grafikdesign liegt, können Sie die gleichen fünf Schritte zur Auswahl und Kombination von Schriftarten auf alles anwenden, woran Sie arbeiten, sei es eine Website, App, Logo oder eine andere Art von Markenmaterial.

15. Wie man Schriftarten auswählt

Flux2

Fähigkeitsniveau: Anfänger

Dauer: 9:41

Kosten: Kostenfrei

Dieses YouTube-Tutorial von Flux wird Ihnen beibringen, wie Sie sich von der Auswahl von Schriftarten basierend auf Annahmen oder Ihrem Bauchgefühl lösen können. Stattdessen werden Sie die Schriftartenauswahl auf Grundlage des Utilitarismus angehen. Und Sie erhalten Hilfe bei der Suche nach Schriftartenherstellern, die grafische Muster bereitstellen, sodass Sie sich erneut nicht nur auf Ihr Bauchgefühl verlassen müssen, wie gut eine Schriftart aussehen wird.

16. Taschenguide zur Kombination von Schriftarten

Typekit-Typography-Pocket-Guide

Fähigkeitsniveau: Anfänger bis Fortgeschrittene

Dauer: 1 Stunde

Kosten: Kostenfrei

Schriftartenpaarung ist definitiv eine Kunst. Wenn Sie also lernen möchten, wie man das macht, sollte es von einem der führenden Experten im Designbereich sein. Dieser Taschenführer wurde von Tim Brown, dem Leiter der Typografie für Adobe Typekit Adobe Type, erstellt. Dieser Leitfaden wird Ihnen beibringen, wie Sie ermitteln, welche Aufgaben Ihre Schriftarten erfüllen müssen, wie Sie eine Ankerschriftart auswählen, wie Sie Schriftarten identifizieren, die die Ankerschrift ergänzen, und dann Ihre Paarung objektiv beurteilen.

17. Wie man die Schriftart in WordPress-Themen ändert (Jedes Theme)

Themeisle-Change-Font-Wordpress

Fähigkeitsniveau: Anfänger

Dauer: 10 Minuten

Kosten: Kostenlos

Dieses einfache Tutorial von ThemeIsle bietet Ihnen zwei Optionen zur Änderung von Schriftarten in WordPress. Sie können Webschriftarten aus dem WordPress-Customizer auswählen. Oder Sie können das Easy Google Fonts-Plugin installieren und Google-Schriftarten mithilfe des Customizers einstellen. Obwohl eine zusätzliche Option enthalten ist, ist es am besten, die universellen Schriftarteinstellungen von WordPress zu verwenden, anstatt Schriftarten nach Block oder Seite zu ändern.

18. Moderne CSS-Techniken zur Verbesserung der Lesbarkeit

Smashing-Magazine

Fähigkeitsniveau: Fortgeschritten bis Experte

Dauer: 11 Minuten

Kosten: Kostenlos

Edoarda Cavazza verfasste diesen hervorragenden Artikel für Smashing Magazine, der sich mit der Verwendung von CSS zur Verbesserung der Lesbarkeit und Zugänglichkeit der Typografie Ihrer Website befasst. Insbesondere geht dieses Tutorial auf die Verwendung von Abständen ein, um die beste Art von Leseerlebnis für Besucher zu schaffen. Wenn Sie noch nichts über Kerning, Zeilenabstand oder Laufweite gelernt haben oder kein grundlegendes Verständnis von CSS haben, beginnen Sie am Anfang dieser Liste von Typografie-Tutorials und kehren Sie später zu diesem zurück.

19. Einführung in variable Schriftarten im Web

Webdev-Variable-Fonts

Fähigkeitsniveau: Fortgeschritten bis Experte

Dauer: 20 Minuten

Kosten: Kostenlos

Variable Schriftarten sind ein relativ neues Phänomen, gewinnen aber schnell browserübergreifende support, was bedeutet, dass es für Designer und Entwickler an der Zeit ist, sie zu nutzen (falls Sie es noch nicht tun). Wie das Google Developers-Team in diesem Leitfaden zu variablen Schriftarten erklärt, sind sie äußerst wertvoll für die Website-Leistung, da sie es Ihnen ermöglichen, verschiedene Variationen einer Schriftart in einer einzigen Datei zu speichern. Um zu lernen, wie man dies macht, benötigen Sie einige Kenntnisse in CSS.

20. Lernen Sie, wie man Schrift verwendet — Typografie-Handbuch-Kritik

Futur Die 20 Besten Typografie-Tutorials Für Webdesigner 1

Fähigkeitsniveau: Anfänger bis Experte

Dauer: 30:14

Kosten: Kostenlos

Dies ist ein interessantes Tutorial, da es eigentlich gar kein Tutorial ist. Im Laufe von 30 Minuten werden Sie beobachten, wie The Futur die Typografie bewertet, die bei der Erstellung ihres eigenen Typografie-Handbuchs verwendet wurde. Obwohl sie das gedruckte Handbuch bewerten, ist es immer noch eine hilfreiche Übung, der man folgen kann, da es Ihnen beibringt, wie Sie Ihre eigene Arbeit überprüfen und sich daran gewöhnen können, von Anfang an intelligentere Entscheidungen für Ihre Typografie zu treffen.

Meistern Sie die Kunst der Typografie und verbessern Sie das Benutzererlebnis

Sobald Sie sich einige Zeit mit diesen Typografie-Tutorials beschäftigt haben und die Grundlagen gut beherrschen, ist es an der Zeit, alles in die Praxis umzusetzen.

Eine Sache, die Sie im Hinterkopf behalten sollten, ist, dass sich die Typografie, wie alles andere im Design, im Laufe der Zeit weiterentwickeln wird. Die zugrunde liegenden Prinzipien und Richtlinien werden gleich bleiben, aber in Bezug auf den Geschmack der Menschen in der Typografie können Sie erwarten, dass sich dieser ändert.

Stellen Sie also sicher, dass Sie zusätzlich zur Beherrschung der Grundlagen der Typografie auch über Typografie-Trends auf dem Laufenden bleiben.

Originally posted 2021-04-28 11:18:39.