15 Korisni alati za web-tipografiju, knjižnice i okviri

Suočavanje s tipografijom na webu bilo je stvarno čudno. Svaki preglednik ima vlastiti algoritam za prikaz fontova što može dovesti do neočekivanih odstupanja. Postoji samo nekoliko CSS svojstava koje možete koristiti da biste imali kontrolu nad fontovima, kao što je kerning fontova, zaglađivanje fontova, kreiranje DropCaps itd. Povrh toga, moramo se nositi s mnogo problema s izgledom kada se radi o fontovima.

Dobra vijest je da postoje resursi koje možete koristiti za preuzimanje upravljača kada je riječ o tipografiji web-mjesta. Ovdje su 15 web alata, knjižnica i okvira možete koristiti u tu svrhu.

Više o Hongkiatu:

9 WordPress Plugins učiniti više s vaše fontove
20 najboljih WordPress tipografija dodataka kako bi se poboljšala čitljivost
Bolje i oštrije UI ikone s web-fontovima

TypeRendering

U suštini, TypeRendering radi slično kao Modernizr, osim što identificira samo mehanizam preglednika za prikazivanje fontova. Ova knjižnica dodaje prilagođene klase na temelju svojih otkrića koja se mogu koristiti za primjenu određenih pravila za oblikovanje stila.

KerningJS

Kerning još nije prilagodljiv za upotrebu na webu - font-sljubljivanje podrška je još uvijek slaba - ali nova standardna imovina dolazi na naš način. KerningJS je Javascript biblioteka koja vam daje nekoliko novih svojstava za bolju kontrolu kontrole, na primjer -pismo-Kern.

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

Imajte na umu da je gornji primjer nestandardan i primjenjiv samo s KerningJS-om.

DropcapJS

Iako je stvaranje dropcapa izvodljivo s trenutnim CSS standardima, ishod još nije savršen. Ponekad je posve nepoželjno. DropcapJS, razvijen od strane Adobe Web Platforma, povjerena je misiji omogućiti web dizajneru da lako primijeni savršen dropcap.

LiningJS

LiningJS je JavaScript biblioteka koja dodaje crta klase u svakom retku stavka. To vam omogućuje da stilizirate liniju zasebno. Simulira ideju :: n-ti-linije (), :: n-ti-zadnji-linije () i :: zadnja linija pseudo-klasa koja još nije prisutna u CSS-u. Evo primjera kako stiliziramo prvi redak stavka s LiningJS:

 p .line [prva] font-weight: 600; transformacija teksta: velika slova;

Osim toga, LiningJS također podržava kineski protok paragrafa.

UnderlineJS

UnderlineJS je JavaScript biblioteka koja bolje podcrta tekst. Pogledajte demo da vidim na što mislim, obavezno pređite preko linija. Usporedite demo s podcrtanim izlazom trenutnog CSS-a text-decoration standard i vjerojatno biste i vi bili ljubitelj underlineJS-a.

FlowType

Ovaj dodatak dinamički će prilagoditi veličinu fonta na temelju određene širine omota. FlowType pomaže vam primijeniti idealan broj znakova po retku na bilo kojoj širini zaslona. Knjižnica dolazi s opcijama gdje se može postaviti min / max širina zaslona, min / max veličina fonta i omjer fonta.

HatchShow

HatchShow proširuje veličinu fonta kako bi ispunio cijelu širinu spremnika. Dodatak radi izvan okvira s algoritmom; Ukratko, on mjeri širinu spremnika i duljinu znaka fonta te dodaje odgovarajuću veličinu fonta.

GridLover

GridLover je odličan alat za generiranje osnovnih stilova za uređenje tipografije (veličina, visina linije i margina) uz jednostavan klizač UI. Generira stilove u SCSS, LESS i Stylus tako da ga možete odmah uključiti u svoj projekt bez obzira koji CSS-Preprocessor koristite.

TypeScale

TypeScale je online alat koji će vam pomoći da lako odredite pravu veličinu fonta za vašu web-lokaciju. Alat pruža jednostavan intuitivan GUI za umetanje osnovne veličine fonta, razmjera i obitelji fontova koje želite koristiti. Rezultati će biti vizualizirani za vas tako da se možete igrati sa skalom, kako biste dobili pravu vrijednost. Samo zgrabite CSS kada završite.

Modularna skala

Modularna skala je alat za generiranje idealnog skaliranja fonta za tekst tijela i naslova. Izlazi u Sassu koji bi trebao biti korišten zajedno sa Sass knjižnicom. Alternativno, možete koristiti JavaScript .

Font-to-širina

Font-to-Width (FTW) je Javascript biblioteka koja čini font prilagođen njegovom spremniku širine. To će odrediti veličinu fonta zajedno s razmakom riječi potrebnim za font. Ako želite napraviti lijep naslov, ovo je knjižnica koju možete probati.

FFFFallback

FFFFallback, zgodan alat koji vam omogućuje da pronađete najbolji stog fontova koji će se degradirati elegantno. Alat dolazi u obliku knjižne oznake koja će analizirati obitelj fontova na vašoj stranici i predložiti skup fontova koji će se koristiti kao rezervna.

Uparivanje fontova

Google Font je jedna od najpopularnijih knjižnica web-fontova koju koriste milijuni i ugošćuje više od 500 obitelji fontova. Uparivanje fontova je zbirka uparenih Google Fontova, gdje možete pronaći različite kombinacije između fontova i jednostavno upisati lica. Font Pair čini odabir uparivanja fonta nešto manje neodoljivim.

TypeSettings

TypeSettings je skup skupa pravila CSS-a za definiranje pravilnog skaliranja fonta, vertikalnog ritma i odgovarajući omjer tipografije. TypeSettings dolazi u Sassu i Stylusu koji omogućuje fleksibilnost kako bi se zadovoljile vaše projektne potrebe podešavanjem varijabli.

Plocicasoznakom

Plocicasoznakom je vjerojatno jedan od najpotpunijih startera za postavljanje tipografije. Tipska ploča isporučuje se s pregrštom osnovnih tipografskih stilova koji adresiraju skaliranje, boje, mali kapital, dropcap, uvlačenje, crtanje riječi, blockquote, blok koda i mnogo više stvari.

Sada pročitajte: Izlog web dizajna s prekrasnom tipografijom