15 Online tüpograafia tööriistad Kõik disainerid peaksid teadma

Tüpograafia on iga disaini alus, sest lugemine on üks kõige olulisemaid asju, mida me veebis teeme. Teie valitud tüpograafia mõjutab mitut veebisaidi aspekti, sealhulgas loetavus, meeleolu ja üldine kasutaja kogemus. See on oluline disainerite ja arendajate jaoks tean tüpograafia aluspõhimõtteid kuni luua loetavaid meeldivaid kujundeid.

Me oleme rääkinud fontide sidumisvahenditest enne ja täna jagame teiega tüübikinnitusvahendeid, mida saate saavutada paremate lugemiskogemuste loomiseks teie loodud ja / või kujundatud veebisaitidel.

Siin on pluginad, online-tööriistad ja skriptid, mis aitavad teil luua suurepäraseid pealkirju ja puhas loetav tekst.

Tindiplaat

See ei tee teile disainilahendusi, vaid määrab õige märgistuse koos tavapäraste tüpograafiliste mallide stiiliga. Samuti võib see anda nõuandeid teksti koopia õigesti kujundamiseks.

Check out: Demo | Dokumentatsioon

Gutenberg

Gutenberg on paindlik ja kergesti kasutatav tüpograafia stardikomplekt arendajatele ja disaineritele. See aitab teil määrata aluse tüübi suuruse, joone kõrguse ja maksimaalse laiuse. Gutenberg on avatud lähtekoodiga projekt, nii et võite vabalt kaasa aidata, seda kohandada ja muuta.

Check out: Demo | Dokumentatsioon

Lettering.js

Lettering.js on jQuery plugin, mis võimaldab teil kontrollida kerning-tüüpi. See võimaldab redigeerimist hõlpsasti saada ja koodi hallata. Veebisaidil on inspiratsiooniks suurepärased näited selle pluginaga tehtud tüpograafiast.

Check out: Demo | Dokumentatsioon

Typebase.css

Typebase.css on kohandatav tüpograafialeht. See sisaldab nii saaside kui ka vähem versioone ja on kergesti modifitseeritav kaasaegseteks veebiprojektideks.

Check out: Demo | Dokumentatsioon

FitText

FitText on plugin, mis muudab teie veebisaidi fondi suurused paindlikuks. See aitab teil saavutada mitmesuguste ekraani resolutsioonide jaoks skaleeritavaid pealkirju; teisisõnu, tehke oma tüpograafia tundlikuks. See on tehtud ainult suure teksti kuvamiseks.

Check out: Demo | Dokumentatsioon

Kerning.js

Kerning.js aitab teil automaatselt tüpograafiat CSS-iga muuta, mastaabida ja muuta. Kerning.jsiga on lihtne alustada.

Check out: Demo | Dokumentatsioon

Tüüpide seaded.css

Typesettings.css on teie mänguväljak minimalistlike veebiprojektide või blogide loomiseks. Kõik siin kasutatud tüpograafilised stiilid on inspireeritud graafilise disaini põhitõedest.

Check out: Demo | Dokumentatsioon

Seljakott

Seljakoti abil saate luua suurepärase vedeliku tüpograafia tänu uuele reageerivale omadusele fondi suuruses. Tundliku tüpograafia loomine on erakordselt lihtne.

Check out: Demo | Dokumentatsioon

FlowType.JS

Kõige loetavam tüpograafia sisaldab vahemikku 45 kuni 75 tähemärki rea kohta, kuid selle tasakaalu leidmiseks on arendajatele keeruline ülesanne. FlowType.JS muudab fondi suurust ja seejärel joone kõrgust konkreetse elemendi laiuse alusel.

Check out: Demo | Dokumentatsioon

Blast.js

Blast.js aitab teil tekste eraldada, et lihtsustada tüpograafia manipuleerimist. See sisaldab 4 sisseehitatud piirajat: märki, sõna, lauset ja elementi. See võib sobitada ka kohandatud väljendeid ja fraase.

Check out: Demo | Dokumentatsioon

slabText

slabText on lihtne skript, mis jaotab pealkirjad ridadeks, et täies ulatuses täita olemasolev horisontaalne ruum. Skript arvutab ideaalset arvu sümboleid, mis määratakse igas reas, jagades olemasoleva laiuse pikslite kirjasuurusega.

Check out: Demo | Dokumentatsioon

Tüüpkaala

Tüüpi skaala abil saate oma projekti jaoks eelvaadet valida ja valida õige tüübiskaala. Reegleid ei ole - lihtsalt mängige fontide suuruse, skaala ja erinevate veebifontidega.

Check out: Demo | Dokumentatsioon

Tüpograafia

Tüpograafia aitab teil tüpograafiat reageerida. Kõik, mida pead tegema, on lihtsalt valida mõned fondid, seada mõned seaded ja saad kena reageeriva tüpograafia.

Check out: Demo | Dokumentatsioon

Typi

Typi on saas-segu, mida saab kasutada kergesti reageeriva tüpograafia tegemiseks. See loob HTML-i ja muude elementide kirjasuuruse ja joone kõrgused. Samuti on Typi-l vertikaalne rütmifunktsioon liinide kõrguste arvutamiseks.

Check out: Dokumentatsioon

Lining.js

Lining.js pluginaga saate täieliku kontrolli veebi tüpograafia üle. Seda toetavad kõige populaarsemad brauserid nagu Safari, Google Chrome, Opera ja Mozilla Firefox.

Check out: Demo | Dokumentatsioon

Boonus: 2 Veel tööriistu!

Veebitüübi olek

Veebitüübi olek on veebileht, mis pakub ajakohaseid andmeid tüübi ja funktsioonide toetamise kohta veebis. Täpselt, mida vajate, saate kasutada otsingut või kategooriaid, nagu kerning, kapitali vahe, CSS-i fontide laadimine ja palju muud..

Tüpograaf

Typograph on fantastiline veebi ja visand plugin, mis võimaldab teil sisestada mittetäitvaid tühikuid ühe tähe sõnadega, ühendada number ja üksus. Samuti eemaldab see topeltruumid, siseneb, punktid ja muud kirjavigu, nii et saate saavutada puhta ilusa tüpograafia, mida on kerge lugeda.

Check out: Dokumentatsioon