15 Nützliche Web-Typografie-Tools, -Bibliotheken und -Frameworks

Der Umgang mit der Typografie im Web war wirklich eigenartig. Jeder Browser verfügt über einen eigenen Algorithmus zum Rendern von Schriftarten was zu unerwarteten Diskrepanzen führen könnte. Es gibt nur wenige CSS-Eigenschaften, mit denen Sie Schriftarten steuern können, z. B. das Kerning von Schriftarten, das Glätten von Schriftarten, das Erstellen von DropCaps usw. Darüber hinaus müssen wir uns mit Layoutproblemen in Bezug auf Schriftarten beschäftigen.

Die gute Nachricht ist, dass es Ressourcen gibt, die Sie nutzen können, um die Website-Typografie zu übernehmen. Hier sind 15 Webtools, Bibliotheken und Frameworks Sie können zu diesem Zweck verwenden.

Mehr zu Hongkiat:

9 WordPress-Plugins für mehr mit Ihren Schriftarten
20 Beste WordPress-Typografie-Plugins zur Verbesserung der Lesbarkeit
Bessere und schärfere UI-Icons mit Webfonts

TypRendering

In einer Nussschale, TypRendering funktioniert ähnlich wie Modernizr, identifiziert jedoch nur die Browser-Engine für das Rendern von Schriftarten. Diese Bibliothek fügt basierend auf ihren Entdeckungen benutzerdefinierte Klassen hinzu, mit denen bestimmte Stilregeln für die Typwiedergabe angewendet werden können.

KerningJS

Das Kerning kann noch nicht für die Verwendung im Web angepasst werden - Font-Kerning Der Support ist im Moment noch schlecht - aber eine neue Standardimmobilie kommt auf uns zu. KerningJS ist eine Javascript-Bibliothek, die Ihnen einige neue Eigenschaften für eine bessere Kontrolle des Kernings bietet -Briefkern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Beachten Sie, dass das obige Beispiel nicht standardmässig ist und nur für KerningJS gilt.

DropcapJS

Das Erstellen eines Dropcap ist zwar mit den aktuellen CSS-Standards möglich, das Ergebnis ist jedoch noch nicht perfekt. Manchmal ist es geradezu unerwünscht. DropcapJS, entwickelt von Adobe Web Platform, hat die Aufgabe, Webdesignern die Möglichkeit zu geben, einen perfekten Dropcap auf einfache Weise anzuwenden.

LiningJS

LiningJS ist eine JavaScript-Bibliothek, die die Linie Klasse in jeder Zeile Ihres Absatzes. Dadurch können Sie die Linie separat gestalten. Es simuliert die Idee von :: n-te Zeile (), :: n-te-letzte Zeile () und ::letzte Linie Pseudoklassen, die in CSS noch nicht vorhanden sind. Hier ein Beispiel, wie wir die erste Zeile eines Absatzes mit LiningJS gestalten:

 p .line [erste] font-weight: 600; Text-Transformation: Großbuchstaben;

Darüber hinaus unterstützt LiningJS auch den Absatzfluss in China.

UnderlineJS

UnderlineJS ist eine JavaScript-Bibliothek, die den Text besser unterstreicht. Schauen Sie sich die Demo an, um zu sehen, was ich meine, achten Sie darauf, über den Zeilen zu schweben. Vergleichen Sie die Demo mit der unterstrichenen Ausgabe des aktuellen CSS Textdekoration Standard und Sie würden wahrscheinlich auch ein Fan von underlineJS sein.

FlowType

Dieses Plugin passt die Schriftgröße basierend auf einer bestimmten Wrapperbreite dynamisch an. FlowType hilft Ihnen, bei jeder Bildschirmbreite eine ideale Anzahl von Zeichen pro Zeile anzuwenden. Die Bibliothek verfügt über Optionen, mit denen Sie die minimale / maximale Bildschirmbreite, die minimale / maximale Schriftgröße und das Schriftgrad-Verhältnis einstellen können.

HatchShow

HatchShow vergrößert die Größe einer Schrift, um die gesamte Breite des Containers auszufüllen. Das Plugin funktioniert sofort mit dem Algorithmus. Kurz gesagt, misst es die Breite und Breite des Containers und fügt die richtige Größe der Schriftart hinzu.

GridLover

GridLover ist ein großartiges Werkzeug, um grundlegende Stile für die Anordnung der Typografie (Größe, Zeilenhöhe und Rand) mit einer einfachen Schieberegler-Benutzeroberfläche zu erstellen. Die Stile werden in SCSS, LESS und Stylus generiert, sodass Sie sie sofort in Ihr Projekt aufnehmen können, unabhängig davon, welchen CSS-Präprozessor Sie verwenden.

TypeScale

TypeScale ist ein Online-Tool, mit dem Sie einfach die richtige Schriftgröße für Ihre Website bestimmen können. Das Tool bietet eine einfache intuitive Benutzeroberfläche zum Einfügen der Basisschriftgröße, des Maßstabs und der Schriftfamilie, die Sie verwenden möchten. Die Ergebnisse werden für Sie visualisiert, sodass Sie mit der Skala herumspielen können, um genau den richtigen Wert zu erhalten. Holen Sie sich einfach das CSS, sobald Sie fertig sind.

Modulare Skala

Modulare Skala ist ein Werkzeug zum Generieren der idealen Schriftskalierung für Text und Überschrift. Es gibt in Sass aus, das in Verbindung mit seiner Sass-Bibliothek verwendet werden sollte. Alternativ können Sie JavaScript verwenden .

Font-to-Width

Schriftbreite (FTW) ist eine Javascript-Bibliothek, die eine Schriftart an den Breitencontainer anpasst. Sie bestimmt die Schriftgröße zusammen mit dem für die Schrift erforderlichen Wortabstand. Wenn Sie eine hübsche Überschrift machen möchten, ist dies die Bibliothek, die Sie vielleicht ausprobieren möchten.

FFFFallback

FFFFallback, ein praktisches Werkzeug, mit dem Sie den besten Schriftenstapel finden können, der sich elegant abbaut. Das Tool wird in Form eines Bookmarklets geliefert, das die Schriftfamilie auf Ihrer Seite analysiert und einen Satz von Schriftarten als Fallback vorschlägt.

Schriftpaar

Google Font ist eine der beliebtesten von Millionen genutzten Web-Font-Bibliotheken und beherbergt über 500 Schriftfamilien. Schriftpaar ist eine Sammlung gepaarter Google-Schriftarten, in der Sie problemlos verschiedene Kombinationen von Schriftfamilien und Schriftarten finden können. Font Pair macht die Auswahl des Font-Pairings etwas weniger überwältigend.

TypeSettings

TypeSettings ist eine Sammlung von CSS-Regelsätzen zum Definieren der korrekten Schriftskalierung, des vertikalen Rhythmus und des Reaktionsverhältnisses der Typografie. TypeSettings ist in Sass und Stylus erhältlich, wodurch Sie durch Anpassung der Variablen flexibel auf Ihre Projektanforderungen eingehen können.

Typenschild

Typenschild ist wahrscheinlich eines der umfassendsten Starter-Kits zum Einrichten der Typografie. Das Typenschild wird mit einer Handvoll typografischer Stile ausgeliefert, die sich mit Skalierung, Farben, kleinem Kapital, Dropcap, Einrückung, Silbentrennung, Blockquote, Codeblock und vielem mehr befassen.

Jetzt lesen: Schaufenster von Webdesigns mit schöner Typografie