15 Alati za online tipografiju Svi dizajneri trebaju znati
Tipografija je temelj svakog dizajna, jer je čitanje jedna od najosnovnijih stvari koje radimo na webu. Tipografija koju odaberete ima utjecaj na više aspekata web-lokacije, uključujući čitljivost, raspoloženje i cjelokupno korisničko iskustvo. To je ključno za dizajnere i programere upoznati temeljna načela tipografije do stvoriti ugodan dizajn koji se može čitati.
Prije smo razgovarali o alatima za uparivanje fontova, a danas ćemo s vama podijeliti alate za unos teksta koji vam omogućuju bolje iskustvo čitanja na web-lokacijama koje gradite i / ili dizajnirate.
Ovdje su dodaci, online alati i skripte koji će vam pomoći stvoriti sjajne naslove i očisti čitljiv tekst.
Plocicasoznakom
Neće vam donijeti dizajnerske odluke, ali će definirati odgovarajući markup sa stylingom za uobičajene tipografske predloške. Također vam može dati savjete o tome kako ispravno oblikovati tekstualnu kopiju.
Provjeri: Demo | Dokumentacija
Gutenberg
Gutenberg je fleksibilan i jednostavan za korištenje tipografski starter kit za programere i dizajnere. Pomoći će vam da odredite veličinu osnovnog tipa, visinu linije i maksimalnu širinu. Gutenberg je projekt otvorenog koda, stoga ga slobodno doprinosite, prilagođavajte ga i mijenjajte.
Provjeri: Demo | Dokumentacija
Lettering.js
Lettering.js je jQuery plugin koji vam daje kontrolu nad tipom sljubljivanja. To vam omogućuje da dobijete urednički dizajn s lakoćom i upravljati kodom. Web stranica sadrži nevjerojatne primjere tipografije napravljene s ovim dodatkom za inspiraciju.
Provjeri: Demo | Dokumentacija
Typebase.css
Typebase.css je prilagodljiv stil sloga za tipografiju. Sadrži saas i manje verzije i lako se mijenja u moderne web projekte.
Provjeri: Demo | Dokumentacija
FitText
FitText je dodatak koji će učiniti vašu veličinu fonta fleksibilnom. To će vam pomoći u postizanju skalabilnih naslova za različite razlučivosti zaslona; drugim riječima, učinite da vaša tipografija odgovara. Napravljen je samo za prikazivanje golemog teksta.
Provjeri: Demo | Dokumentacija
Kerning.js
Kerning.js vam pomaže da automatski transformirate, mjerite i mijenjate tipografiju pomoću CSS-a. Lako je započeti s Kerning.js.
Provjeri: Demo | Dokumentacija
Typesettings.css
Typesettings.css je vaše igralište za stvaranje minimalističkih web projekata ili blogova. Svi tipografski stilovi koji se ovdje koriste inspirirani su osnovama grafičkog dizajna.
Provjeri: Demo | Dokumentacija
ranac
Uz Rucksack možete proizvesti nevjerojatnu fluidnu tipografiju zahvaljujući novom svojstvu koje odgovara na veličinu fonta. Izrada odgovorne tipografije je iznimno jednostavna.
Provjeri: Demo | Dokumentacija
FlowType.JS
Najčitljivija tipografija sadrži između 45 i 75 znakova po retku, ali kako bi utvrdili da je ravnoteža zahtjevna zadaća za programere. FlowType.JS mijenja veličinu fonta, a potom i visinu linije ovisno o širini određenog elementa.
Provjeri: Demo | Dokumentacija
Blast.js
Blast.js će vam pomoći da odvojite tekstove kako biste lakše manipulirali tipografijom. Sadrži 4 ugrađena razdjelnika: znak, riječ, rečenicu i element. Također može odgovarati prilagođenim izrazima i izrazima.
Provjeri: Demo | Dokumentacija
slabText
slabText je jednostavna skripta koja razdvaja naslove u redove kako bi savršeno ispunila raspoloživi horizontalni prostor. Skripta izračunava idealan broj znakova za postavljanje u svakom redu dijeljenjem dostupne širine za veličinu fonta piksela.
Provjeri: Demo | Dokumentacija
Tipska ljestvica
Pomoću tipske skale možete pregledati i odabrati pravu vrstu skale za svoj projekt. Nema pravila - samo se igrajte s veličinom fonta, mjerilom i različitim web fontovima.
Provjeri: Demo | Dokumentacija
Tipografski
Tipografija vam pomaže da učinite da tipografija odgovara. Sve što trebate učiniti je odabrati samo nekoliko fontova, postaviti nekoliko postavki i dobiti lijepu odgovarajuću tipografiju.
Provjeri: Demo | Dokumentacija
Typi
Typi je saas mix koji možete koristiti za jednostavno stvaranje tipografije. Stvara veličinu fonta i visinu crta za HTML i druge elemente. Također, Typi ima funkciju vertikalnog ritma za izračunavanje visine crte.
Provjeri: Dokumentacija
Lining.js
S dodatkom Lining.js dobit ćete potpunu kontrolu nad web tipografijom. Podržan je na većini popularnih preglednika kao što su Safari, Google Chrome, Opera i Mozilla Firefox.
Provjeri: Demo | Dokumentacija
Bonus: 2 više alata!
Stanje vrste weba
Stanje web-tipa je web-lokacija koja nudi ažurirane podatke o podršci za vrstu i značajke na webu. Možete koristiti pretraživanje ili kategorije, kao što je kerning, kapitalni razmak, učitavanje fonta CSS-a i drugo kako biste točno pronašli ono što vam treba.
Typograph
Tipografija je strašan web i skica dodatak koji vam omogućuje da stavite neprekidne prostore nakon jedne slova, spojite broj i jedinicu. Također uklanja dvostruke prostore, ulazi, točkice i druge pogreške pri upisu, tako da možete postići čistu lijepu tipografiju koju je lako čitati.
Provjeri: Dokumentacija
