15 Tiešsaistes tipogrāfijas rīki Visiem dizaineriem ir jāzina
Tipogrāfija ir jebkura dizaina pamats, jo lasīšana ir viena no visvienkāršākajām lietām, ko darām tīmeklī. Jūsu izvēlētā tipogrāfija ietekmē vairākus tīmekļa vietnes aspektus, tostarp lasāmību, garastāvokli un vispārējo lietotāju pieredzi. Dizaineriem un izstrādātājiem ir svarīgi zina tipogrāfijas pamatprincipus uz izveidot lasāmus, patīkamus dizainus.
Mēs esam runājuši par fontu savienošanas rīkiem pirms un šodien mēs dalīsimies ar jums, lai ievadītu rīkus, ar kuriem jūs varat sasniegt labāku lasīšanas pieredzi vietnēs, kuras veidojat un / vai projektējat.
Šeit ir pievienoti spraudņi, tiešsaistes rīki un skripti, kas palīdzēs jums izveidojiet lieliskus virsrakstus un tīru lasāmu tekstu.
Tipogrāfija
Tas jums nedarīs dizaina izvēli, bet noteiks pareizo iezīmējumu ar stilu kopējām tipogrāfiskām veidnēm. Tas var arī sniegt jums padomus, kā pareizi kopēt teksta kopiju.
Izbraukšana: Demo | Dokumentācija
Gutenberga
Gutenberga ir elastīgs un viegli lietojams tipogrāfijas starta komplekts izstrādātājiem un dizaineriem. Tas palīdzēs iestatīt bāzes tipa izmēru, līnijas augstumu un maksimālo platumu. Gutenberga ir atklātā pirmkoda projekts, tāpēc justies brīvi piedalīties, pielāgoties un modificēt.
Izbraukšana: Demo | Dokumentācija
Lettering.js
Lettering.js ir jQuery spraudnis, kas dod jums iespēju kontrolēt kerning tipu. Tas ļauj jums viegli rediģēt redakciju un pārvaldīt kodu. Tīmekļa vietne piedāvā pārsteidzošus tipogrāfijas paraugus ar šo spraudni iedvesmai.
Izbraukšana: Demo | Dokumentācija
Typebase.css
Typebase.css ir pielāgojama tipogrāfijas stila lapa. Tā satur gan saas, gan mazākas versijas un ir viegli modificējama mūsdienu tīmekļa projektos.
Izbraukšana: Demo | Dokumentācija
FitText
FitText ir spraudnis, kas padarīs jūsu mājas lapas fontu izmēru elastīgu. Tas palīdzēs jums sasniegt mērogojamus virsrakstus dažādām ekrāna rezolūcijām; citiem vārdiem sakot, padariet jūsu tipogrāfiju atsaucīgu. Tas ir paredzēts tikai milzīga teksta attēlošanai.
Izbraukšana: Demo | Dokumentācija
Kerning.js
Kerning.js palīdz jums automātiski pārveidot, mērogot un pārveidot tipogrāfiju ar CSS. Ar Kerning.js ir viegli sākt darbu.
Izbraukšana: Demo | Dokumentācija
Typesettings.css
Typesettings.css ir jūsu rotaļlaukums, lai izveidotu minimālisma tīmekļa projektus vai emuārus. Visi šeit izmantotie tipogrāfijas stili ir iedvesmoti no grafiskā dizaina pamatiem.
Izbraukšana: Demo | Dokumentācija
Mugursoma
Ar mugursomu jūs varat radīt pārsteidzošu šķidruma tipogrāfiju, pateicoties jaunam, atsaucīgam īpašumam uz fonta lieluma. Ļoti viegli ir veidot atsaucīgu tipogrāfiju.
Izbraukšana: Demo | Dokumentācija
FlowType.JS
Visbiežāk lasāmā tipogrāfijā ir no 45 līdz 75 rakstzīmēm vienā rindā, bet, lai atrastu, ka līdzsvars ir sarežģīts uzdevums izstrādātājiem. FlowType.JS maina fonta lielumu un pēc tam līnijas augstumu, pamatojoties uz konkrēta elementa platumu.
Izbraukšana: Demo | Dokumentācija
Blast.js
Blast.js palīdzēs jums atdalīt tekstus, lai būtu vieglāk manipulēt ar tipogrāfiju. Tajā ir 4 iebūvēti norobežotāji: raksturs, vārds, teikums un elements. Tā var atbilst arī pasūtījuma izteiksmēm un frāzēm.
Izbraukšana: Demo | Dokumentācija
slabText
slabText ir vienkāršs skripts, kas sadala virsrakstus rindās, lai pilnīgi aizpildītu pieejamo horizontālo telpu. Skripts aprēķina ideālu rakstzīmju skaitu, kas jāiestata katrā rindā, dalot pieejamo platumu ar pikseļu fonta lielumu.
Izbraukšana: Demo | Dokumentācija
Tipa mērogs
Ar Type Scale jūs varat priekšskatīt un izvēlēties pareizo veida skalu savam projektam. Nav noteikumu - vienkārši spēlējiet apkārt ar fonta lielumu, mērogu un dažādiem tīmekļa fontiem.
Izbraukšana: Demo | Dokumentācija
Tipogrāfija
Tipogrāfija palīdz jums padarīt tipogrāfiju atsaucīgu. Viss, kas jums jādara, ir tikai izvēlēties dažus fontus, iestatīt dažus iestatījumus un saņemsiet jauku atsaucīgu tipogrāfiju.
Izbraukšana: Demo | Dokumentācija
Typi
Typi ir saas maisījums, ko varat izmantot, lai viegli pielāgotu tipogrāfiju. Tas rada fontu lielumu un līniju augstumus HTML un citiem elementiem. Arī Typi ir vertikāla ritma funkcija, lai aprēķinātu līnijas augstumus.
Izbraukšana: Dokumentācija
Lining.js
Ar Lining.js spraudni jūs iegūsiet pilnīgu kontroli pār tīmekļa tipogrāfiju. To atbalsta populārākās pārlūkprogrammas, piemēram, Safari, Google Chrome, Opera un Mozilla Firefox.
Izbraukšana: Demo | Dokumentācija
Bonuss: 2 Citi rīki!
Tīmekļa veida stāvoklis
Tīmekļa veida stāvoklis ir tīmekļa vietne, kas piedāvā aktuālus datus par atbalsta veidu un iespējām tīmeklī. Lai atrastu tieši to, kas jums nepieciešams, varat izmantot meklēšanu vai kategorijas, piemēram, kerning, kapitāla atstarpes, CSS fontu ielādi..
Typograph
Typograph ir awesome web un skices spraudnis, kas ļauj ievietot nesalaužošas telpas pēc viena burta vārdiem, savienot numuru un ierīci. Tas arī novērš dubultās telpas, ieejas, punktus un citus kļūdas, lai jūs varētu sasniegt tīru, skaistu tipogrāfiju, kas ir viegli nolasāma.
Izbraukšana: Dokumentācija
