15 Kasulikud veebitüpograafia tööriistad, raamatukogud ja raamistikud
Tüpograafiaga tegelemine veebis on olnud tõeline omapärane. Igal brauseril on oma algoritm fondide esitamiseks mis võivad põhjustada ootamatuid lahknevusi. On ainult mõned CSS-i omadused, mida saab kasutada, et kontrollida mõningaid fonte, näiteks fondi kerning, fontide silumine, DropCapsi loomine jne. Lisaks sellele peame me fontide puhul tegelema paljude paigutusprobleemidega.
Hea uudis on, et on olemas ressursid, mida saate ratta üle võtta, kui tegemist on veebisaidi tüpograafiaga. Siin on 15 veebitööriistu, raamatukogusid ja raamistikke selleks võite kasutada.
Veel Hongkiatist:
- 9 WordPressi pluginad, mida teha oma fontidega rohkem
- 20 parimat WordPressi tüpograafia pluginaid loetavuse suurendamiseks
- Paremad ja teravamad kasutajaliidese ikoonid veebifontidega
TypeRendering
Lühidalt, TypeRendering töötab sarnaselt Modernizr'iga, välja arvatud see, et see tuvastab ainult brauseri mootori, mis on mõeldud fontide tegemiseks. See raamatukogu lisab oma avastuste alusel kohandatud klassid, mida saab kasutada spetsiifiliste stiilieeskirjade rakendamiseks tüübi muutmisel.
KerningJS
Kerning ei ole veel veebis kasutamiseks kohandatav - font-kerning Toetus on praegu veel vaene - kuid meie tavaks on uus standardvara. KerningJS on Javascripti raamatukogu, mis annab teile mõned uued omadused, näiteks paremaks kontrollimiseks -täht-kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Pidage meeles, et ülaltoodud näide on mittestandardne ja rakendatav ainult KerningJSiga.
DropcapJS
Kuigi dropcapi loomine on teostatav praeguste CSS-standarditega, ei ole tulemus veel täiuslik. Mõnikord on see täiesti ebasoovitav. Adobe Web Platformi poolt välja töötatud DropcapJS-i ülesandeks on võimaldada veebidisaineril rakendada täiuslikku dropcapi.
VooderJS
VooderJS on JavaScript-raamatukogu, mis lisab rida klassi oma lõike igas reas. See võimaldab teil rida eraldi kujundada. See simuleerib ideed :: nth-line (), :: n-viimane rida () ja :: last-line pseudo-klassid, mis pole veel CSS-is olemas. Siin on näide selle kohta, kuidas me kujundame lõike esimese rea LiningJS-iga:
p .line [esimene] font-weight: 600; teksti muutmine: suured;
Lisaks toetab LiningJS ka Hiina lõikevoogu.
UnderlineJS
UnderlineJS on JavaScript-raamatukogu, mis muudab teksti paremaks. Tutvu demoga, et näha, mida ma mõtlen, ja tõsta kindlasti üle joonte. Võrdle demo praeguse CSS-i allajoonitud väljundiga teksti kaunistus standard ja sa oleks ilmselt ka underlineJSi fänn.
FlowType
See plugin reguleerib dünaamiliselt fondi suurust konkreetse ümbrise laiuse alusel. FlowType aitab teil rakendada sobivat arvu märke rea kohta igas ekraani laiuses. Raamatukogus on valikud, kus saab määrata min / max ekraani laiuse, min / max kirjasuuruse ja fondisuhte.
HatchShow
HatchShow laiendab fonti suurust, et täita kogu konteineri laius. Plugin töötab välja algoritmiga; Lühidalt öeldes mõõdab see konteineri laiust ja kirjasümboli pikkust ning lisab fondi õige suuruse.
GridLover
GridLover on suurepärane vahend tüpograafilise paigutuse põhi-stiilide loomiseks (suurus, rea kõrgus ja marginaal) kerge liuguri kasutajaliidesega. See loob stiilid SCSS, LESS ja Stylus, nii et saate selle kohe oma projekti lisada, sõltumata sellest, millist CSS-Preprocessorit kasutate.
Tüüpkaal
Tüüpkaal on online-tööriist, mis aitab teil hõlpsasti määrata oma veebisaidi õige suuruse. Tööriist pakub lihtsat intuitiivset GUI-d, et sisestada põhifondi suurus, skaala ja fontide perekond, mida soovite kasutada. Tulemused visualiseeritakse teile, et saaksite mastaabis ringi mängida, et saada just õige väärtus. Lihtsalt haarake CSS, kui olete valmis.
Modulaarne skaala
Modulaarne skaala on tööriist keha ja rubriigi teksti jaoks ideaalse fontide skaleerimise loomiseks. See väljub Sassis, mida tuleks kasutada koos selle Sass-raamatukoguga. Teise võimalusena võite kasutada JavaScripti .
Font-laius
Font-laius (FTW) on JavaScripti raamatukogu, mis teeb fonti sobivaks selle laiuskonteineri külge. See määrab fontide suuruse koos fontide jaoks vajaliku sõna vahega. Kui soovid teha päris pealkirja, on see raamatukogu, mida võiksite proovida.
FFFFallback
FFFFallback, mugav tööriist, mis võimaldab teil leida parima fondipaki, mis laguneb graatsiliselt. Tööriist on saadaval järjehoidja vormis, mis analüüsib teie lehel olevat fontide perekonda ja soovitab kasutada fonti, mida kasutada tagavarana.
Fontide paar
Google Font on üks populaarsemaid veebifontide raamatukogu, mida kasutavad miljonid inimesed, ja vastuvõtja on üle 500 fondifondi. Fontide paar on paaristatud Google'i fonte kogum, kus on lihtne kombineerida fontide perekondade ja tüüpide vahel. Fontide paar muudab fonte paari valimise veidi vähem valdavaks.
TypeSettings
TypeSettings on CSS-reeglite kogum, mis määrab õige fondi skaleerimise, vertikaalse rütmi ja tüpograafia suhtarvu. TypeSettings on saadaval Sass ja Stylus, mis võimaldab paindlikkust oma vajaduste rahuldamiseks, muutes muutujaid.
Tindiplaat
Tindiplaat on tõenäoliselt üks kõige täiuslikum stardikomplekt tüpograafia seadistamiseks. Tüüpiplaadil on käputäis põhilisi tüpograafilisi stiile, mis käsitlevad skaleerimist, värve, väikest kapitali, tilkkaarti, süvendust, sidekriipsu, blokeerimist, koodiplokki ja palju muud kraami.
Loe nüüd: ilus tüpograafiaga veebidisainide esitlus
