15 Online-typografiatyökalut Kaikkien suunnittelijoiden tulisi tietää
Typografia on minkä tahansa suunnittelun perusta, koska lukeminen on yksi tärkeimmistä asioista, joita teemme verkossa. Valitsemasi typografia vaikuttaa verkkosivuston useisiin näkökohtiin, mukaan lukien luettavuus, mieliala ja yleinen käyttäjäkokemus. Suunnittelijoille ja kehittäjille on tärkeää tunne typografian perusperiaatteet että luoda luettavia miellyttäviä malleja.
Olemme puhuneet fonttikytkentätyökaluista ennen, ja tänään jaamme teille kirjoitustyökaluja, joilla voit saavuttaa paremman lukukokemuksen sivustoissasi, jonka suunnittelet ja / tai suunnittelet.
Tässä ovat lisäosat, online-työkalut ja skriptit, jotka auttavat sinua luo mahtavia otsikoita ja puhdas luettava teksti.
tyyppikilpi
Se ei tee suunnitteluvaihtoehtoja sinulle, mutta määrittelee oikean merkinnän tavallisille typografisille malleille. Se voi myös antaa vinkkejä tekstin kopiointiin oikein.
Tarkista: Demo | Dokumentointi
Gutenberg
Gutenberg on joustava ja helppokäyttöinen typografian aloituspakkaus kehittäjille ja suunnittelijoille. Se auttaa määrittämään pohjatyypin koon, rivikorkeuden ja maksimileveyden. Gutenberg on avoimen lähdekoodin projekti, joten voit vapaasti osallistua, mukauttaa ja muokata sitä.
Tarkista: Demo | Dokumentointi
Lettering.js
Lettering.js on jQuery-laajennus, jonka avulla voit hallita kerning-tyyppiä. Sen avulla voit saada toimituksellista suunnittelua helposti ja hallita koodia. Sivustolla on upeita esimerkkejä tämän pluginin tekemästä typografiasta inspiraatiota varten.
Tarkista: Demo | Dokumentointi
Typebase.css
Typebase.css on muokattavissa oleva typografinen tyylitaulukko. Se sisältää sekä saasia että vähemmän versioita ja on helposti muunnettavissa nykyaikaisiksi web-projekteiksi.
Tarkista: Demo | Dokumentointi
FitText
FitText on plugin, joka tekee sivustosi fonttikokoista joustavan. Se auttaa sinua saavuttamaan skaalautuvat otsikot eri näytön resoluutioille; toisin sanoen, tee typografia reagoivaksi. Se on tehty vain valtavan tekstin näyttämiseksi.
Tarkista: Demo | Dokumentointi
Kerning.js
Kerning.js auttaa sinua muuttamaan, skaalata ja muokata typografiaa automaattisesti CSS: n avulla. Kerning.js: n kanssa on helppo aloittaa.
Tarkista: Demo | Dokumentointi
Typesettings.css
Typesettings.css on leikkipaikka minimalististen web-projektien tai blogien luomiseen. Kaikki tässä käytetyt typografiset tyylit ovat innoittamana graafisen suunnittelun perusteista.
Tarkista: Demo | Dokumentointi
Reppu
Reppu voi tuottaa hämmästyttävän nestemäisen typografian kirjasinkoon uuden, reagoivan ominaisuuden ansiosta. Herkän typografian luominen on poikkeuksellisen helppoa.
Tarkista: Demo | Dokumentointi
FlowType.JS
Luettavin typografia sisältää 45–75 merkkiä riviä kohden, mutta tasapainon löytäminen on haastava tehtävä kehittäjille. FlowType.JS muuttaa fontin kokoa ja sen jälkeen linjan korkeutta tietyn elementin leveyden perusteella.
Tarkista: Demo | Dokumentointi
Blast.js
Blast.js auttaa sinua erottamaan tekstejä, jotta typografiaa voidaan manipuloida. Se sisältää 4 sisäänrakennettua erotinta: merkki, sana, lause ja elementti. Se voi myös sovittaa mukautettuja lausekkeita ja lauseita.
Tarkista: Demo | Dokumentointi
slabText
slabText on yksinkertainen komentosarja, joka jakaa otsikot riveiksi täyttääkseen täydellisen käytettävissä olevan vaakasuoran tilan. Skripti laskee ihanteellisen määrän merkkejä, jotka asetetaan kullekin riville jakamalla käytettävissä oleva leveys pikselin kirjasinkoon mukaan.
Tarkista: Demo | Dokumentointi
Tyypin skaala
Tyyppimittakaavalla voit esikatsella ja valita oikeantyyppisen mittakaavan projektillesi. Sääntöjä ei ole - pelaa vain kirjasinkoon, mittakaavan ja eri web-fonttien avulla.
Tarkista: Demo | Dokumentointi
Typografinen
Typografia auttaa sinua tekemään typografiaa reagoivaksi. Sinun tarvitsee vain valita muutama fontti, aseta muutamia asetuksia ja saat mukavan reagoivan typografian.
Tarkista: Demo | Dokumentointi
Typi
Typi on saas-sekoitus, jonka avulla voit tehdä helposti reagoivan typografian. Se luo kirjasinkoon ja rivikorkeudet HTML: lle ja muille elementeille. Typillä on myös pystysuuntainen rytmitoiminto linjan korkeuksien laskemiseksi.
Tarkista: Dokumentointi
Lining.js
Lining.js-laajennuksella voit hallita web-typografiaa. Sitä tuetaan suosituimmissa selaimissa, kuten Safarissa, Google Chromen, Opera ja Mozilla Firefoxissa.
Tarkista: Demo | Dokumentointi
Bonus: 2 Lisää työkaluja!
Web-tyypin tila
Web-tyypin tila on sivusto, joka tarjoaa ajantasaista tietoa tyypin ja ominaisuuksien tukemisesta verkossa. Voit etsiä juuri sitä, mitä tarvitset, käyttämällä hakua tai luokkia, kuten kerning, pääomaväli, CSS-fontin lataus ja paljon muuta..
typograph
Typografi on mahtava web- ja luonnosyhdistelmä, jonka avulla voit laittaa ei-katkaisevia tiloja yhden kirjaimen sanojen jälkeen, liittää numeron ja yksikön. Se poistaa myös kaksinkertaiset tilat, syöttää, pisteitä ja muita kirjoitusvirheitä, joten voit saavuttaa puhtaan, kauniin typografian, jota on helppo lukea.
Tarkista: Dokumentointi
