15 Instrumente tipografice utile, biblioteci și cadre

Confruntarea cu tipografia pe web a fost real ciudat. Fiecare browser are propriul algoritm de a face fonturi ceea ce ar putea duce la discrepanțe neașteptate. Există doar câteva proprietăți CSS pe care le puteți utiliza pentru a avea un anumit control asupra fonturilor, cum ar fi kerningul fonturilor, netezirea fontului, crearea de DropCaps etc. În plus, trebuie să ne ocupăm de o mulțime de aspecte legate de aspectul fonturilor.

Vestea bună este că există resurse pe care le puteți folosi pentru a prelua roata atunci când vine vorba de tipografia site-ului web. Aici sunt 15 instrumente web, biblioteci și cadre puteți folosi în acest scop.

Mai multe despre Hongkiat:

9 pluginuri WordPress pentru a face mai mult cu fonturile tale
Cele mai bune pluginuri de tipografie WordPress pentru a îmbunătăți gradul de citire
Icoane mai utile și mai clare cu UI cu fonturi Web

TypeRendering

Pe scurt, TypeRendering funcționează similar cu Modernizr, cu excepția faptului că identifică doar motorul de navigare pentru redarea fonturilor. Această bibliotecă adaugă clase personalizate pe baza descoperirilor sale, care pot fi folosite pentru a aplica reguli de styling specifice pentru redarea de tip.

KerningJS

Kerning nu este încă personalizabil pentru utilizare pe web - font-kerning sprijinul este încă sărac în acest moment - dar o nouă proprietate standard vine pe calea noastră. KerningJS este o bibliotecă Javascript care vă oferă câteva proprietăți noi pentru un control mai bun al kerning-ului, de exemplu -scrisoare-Kern.

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

Rețineți că exemplul de mai sus nu este standard și este valabil numai pentru KerningJS.

DropcapJS

Deși crearea unui punctaj este posibil cu standardele CSS actuale, rezultatul nu este încă perfect. Uneori e chiar nedorită. DropcapJS, dezvoltat de platforma Adobe Web, este încredințat misiunii de a permite web designerului să aplice cu ușurință o picătură perfectă.

LiningJS

LiningJS este o bibliotecă JavaScript care adaugă linia clasă în fiecare linie a paragrafului. Aceasta vă permite să modelați linia separat. Simulează ideea :: nth-line (), :: nth-ultimul-line () și ::ultima linie pseudo-clase care încă nu sunt prezente în CSS. Iată un exemplu despre modul în care stilul de prima linie a unui paragraf cu LiningJS:

 p. linia [prima] font-weight: 600; text-transform: majuscule;

În plus, LiningJS susține, de asemenea, debitul chinezesc.

UnderlineJS

UnderlineJS este o bibliotecă JavaScript care face ca textul să sublinieze mai bine. Verificați demo-ul pentru a vedea ce vreau să spun, asigurați-vă că plasați cursorul peste linii. Comparați demo-ul cu ieșirea subliniază a CSS-ului actual text-decor standard și probabil că ar fi și un fan al sublinierii.

FlowType

Acest plugin va ajusta dinamic dimensiunea fontului pe baza unei lățimi de înfășurare specifice. FlowType vă ajută să aplicați un număr ideal de caractere pe linie la orice lățime a ecranului. Biblioteca vine cu opțiuni în care se poate seta lățimea ecranului min / max, dimensiunea fontului min / max și rata fontului.

HatchShow

HatchShow extinde dimensiunea unui font pentru a umple întreaga lățime a containerului. Pluginul funcționează din cutie cu algoritmul; pe scurt, măsoară lățimea recipientului și lungimea caracterelor de font și adaugă dimensiunea corectă a fontului.

GridLover

GridLover este un instrument excelent pentru a genera stiluri de bază pentru aranjarea tipografică (mărimea, înălțimea liniei și marginea) cu un interfață ușor de culisant. Acesta generează stilurile în SCSS, LESS și Stylus, astfel încât să le puteți include imediat în proiect, indiferent de ce CSS-Preprocessor utilizați.

TypeScale

TypeScale este un instrument online care vă va ajuta să determinați cu ușurință dimensiunea corectă a fontului pentru site-ul dvs. web. Instrumentul oferă o interfață grafică simplă intuitivă pentru a insera dimensiunea fontului de bază, scara și familia de fonturi pe care doriți să o utilizați. Rezultatele vor fi vizualizate pentru tine, astfel încât să puteți juca cu scara, pentru a obține doar valoarea potrivită. Doar apucați CSS odată ce ați terminat.

Scară modulară

Scară modulară este un instrument pentru a genera scalarea ideală a caracterelor pentru text și pentru text. Ea iese în Sass care ar trebui să fie utilizat împreună cu biblioteca Sass. Alternativ, puteți utiliza JavaScript .

Font-lățime

Font-To-Width (FTW) este o bibliotecă Javascript care face ca un font să se potrivească containerului său cu lățime. Acesta va determina dimensiunea fontului împreună cu intervalul de cuvinte necesar pentru font. Dacă vrei să faci un titlu destul, aceasta este biblioteca pe care vrei să o încerci.

FFFFallback

FFFFallback, un instrument la îndemână care vă permite să găsiți cele mai bune stiluri de fonturi care se vor degrada cu grație. Instrumentul vine într-o formă de bookmarklet, care va analiza familia de fonturi din pagina dvs. și va sugera un set de fonturi care să fie utilizate ca rezervă.

Perechea de litere

Google Font este una dintre cele mai populare fonturi de fonturi web folosite de milioane și găzduiește peste 500 de familii de fonturi. Perechea de litere este o colecție de Fonturi Google asociate, unde puteți găsi cu ușurință o combinație variată între familiile de fonturi și fețele de tip. Font Pair face alegerea asocierii fontului un pic mai copleșitoare.

TypeSettings

TypeSettings este o colecție de reguli CSS setată pentru a defini scalarea corectă a fontului, ritmul vertical și raportul de răspuns tipografie. Tipul de setări vine în Sass și Stylus, ceea ce permite flexibilitatea pentru a vă satisface nevoile de proiect prin ajustarea variabilelor.

placa de tip

placa de tip este probabil unul dintre cele mai complete kituri de pornire pentru tipografia. Plăcuțele de tip placă cu o mână de stiluri tipografice de bază, care se referă la scalare, culori, capital mic, dropcap, indentare, despărțire, blockquote, bloc de cod și multe alte lucruri.

Acum citiți: Showcase of Web Designs cu tipografie frumoasă