Under senare år har webtypografi gått från en skam till en stolthet. Från CSS till JavaScript, vi får stora verktyg nästan dagligen som hjälper oss att implementera fantastisk typ.
Idag ska vi titta på de bästa jQuery-pluginsna som är specialbyggda för att göra webtypen mer fantastisk. Ladda ner några och ta din typ vidare.
Typografisk mätmanipulation
FitText - En plugin för uppblåst webbtyp
FitText låter dig enkelt och automatiskt sträcka en bit text till storleken på dess förälderbehållare.
HATCHSHOW: ett jQuery-plugin för balanseringsåtgärder
Hatchshow gör att du kan skapa kolumner med text med en enhetlig åtgärd så att du får den hårda kanten, variabel textstorlek (en riktigt populär effekt).
slabText - ett jQuery-plugin för att skapa responsiva rubriker
En annan plugin som styr upp åtgärderna för dina separata linjer. Det fina med den här är att linjerna flyter riktigt snyggt när du ändrar visningsporten.
Responsive-Mät
Det här pluginet handlar inte om att skapa kreativa rubriker, utan betraktar några variabler om din typ och genererar ett idealiskt och lyhörd mått för dina stycken. Detta är bra för att hålla typ mycket läsbar i lyhörd design.
BigText
BigText beräknar typsnittstorleken och ordavståndet som behövs för att matcha en rad text till en viss bredd. Det finns en cool trollkarl att spela med här.
kerning
Kerning.js
Det gör exakt vad det låter som: hjälper dig att kärna din webbtyp. Webdesigners slår vanligtvis ut på kärnan eftersom det är så komplicerat och rörigt, det gör processen lätt.
TypeButter: Optical Kerning FTW!
Istället för att manuellt tweak kerning för varje brev, med TypeButter kan du ställa in optisk kerning som gör jobbet för dig. Du kan använda en av de angivna teckensnittsuppsättningarna eller rulla din egen.
jKerny.js, jQuery-plugin för att göra kerning enkelt
jKerny implementerar nya CSS pseudo-selektorer för brevavstånd, ordavstånd, första bokstaven, sista bokstaven och mer.
Omslag
Bacon
Textförpackning till det yttersta. Med bacon kan du lägga in text runt en mer livlig kurva eller en linje. Det är faktiskt ganska imponerande och kan skapa några väldigt komplexa omslag.
jQSlickWrap - Slick textförpackning för jQuery
JQSlickWrap hjälper dig att paketera din text runt en bild, oavsett hur komplex. Du justerar enkelt några inställningar och resten tas hand om automatiskt.
Vertikal Rhythm & Baseline Grids
jMetronome: Använd jQuery för att hålla typografisk rytm
Det här skriptet hjälper dig att behålla en vertikal rytm för din typografi genom att lägga till vadderingar till olika icke-textelement för att säkerställa att dess totala höjd är ett flertal av dokumentets totala linjens höjd.
SimonFairbairn / Line-in-Typografi
Detta plugin visar linjer baserade på ditt temans linjens höjd så att du kan ställa in din vertikala rytm korrekt och ställa in all din typografi till ett grunnlinje.
Automatisk linjehöjd: ett jQuery-plugin för flexibla layouter
Auto linjehöjd justerar linjens höjd på en behållare (som en div) i proportion till dess bredd, i förhållande till teckensnittstorleken. Ett annat bra verktyg för att hjälpa till med responsiv typ.
Super Praktisk
Lettering.js - Ett jQuery-plugin för radikal webtypografi
Lettering.js ger dig vad CSS inte gör: friheten att rikta varje enskilt brev individuellt. Detta öppnar alla möjliga fantastiska möjligheter för kreativ styling på en brevet.
KarlRoos / jQuery.responsiveText
Plug and play reagerande text. Helt enkelt rikta en behållare eller hela sidan och manuset kommer att göra resten!
Coola och galna effekter
jqIsoText: jQuery Text Effect Plugin
En prydlig text plugin som manipulerar storleken på enskilda bokstäver för att skapa en unik effekt.
Arctext.js - Curving text med CSS3 och jQuery
Att skapa krökta textlinjer är ganska svårt när du arbetar med webbtypen. Denna plugin gör det mycket enklare och kan även hjälpa dig att animera förändringen.
Textualizer
Textualizer bygger en kreativ övergång från ett stycke till ett annat. Övergången är en slags jumbled, blandad effekt som tar upp din uppmärksamhet.
Shuffle Letters Effect: en jQuery-plugin
Denna plugin ger dig en animering som cyklar genom en massa slumpmässiga bokstäver innan du landar på den text du skrev in. Ett trevligt och intressant sätt att presentera en rubrik.
TextGrad
TextGrad skapar en gradient och sträcker den över en rad text. Enkelt och effektivt!
Vad missade jag?
Dessa tjugo jQuery-plugins representerar de bästa typografiska verktygen som jag kunde hitta. Jag är säker på att det finns massor mer där ute, men så lämna mig en kommentar nedan och låt mig veta vad jag missade!