Domača » Oblikovanje spletnih strani » 15 Orodja za tipografijo na spletu Vsi oblikovalci morajo vedeti

    15 Orodja za tipografijo na spletu Vsi oblikovalci morajo vedeti

    Tipografija je temelj vsakega oblikovanja, saj je branje ena najbolj osnovnih stvari, ki jih počnemo na spletu. Izbrana tipografija vpliva na več vidikov spletnega mesta, vključno z berljivost, razpoloženje in celotno uporabniško izkušnjo. To je bistveno za oblikovalce in razvijalce poznati osnovna načela tipografije do ustvarite berljive, prijetne modele.

    O orodjih za seznanjanje s pisav smo govorili že prej in danes bomo delili z vami orodja za tip, ki vam omogočajo boljšo izkušnjo branja na spletnih mestih, ki jih gradite in / ali oblikujete..

    Tu so vtičniki, spletna orodja in skripte, ki vam bodo pomagali ustvarite odlične naslove in čisto berljivo besedilo.

    Tipska ploščica

    Ne bo oblikoval izbire za vas, ampak bo določil pravo oznako s stilom za običajne tipografske predloge. Prav tako vam lahko daje nasvete o pravilnem slogu kopiranja besedila.

    Preveri: Demo | Dokumentacija

    Gutenberg

    Gutenberg je prilagodljiv in enostaven tipografski zagonski komplet za razvijalce in oblikovalce. To vam bo pomagalo, da nastavite velikost osnovnega tipa, višino linije in maksimalno širino. Gutenberg je odprtokodni projekt, zato ga lahko prispevate, ga prilagajate in spreminjate.

    Preveri: Demo | Dokumentacija

    Lettering.js

    Lettering.js je vtičnik jQuery, ki vam omogoča nadzor nad vrsto sesutja. To vam omogoča, da bi dobili uredniško oblikovanje z lahkoto in upravljanje kode. Spletna stran vsebuje neverjetne primere tipografije, narejene s tem vtičnikom za navdih.

    Preveri: Demo | Dokumentacija

    Typebase.css

    Typebase.css je prilagodljiv tipografski slog. Vsebuje tako različice in manj različic ter je enostavno spremenjen v sodobne spletne projekte.

    Preveri: Demo | Dokumentacija

    FitText

    FitText je plugin, ki bo prilagodil velikost pisave vaše spletne strani. To vam bo pomagalo doseči prilagodljive naslove za različne ločljivosti zaslona; z drugimi besedami, naredite odziv na tipografijo. Narejen je samo za prikazovanje ogromnega besedila.

    Preveri: Demo | Dokumentacija

    Kerning.js

    Kerning.js vam pomaga pri samodejnem spreminjanju, prilagajanju in spreminjanju tipografije s CSS. Z Kerning.js lahko začnete.

    Preveri: Demo | Dokumentacija

    Typesettings.css

    Typesettings.css je vaše igrišče za ustvarjanje minimalističnih spletnih projektov ali blogov. Vsi tipografski slogi, ki se uporabljajo tukaj, so navdihnjeni z osnovami grafičnega oblikovanja.

    Preveri: Demo | Dokumentacija

    Nahrbtnik

    Z Rucksackom lahko ustvarite čudovito tipografijo tekočine, zahvaljujoč novi odzivni lastnosti na velikost pisave. Ustvarjanje odzivne tipografije je izjemno preprosto.

    Preveri: Demo | Dokumentacija

    FlowType.JS

    Najbolj berljiva tipografija vsebuje od 45 do 75 znakov na vrstico, toda za ugotovitev, da je ravnovesje za razvijalce zahtevna naloga. FlowType.JS spremeni velikost pisave in posledično višino črte glede na širino določenega elementa.

    Preveri: Demo | Dokumentacija

    Blast.js

    Blast.js vam bo pomagal ločiti besedila, da boste lažje manipulirali tipografijo. Vsebuje 4 vgrajene ločnice: znak, besedo, stavek in element. Lahko se ujema tudi z izrazi in frazami po meri.

    Preveri: Demo | Dokumentacija

    slabText

    slabText je preprost skript, ki razdeli naslove v vrstice in popolnoma izpolni razpoložljivi horizontalni prostor. Skript izračuna idealno število znakov za vsako vrstico tako, da razdeli razpoložljivo širino pisave po velikosti črk.

    Preveri: Demo | Dokumentacija

    Tip Scale

    Z možnostjo Type Scale lahko predogledate in izberete pravo vrsto lestvice za vaš projekt. Ni pravil - samo igraj se z velikostjo pisave, merilom in različnimi spletnimi pisavami.

    Preveri: Demo | Dokumentacija

    Tipografska

    Tipografija vam pomaga, da odzovete tipografijo. Vse kar morate storiti je, da izberete le nekaj pisav, nastavite nekaj nastavitev in dobite lepo odzivno tipografijo.

    Preveri: Demo | Dokumentacija

    Typi

    Typi je mešanica, ki jo lahko uporabite za enostavno odzivno tipografijo. Ustvari velikost pisave in višine vrstic za HTML in druge elemente. Tudi Typi ima funkcijo navpičnega ritma za izračun višine črte.

    Preveri: Dokumentacija

    Lining.js

    Z vtičnikom Lining.js boste dobili popoln nadzor nad spletno tipografijo. Podprto je za večino priljubljenih brskalnikov, kot so Safari, Google Chrome, Opera in Mozilla Firefox.

    Preveri: Demo | Dokumentacija

    Bonus: 2 več orodij!

    Stanje spletnega tipa

    Stanje spletnega tipa je spletno mesto, ki ponuja posodobljene podatke o podpori za vrsto in funkcije po spletu. Uporabite lahko iskanje ali kategorije, na primer kerning, kapitalne razmake, nalaganje pisav CSS in drugo, da najdete točno to, kar potrebujete.

    Tipografija

    Tipografija je odličen vtič za splet in skico, ki vam omogoča, da po enih črkah postavite neprekinjene prostore, povežete številko in enoto. Prav tako odstrani dvojne prostore, vstopi, pike in druge tipkarske napake, tako da lahko dosežete čisto lepo tipografijo, ki jo je lahko brati.

    Preveri: Dokumentacija