15 Uporabna orodja za spletno tipografijo, knjižnice in okviri

Obvladovanje tipografije na spletu je bilo resnično domiselno. Vsak brskalnik ima svoj algoritem za upodabljanje pisav lahko povzroči nepričakovana odstopanja. Obstaja le nekaj lastnosti CSS, ki jih lahko uporabite, da imate nadzor nad pisavami, kot so kerning pisave, glajenje pisave, ustvarjanje DropCaps itd. Poleg tega moramo obravnavati veliko vprašanj postavitve, ko gre za pisave..

Dobra novica je, da obstajajo viri, ki jih lahko uporabite za prevzem kolesa, ko gre za tipografijo spletnega mesta. Tukaj so 15 spletnih orodij, knjižnic in okvirov lahko uporabite v ta namen.

Več o storitvi Hongkiat:

9 vtičniki za WordPress, s katerimi lahko naredite več z vašimi pisavami
20 Best WordPress dodatki za tipografijo za izboljšanje berljivosti
Boljše in ostrejše ikone uporabniškega vmesnika s spletnimi pisavami

TypeRendering

Na kratko, TypeRendering deluje podobno kot Modernizr, razen da identificira samo mehanizem brskalnika za upodabljanje pisav. Ta knjižnica dodaja razrede po meri na podlagi svojih odkritij, ki se lahko uporabijo za uporabo posebnih pravil za oblikovanje za upodabljanje tipa.

KerningJS

Kerning še ni prilagodljiv za uporabo v spletu - font-kerning Podpora je trenutno še vedno slaba, vendar prihaja naša nova standardna lastnina. KerningJS je knjižnica Javascript, ki vam na primer ponuja nekaj novih lastnosti za boljši nadzor krmiljenja -pismo-kern.

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

Upoštevajte, da je zgornji primer nestandarden in velja le za KerningJS.

DropcapJS

Čeprav je ustvarjanje dropcap izvedljivo s trenutnimi standardi CSS, rezultat še ni popoln. Včasih je povsem nezaželena. DropcapJS, ki ga je razvila Adobe Web Platform, je zadolžena za to, da spletnemu oblikovalcu omogoči, da zlahka uporabi popoln dropcap.

LiningJS

LiningJS je knjižnica JavaScript, ki dodaja vrstico v vsaki vrstici odstavka. To vam omogoča, da ločite vrstico. Simulira idejo :: nth-line (), :: nth-last-line () in :: zadnja vrstica psevdo-razredi, ki še niso prisotni v CSS. Tukaj je primer, kako slovimo prvo vrstico odstavka z LiningJS:

 p .line [prva] font-weight: 600; text-transform: velike črke;

Poleg tega LiningJS podpira tudi kitajski tok tokov.

UnderlineJS

UnderlineJS je knjižnica JavaScript, zaradi katere je besedilo bolje poudarjeno. Oglejte si demo, da vidite, kaj mislim, se prepričajte, da se premikate nad vrsticami. Primerjajte demo s poudarjenim izhodom trenutnega CSS-ja dekoracija besedila standardno in verjetno bi tudi vi bili ljubitelj podčrtane.

Tip pretoka

Ta vtičnik bo dinamično prilagodil velikost pisave glede na določeno širino ovojnice. Tip pretoka vam pomaga uporabiti idealno število znakov na vrstico na poljubni širini zaslona. Knjižnica prihaja z možnostmi, kjer lahko nastavite min / max širino zaslona, min / max velikost pisave in razmerje pisave.

HatchShow

HatchShow razširi velikost pisave, da zapolni celotno širino vsebnika. Vtičnik deluje iz škatle z algoritmom; Na kratko, meri širino vsebnika in dolžino znaka pisave ter doda ustrezno velikost pisave.

GridLover

GridLover je odlično orodje za ustvarjanje osnovnih slogov za urejanje tipografije (velikost, višina vrstice in rob) z enostavnim uporabniškim vmesnikom drsnika. Ustvari sloge v SCSS, LESS in Stylus, tako da ga lahko takoj vključite v svoj projekt, ne glede na to, kateri CSS-predprocesor uporabljate.

TypeScale

TypeScale je spletno orodje, ki vam bo pomagalo enostavno določiti pravo velikost pisave za vaše spletno mesto. Orodje ponuja preprost intuitiven GUI za vstavljanje osnovne velikosti pisave, obsega in družine pisav, ki jo želite uporabiti. Rezultati bodo prikazani za vas, da se boste lahko igrali z lestvico, da boste dobili pravo vrednost. Samo zgrabite CSS, ko končate.

Modularna lestvica

Modularna lestvica je orodje za ustvarjanje idealne velikosti pisave za besedilo telesa in naslova. Izhaja v Sassu, ki ga je treba uporabiti v povezavi z njegovo knjižnico Sass. Lahko pa uporabljate tudi JavaScript .

Font-to-Width

Font-to-Width (FTW) je knjižnica Javascript, ki omogoča pisavo, da ustreza njenemu vsebniku za širino. Določila bo velikost pisave in potreben razmik med besedami za pisavo. Če želite ustvariti lepo naslovnico, je to knjižnica, ki jo boste morda želeli poskusiti.

FFFFallback

FFFFallback, priročno orodje, ki vam omogoča, da poiščete najboljši niz pisav, ki se bo elegantno razgradil. Orodje je v obliki zaznamka, ki bo analiziral družino pisav na vaši strani in predlagalo vrsto pisav, ki jih bo uporabil kot nadomestno pisavo.

Pari pisave

Google Font je ena izmed najbolj priljubljenih knjižnic spletnih pisav, ki jih uporabljajo milijoni, in gosti več kot 500 družin pisav. Pari pisave je zbirka seznanjenih Google Pisav, kjer lahko najdete različno kombinacijo med družinami pisav in zlahka vtipkate obraze. Font Pair naredi izbiro seznanjanja pisav nekoliko manj prepričljivo.

TypeSettings

TypeSettings je zbirka pravil za CSS, ki definira pravilno spreminjanje pisave, navpični ritem in odzivno razmerje tipografije. TypeSettings je na voljo v Sassu in Stylusu, kar omogoča prilagodljivost potrebam projekta s prilagoditvijo spremenljivk.

Tipska ploščica

Tipska ploščica je verjetno eden najbolj popolnih zagonskih kompletov za postavitev tipografije. Tipska ploščica je opremljena s peščico osnovnih tipografskih slogov, ki obravnavajo skaliranje, barve, majhen kapital, dropcap, zamik, deljenje besed, blockquote, kodni blok in veliko več stvari.

Sedaj preberite: Predstavitev spletnih modelov s čudovito tipografijo