50 Top-Typografie-Tutorials

Seite 3 von 5: Web-Typografie-Tutorials

22. 4 Schritte zur Verwendung variabler Schriftarten

variable Schriftarten

(Bildnachweis: Zukunft)

Variable Schriftarten sind das Neueste und Beste in der Web-Typografie. Sie können alle Arten von Typvariationen innerhalb einer einzelnen Schriftart definieren und sparen sich den Leistungseinbruch, wenn Sie mehrere Schriftarten laden müssen. Dieses Tutorial führt Sie durch die vier Schritte zur Verwendung variabler Schriftarten online.



23. Erstellen Sie interaktive 3D-Typografieeffekte

Laptop Bildschirm



Hier werden wir Erstellen Sie einen Typeffekt Dabei werden die Formen von Buchstaben als Maske für einige schnelle, frei fließende Partikelspuren verwendet, die dynamisch wirbeln und sich durch die Buchstaben bewegen. Es wird nicht nur diese schöne Animation geben, sondern da diese auf das HTML5-Canvas-Element gerendert wird, wird diese in 3D transformiert, um sich in Richtung der Maus zu drehen, wenn sie sich auf dem Bildschirm bewegt. Dies ist ideal für Site-Header oder nur dann, wenn Sie die Aufmerksamkeit des Benutzers für einen Aufruf zum Handeln auf sich ziehen müssen.

Manga Studio 5 Tutorial für Anfänger

24. Bessere Web-Typografie in 13 einfachen Schritten

Text



Web-Typografie bedeutet, sich mit den Regeln des klassischen Satzes vertraut zu machen (oder sie erneut kennenzulernen), aber es gibt noch mehr. Da das Web ein flüssiges und formbares Medium ist, müssen Designer in der Lage sein, das Endergebnis über verschiedene Browser und Endbenutzer hinweg vorherzusagen. Dieses Tutorial untersucht die grundlegenden Vor- und Nachteile der Typografie, die speziell auf das Web angewendet werden.

25. Wie Web-Typografie nur Typografie ist, irgendwie

Typografie wird oft als eine völlig andere Disziplin als Webdesign gelehrt, aber Amy Papaelias hält das für einen Fehler. In diesem Vortrag, der Teil der Letterform Lecture Series von TypeCooper West ist, entmystifiziert sie die Web-Typografie und argumentiert, dass sie als integraler Bestandteil des Lernens von Webdesign angesehen werden sollte.

26. Verbessern Sie die Typografie von Web- und mobilen Apps

Das kurze Video listet fünf wesentliche Prinzipien auf, um die typografische Qualität Ihres Webs und Ihrer mobilen App zu verbessern. Paulo Stanley bietet diesen praktischen Leitfaden an, um Sie auf den Weg zur Erstellung von Typografie für die Bildschirmgestaltung zu bringen.



27. Verbessern Sie den Webtyp durch Anpassen der CSS-Schriftgröße

Typ, die Buchstaben

Durch Anpassen der Schriftgröße in CSS können Sie Ihre Schriftgröße basierend auf der Höhe von Kleinbuchstaben festlegen. Die Verwendung kann die Lesbarkeit Ihres Webtextes erheblich verbessern. Dieses Tutorial erklärt das Denken hinter dieser Eigenschaft und wie man sie in Ihren Projekten verwendet.

28. Die Regeln der responsiven Web-Typografie

Responsive Web-Typografie

Responsive Web-Typografie ist schwierig, aber sie ist zum Eckpfeiler eines guten Webdesigns geworden. Sie müssen es also richtig machen. Dieses Tutorial bietet die Grundlage für den Anfang und deckt sowohl die Gestaltungsprinzipien der reaktionsschnellen Typografie als auch praktische Lösungen dafür ab.

29. Master zugängliche Web-Typografie

zugängliche Web-Typografie

Der Aufstieg des reaktionsschnellen Webdesigns hat die Auswahl zugänglicher Typen wichtiger denn je gemacht, wenn Ihr Webinhalt für die maximale Anzahl von Personen lesbar sein soll. Hier , Fontsmith präsentiert die Ergebnisse seiner Arbeit mit Mencap an barrierefreien Schriften und die neuen Best Practices, die daraus hervorgegangen sind.

30. Flüssigkeitsempfindliche Typografie mit CSS-Polyflüssigkeitsdimensionierung

flüssige Layouts in Typ

Fluid-Layouts sind mittlerweile ein fester Bestandteil der Webdesign-Praxis, aber die Fluid-Typografie ist noch relativ neu. Dieses Tutorial untersucht, wie etablierte Browserfunktionen verwendet werden, Sass und eine einfache Algebra zum Erstellen eines skalierbaren, flüssigen Typs, der über mehrere Haltepunkte und vordefinierte Schriftgrößen hinweg funktioniert.

31. Reaktionsschnelle Schriftgröße und flüssige Typografie mit vh- und vw-Einheiten

Geben Sie auf verschiedenen Bildschirmgrößen ein

Ein weiteres Tutorial zum Erstellen flüssiger Typografie: Dieses hier ist fast genau ein Jahr älter als das oben genannte, aber es lohnt sich immer noch, es zu lesen, um sich mit dieser Disziplin in der Web-Typografie vertraut zu machen.

32. Performance und Web-Typografie

Eines der vielen Dinge, die Sie bei der Auswahl und Implementierung Ihrer Web-Schriftarten berücksichtigen müssen, ist die Auswirkung Ihrer Wahl auf die Leistung Ihrer Website. In diesem Konferenzvortrag von Helen Holmes werden die besten Möglichkeiten zur Optimierung Ihrer Schriftdateien für das Web erläutert.

Nächste Seite: So entwerfen Sie Ihre eigene Schriftart und Spiele, um Ihre Typkenntnisse zu testen

wie man realistisches Haar in Photoshop macht

Aktuelle Seite: Web-Typografie-Tutorials

Vorherige Seite Mit Typ weiter gehen Nächste Seite Schriftdesign-Tutorials und Typografie-Spiele