In den letzten Jahren hat sich die Web-Typografie von einer Peinlichkeit zu einem Punkt des Stolzes entwickelt. Von CSS bis JavaScript erhalten wir fast täglich großartige Tools, die uns bei der Implementierung von fantastischem Typ unterstützen.
Heute werden wir uns die besten jQuery-Plugins ansehen, die speziell dafür entworfen wurden, um den Web-Typ noch attraktiver zu machen. Laden Sie ein paar herunter und bringen Sie Ihren Typ weiter.
Typografische Maßnahmenmanipulation
FitText - Ein Plugin zum Aufblasen des Webtyps
Mit FitText können Sie einen Text einfach und automatisch auf die Größe des übergeordneten Containers strecken.
HATCHSHOW: ein jQuery-Plugin für Ausgleichsmaßnahmen
Mit Hatchshow können Sie Textspalten mit einem einheitlichen Maß erstellen, so dass Sie den harten Rand mit variabler Textgröße erhalten (ein sehr beliebter Effekt).
slabText - ein jQuery-Plugin zum Erstellen ansprechbarer Schlagzeilen
Noch ein weiteres Plugin, das die Maße für Ihre separaten Zeilen anordnet. Das Schöne an diesem ist, dass die Zeilen wirklich schön umfließen, wenn Sie die Größe des Ansichtsfensters ändern.
Responsive-Maßnahme
Bei diesem Plugin geht es nicht darum, kreative Schlagzeilen zu machen, sondern es werden einige Variablen über Ihren Typ berücksichtigt und ein ideales und ansprechendes Maß für Ihre Absätze generiert. Dies ist ideal, um die Schrift in responsivem Design gut lesbar zu halten.
BigText
BigText berechnet die Schriftgröße und den Wortabstand, um eine Textzeile an eine bestimmte Breite anzupassen. Es gibt einen coolen Zauberer, mit dem man hier spielen kann.
Kerning
Kerning.js
Dies macht genau das, was es sich anhört: Es hilft Ihnen, Ihren Web-Typ zu kern. Webdesigner verzichten normalerweise auf Kerning, da es so kompliziert und unordentlich ist, dass der Prozess dadurch sehr einfach wird.
TypeButter: Optisches Kerning FTW!
Anstatt das Kerning manuell für jeden Buchstaben zu ändern, können Sie mit TypeButter ein optisches Kerning einrichten, das die Arbeit für Sie erledigt. Sie können eine der bereitgestellten Schriftart-Einstellungen verwenden oder Ihre eigenen Rollen erstellen.
jKerny.js, jQuery-Plugin, um das Kerning zu vereinfachen
jKerny implementiert neue CSS-Pseudo-Selektoren für Buchstabenabstände, Wortabstände, Anfangsbuchstaben, letzten Buchstaben und mehr.
Verpackung
Speck
Textumbruch extrem. Mit Bacon können Sie Text um eine Bezierkurve oder eine Linie wickeln. Es ist eigentlich ziemlich beeindruckend und kann einige wirklich komplexe Wraps erzeugen.
jQSlickWrap - Slick-Textumbruch für jQuery
Mit JQSlickWrap können Sie Ihren Text um ein Bild wickeln, egal wie komplex es ist. Sie nehmen einfach ein paar Einstellungen vor und der Rest wird automatisch erledigt.
Vertikaler Rhythmus und Grundlinienraster
jMetronome: Mit jQuery den typografischen Rhythmus beibehalten
Mit diesem Skript können Sie einen vertikalen Rhythmus für Ihre Typografie aufrechterhalten, indem Sie verschiedene Nicht-Text-Elemente mit einem Abstand füllen, um sicherzustellen, dass die Gesamthöhe ein Vielfaches der gesamten Zeilenhöhe des Dokuments ist.
SimonFairbairn / Line-In-Typografie
Dieses Plugin zeigt Linien basierend auf der Linienhöhe Ihres Themas an, so dass Sie Ihren vertikalen Rhythmus richtig einstellen und Ihre gesamte Typografie auf ein Grundlinienraster ausrichten können.
Automatische Zeilenhöhe: Ein jQuery-Plugin für flexible Layouts
Mit der automatischen Zeilenhöhe wird die Zeilenhöhe eines Containers (z. B. div) proportional zu seiner Breite relativ zur Schriftgröße angepasst. Ein weiteres großartiges Werkzeug, um beim responsiven Typ zu helfen.
Super Praktisch
Lettering.js - Ein jQuery-Plugin für radikale Webtypografie
Lettering.js gibt Ihnen das, was CSS nicht tut: die Freiheit, jeden einzelnen Buchstaben einzeln anzuvisieren. Dies eröffnet erstaunliche Möglichkeiten für kreatives Styling auf Briefbasis.
KarlRoos / jQuery.responsiveText
Plug-and-Play-responsiver Text. Zielen Sie einfach auf einen Container oder die ganze Seite und das Skript erledigt den Rest!
Coole & verrückte Effekte
jqIsoText: jQuery Text Effect Plugin
Ein schrulliges Text-Plugin, das die Größe einzelner Buchstaben verändert, um einen einzigartigen Effekt zu erzielen.
Arctext.js - Geschwungener Text mit CSS3 und jQuery
Das Erstellen gekrümmter Textzeilen ist ziemlich schwierig, wenn Sie mit Live-Web-Typen arbeiten. Dieses Plugin macht es viel einfacher und kann Ihnen sogar dabei helfen, die Änderung zu animieren.
Textualizer
Textualizer erstellt einen kreativen Übergang von einem Absatz zu einem anderen. Der Übergang ist eine Art Wirrwarr, der die Aufmerksamkeit auf sich zieht.
Shuffle Letters Effect: ein jQuery-Plugin
Dieses Plugin bietet Ihnen eine Animation, die durch eine Reihe zufälliger Buchstaben durchläuft, bevor Sie auf dem von Ihnen eingegebenen Text landen.
TextGrad
TextGrad erstellt einen Farbverlauf und dehnt ihn über eine Textzeile aus. Einfach und effektiv!
Was habe ich verpasst?
Diese zwanzig jQuery-Plugins repräsentieren die besten Typografie-Tools, die ich finden konnte. Ich bin sicher, dass es da draußen eine Menge mehr gibt. Lass mir unten einen Kommentar und lass mich wissen, was ich vermisst habe!