30 der besten Web-Typografie Ressourcen online
Es scheint, dass es unter den Webdesignern zwei Lager gibt: diejenigen, die sich der Typografie des Internets verschreiben , mit ihr experimentieren und in fast allen ihren Entwürfen neue Dinge ausprobieren; und diejenigen, die es wie die Pest meiden und sich dafür entscheiden, standardisierte, websichere Fontstacks mit wenig Variation zu verwenden.
Es scheint auch, als würden viele der Designer, die in die zweite Gruppe fallen, sich wünschen, dass sie mehr wie die erste wären.
Die folgenden Ressourcen können Ihnen dabei helfen, Ihre Webtypographie zu verbessern, unabhängig davon, in welches Camp Sie fallen.
Es gibt Tools zum Erstellen von einzigartigen Typografie, Referenzen und Artikel, die Sie typografische Prinzipien lehren können, und eine Fülle von Inspiration und Neuigkeiten, um Sie über den Stand der Web-Typografie auf dem Laufenden zu halten.
Typografie-Tools
Typentester
Mit dem Typentester können Sie bis zu drei nebeneinander liegende Schriftarten mit dem gewünschten Beispieltext vergleichen. Sie können die Grundschriftgröße, Schriftart, Schriftgröße, Zeilenabstand, Ausrichtung, Ausrichtung, Wortabstand, Dekoration, Farbe und Hintergrundfarbe festlegen, um ein sehr genaues Bild davon zu erhalten, wie Ihre Schriftarten auf der tatsächlichen Website aussehen. Dann, wenn Sie alles so sehen, wie Sie es wollen, können Sie das CSS greifen.
HTML Ipsum
HTML-Ipsum ist ein Lorem-Ipsum-Generator speziell für das Webdesign. Statt Ihnen nur Textstücke zu geben, kann HTML-Ipsum Ihnen vorformatierten Text wie Absätze, geordnete Listen, leere Tabellen, Formulare und Navigationslisten geben. Vorformatierter Text ist eine großartige Möglichkeit, Zeit zu sparen, wenn Sie Website-Modelle und erste Entwürfe erstellen.
Typchart
Mit Typechart können Sie vorformatierte, websichere Schriftarten durchsuchen und sie so anzeigen, wie sie sowohl auf einem Windows-PC als auch auf einem Mac angezeigt werden. Sie können die enthaltenen Schriften nach Größe, Schriftart und Betonung sortieren.
WP-Typografie
WP-Typography ist ein WordPress-Plugin, das Ihre Standard-WP-Typografie attraktiver macht. Es unterstützt Silbentrennung, Abstandssteuerung, intelligente Zeichenersetzung (einschließlich Anführungszeichen, Bindestriche, Ellipsen und mathematische Symbole) und CSS-Hooks zum Stylen bestimmter Dinge (einschließlich Et-Zeichen, Akronyme und Zahlen).
CSS-Typ festgelegt
Mit CSS Type Set können Sie einen Textblock formatieren und dann das CSS kopieren. Es ist ein einfacher CSS-Generator, der sich hervorragend für die gleichzeitige Gestaltung einer Schriftart eignet. Sie können Schriftart, Größe, Abstand, Anfang, Dekoration und Farbe steuern.
Flipping Typisch
Flipping Typical zeigt Beispieltext in einer Vielzahl von Schriftarten an, die Sie auf Ihrem Computer installiert haben. Es ist ein großartiger Weg, um eine Reihe von Schriften nebeneinander auf einmal zu vergleichen. Der einzige Vorbehalt: Nur einige der gezeigten Schriften sind websicher.
Typografisches Gitter
Ein etablierter vertikaler Rhythmus ist eines der Dinge, die eine gute Typografie von guter Typografie abheben. Das typografische Raster hilft dabei, diesen vertikalen Rhythmus für Sie festzulegen. Es enthält auch ein vertikales Raster als Leitfaden für die Positionierung von Typografie und anderen Elementen.
WasTheFont
WhatTheFont bietet eine einfache Möglichkeit, um herauszufinden, was eine bestimmte Schriftart ist. Laden Sie einfach ein Bild hoch (oder geben Sie eine URL an) und WhatTheFont bestimmt, welche Schriftart verwendet wird. Dies ist eine großartige Möglichkeit, um Schriftarten zu finden, die in Bildern oder Flash-Dateien verwendet wurden.
CSS mit vertikalem Rhythmus
Wie bereits erwähnt, hebt ein durchgängiger vertikaler Rhythmus eine große Typografie von der, die nur "gut" ist, ab. Mit diesem Tool können Sie CSS für Typografie mit einem konstanten vertikalen Rhythmus erstellen. Geben Sie einfach die Schriftfamilie, die Basisschriftgröße, die Basislinienhöhe und die Zielschriftgröße ein und berechnen Sie CSS, um CSS für einen konsistenten vertikalen Rhythmus zu erhalten.
Baseline-Rhythmus-Rechner
Ein weiterer großartiger vertikaler Rhythmusrechner. Dieser zeigt Ihnen jedoch, wie unterschiedliche Schriftgrößen nebeneinander aussehen, wenn Sie mit Ihrem festgelegten vertikalen Rhythmus arbeiten. Es ist ein guter Weg, um sicherzustellen, dass alle Schriftgrößen, die Sie verwenden, gut aussehen werden.
Schriftart-Brenner
Mit Font Burner können Sie Schriftarten auf Ihren Websites einbetten, indem Sie sIFR mithilfe einer grafischen Benutzeroberfläche verwenden. Derzeit sind über Font Burner mehr als 1000 Schriftarten verfügbar, und es gibt auch ein WordPress-Plugin. Sie müssen lediglich die gewünschte Schriftart suchen, den Einbettungscode kopieren und dann in den Code Ihrer Website einfügen.
Blindtextgenerator
Mit diesem Dummy-Textgenerator können Sie nicht nur Lorem ipsum, sondern auch eine Reihe anderer Dummy-Texttypen erstellen. Gleichzeitig können Sie diesen Text auch direkt im Generator formatieren (klicken Sie auf Erweiterte Optionen) und kopieren Sie dann das CSS.
Baseline
Baseline ist ein Raster- und Typografie-Framework, das Dateien zum Zurücksetzen von Browser-Standardeinstellungen und zum Erstellen eines typografischen Grundlayouts enthält. Es ist eine gute Option für Designer, die ein Rasterlayout verwenden und auch Hilfe beim Entwerfen der Typografie der Website benötigen. Das Typografie-Setup umfasst Überschriften, Listen, Absätze, Blockquotes und Tabellen sowie einige andere Markup-Codes.
Schriftart Matrix
Font Matrix zeigt die in Mac- und Windows-Betriebssystemen, Microsoft Office und Adobe Creative Suite enthaltenen Zeichensätze in einem Raster an, mit dem Sie leicht erkennen können, welche Zeichensätze am ehesten auf welchen Computertypen zu finden sind. Wenn Ihre Website beispielsweise hauptsächlich für Designer gedacht ist, erstellen Sie möglicherweise die erste Schriftart in Ihrer Schriftart, die in der Adobe Creative Suite enthalten ist. Wenn die Site jedoch auf geschäftliche Nutzer ausgerichtet ist, könnte die erste enthaltene Schriftart aus Microsoft Office stammen.
Typograph
Typograph lässt Sie mit verschiedenen Skalen und anderen Elementen des vertikalen Rhythmus experimentieren. Es enthält eine Vielzahl von traditionellen Skalen (einschließlich Le Corbusier und Fibonacci) sowie andere Layout-Optionen.
Webschriftarten
Typekit
Typekit bietet Schriftarten von verschiedenen Arten von Verkäufern und Gießereien, einschließlich der Liga der beweglichen Typen, FontFont und Veer (Sie können die gesamte Liste der Schriftarten anzeigen, ohne sich für ein Konto anmelden zu müssen). Sie bieten außerdem erweiterte Steuerungsmöglichkeiten für das Formatieren Ihrer Schriftarten, eine unbegrenzte Skalierbarkeit und ein Kolophon, das Ihren Besuchern mitteilt, welche Schriftarten Ihre Website verwendet. Die Preise für Typekit sind angemessen und reichen von einem kostenlosen Teilzugriff bis zu 100 USD / Jahr für Websites mit hohem Traffic.
Kernest
Kernest ist ein Webschriftartenservice, der OFL-, GPL-, GUST- und Creative Commons-Schriftarten sowie solche mit kommerziellen Lizenzen verwendet. Viele ihrer Schriften sind kostenlos (der Dienst selbst ist kostenlos), während andere Abonnementgebühren ab ein paar Dollar haben.
Schriftarten Live von Ascender
Ascender bietet seinen eigenen Web-Font-Service, Fonts Live. Sie haben über 110 Schriften zur Verfügung, mit Schriften von Monotype, Microsoft, Bigelow & Holmes und andere, sowie ihre eigenen Schriften.
Google Schrift-API
Google bietet eine begrenzte Auswahl an Open-Source-Webschriftarten. Obwohl die Auswahl nicht groß ist, ist sie kostenlos und wird von Google unterstützt. Das bedeutet, dass Sie wahrscheinlich keine Kapazitätsprobleme oder Verzögerungen haben.
TypFront
TypeFont nähert sich Webschriftarten ein wenig anders. Anstatt eine Bibliothek mit webfreundlichen Schriftarten anzubieten, können Sie Ihre eigenen Schriftarten mit einer webfreundlichen Lizenz hochladen. Dies ist eine großartige Option, wenn die Schriftarten, die Sie verwenden möchten, derzeit von keinem der anderen Webschriftarten-Services angeboten werden. Es gibt einen kostenlosen Plan für Websites mit wenig Verkehr sowie bezahlte Pläne.
Typothek Web Fonts
Typotheque bietet einen eigenen Web-Font-Service, um ihre Schriften für @ font-face-Implementierungen verfügbar zu machen. Der Vorteil ist, dass es nur einmalige Lizenzkosten gibt, die sowohl Druck- als auch Webanwendungen abdecken können. Der Nachteil ist, dass die Auswahl nur auf ihre Schriften beschränkt ist.
Typografie Ressourcen & Artikel
Die Elemente des typografischen Stils, die auf das Web angewendet werden
Dies ist ein sehr gründliches Nachschlagewerk für alle, die nicht nur die Grundlagen einer guten Web-Typografie, sondern auch fortgeschrittene Techniken und Prinzipien erlernen möchten. Es gliedert sich in Kapitel und Unterkapitel, einschließlich horizontaler und vertikaler Bewegung, Blöcke und Absätze, Seitenumbruch, Größe und vieles mehr. Es ist eine Arbeit in Arbeit, also erwarte, dass in Zukunft mehr Informationen erscheinen.
Netter Netz-Typ
Nice Web Type hat Tonnen von Informationen über Web-Typografie-Implementierung. Sie haben "Notizen" über alles angefangen von der Typografie bis zur Verwendung von CSS @ font-face. Sie diskutieren regelmäßig über Trends und neue Ideen und haben eine Seite, die sich mit den besten Schriften beschäftigt.
12 Beispiele für Paragraph Typografie
Diese Sammlung von Beispiel-Absatzformaten von Jon Tan bietet einen großartigen Ausgangspunkt für jeden, der eine textlastige Website erstellt. Viele Designer übersehen alle Möglichkeiten, die mit dem Absatz-Styling einhergehen, und entscheiden sich für traditionellere, konservativere Optionen. Dieser Artikel beweist, dass es nicht so schwierig ist, aus der Box zu treten und etwas Interessantes mit den Absätzen in Ihren Entwürfen zu tun.
Typografischer Kontrast und Fluss
Dies ist ein fantastischer Leitfaden von WebDesignerWall zu den Prinzipien von Fluss und Kontrast in der Web Typographie. Es gliedert diese Prinzipien in mehrere Abschnitte auf, einschließlich Größe, Schriftart / Klassifikation, Farbe und Gewicht.
Überarbeiteter Font Stack
Dieser Artikel beschreibt das Erweitern der allgemeinen websicheren CSS-Schriftartstapel, indem Sie andere häufig installierte Schriftarten untersuchen. Es erkundet auch die Font-Stacks einiger bekannter Websites und gibt Empfehlungen, wie sie ihre Stacks verbessern könnten.
Auf Webtypographie
Dieser Artikel von Jason Santa Maria auf A List Apart ist ein sehr umfassender Blick auf Pairing-Schriften in Ihren Website-Designs. Es ist ein Thema, das nicht oft diskutiert wird, aber für die Erstellung großartiger typografischer Designs im Web von größter Bedeutung ist.
Mit Typ denken
Thinking with Type ist die begleitende Webseite zum gleichnamigen Buch von Ellen Lupton. Es bietet viele grundlegende Informationen zur Typografie. Obwohl sich viele davon auf die Drucktypografie konzentrieren, können viele der enthaltenen Informationen auf die Web-Typografie angewendet werden.
10 tolle Tipps zur Verbesserung Ihrer Web-Typografie
Eine Liste von zehn einfachen Dingen, die Sie tun können, um die Typografie in Ihren Website-Designs zu verbessern. Es enthält Informationen über Schriftart, Größe, Maßstab und Hierarchie, führende und mehr.
Typografie Inspiration, Trends und Neuigkeiten
Typophil
Typophile ist ein Forum für Schriftenthusiasten und Typographen. Wenn Sie herausfinden möchten, was in der Welt der Typografie passiert, ist Typophile ein großartiger Ort, um zu schauen. Es ist auch ein guter Ort, um Hilfe bei Problemen in Zusammenhang mit der Typografie zu erhalten.
Ich liebe Typografie
ILT ist ein Blog, der sich ausschließlich der Typografie widmet. Es behandelt sowohl Design- als auch Geschäftsthemen von einem professionellen Standpunkt aus. Ihr Archiv ist riesig, daher gibt es viele Informationen über aktuelle und vergangene Neuigkeiten und Trends, die Sie beschäftigen.
Wir lieben Typografie
WLT ist eine Galerie der Typografie, Beschriftung, Beschilderung und anderer Art. Die Benutzer können Bilder von der Art einreichen, die sie lieben, und es ist ein großartiger Ort für typografische Inspiration für Ihr nächstes Projekt.
Typografie für Schlagzeilen
Elements of Design hat eine großartige Galerie mit mehr als 120 Beispielen für Headlinetypographie. Sie reichen von einfach bis komplex, in einer Vielzahl von Schriften und Stilen. Es ist ein ausgezeichneter Ort, wenn Sie nach ein wenig Inspiration suchen. Sie haben auch eine Galerie von ziehe Zitate mit 20+ Beispielen.
Typografica
Typographica bietet Typ Bewertungen, Kommentare und Typografie Buchbesprechungen. Ihre Typ-Reviews sind besonders informativ, wenn Sie herausfinden möchten, was eine gute Schriftart ausmacht.
Hinter den Kulissen der exquisiten Web-Typografie
Dies ist tatsächlich das erste in einer fünfteiligen Serie. Dieser Beitrag befasst sich mit der Typografie hinter A List Apart, in der die für verschiedene Teile der Website verwendeten Schriftarten und Stile aufgeführt sind. Nachfolgende Beiträge betrachten: Jesús Rodríguez Velasco , Jon Tan , Designr.it , und Der Codex Transportica .
Typesites
Typesites ist ein Blog, der regelmäßig tolle Web-Typografie-Designs präsentiert. Die Websites, die sie bieten, sind vielfältig, aber alle enthalten Inspiration Verwendung von Typ.
Kompiliert exklusiv für Webdesigner Depot von Cameron Chapman