15 Hyödyllisiä Web-tyypitystyökaluja, kirjastoja ja kehyksiä

Typografian käsittely verkossa on ollut todellinen omituinen. Jokaisella selaimella on oma algoritmi fonttien esittämiseen jotka voivat johtaa odottamattomiin eroihin. On vain muutamia CSS-ominaisuuksia, joiden avulla voit hallita fontteja, kuten kirjasinlajitusta, kirjasimen tasoitusta, DropCapsin luomista jne. Tämän lisäksi meidän on käsiteltävä paljon asettelukysymyksiä fonttien osalta.

Hyvä uutinen on, että on olemassa resursseja, joita voit käyttää pyörän ottamiseen, kun kyseessä on verkkosivujen typografia. Tässä ovat 15 verkkotyökalua, kirjastoa ja kehystä voit käyttää tätä tarkoitusta varten.

Lisää Hongkiatista:

9 WordPress-laajennusta, jonka avulla voit tehdä enemmän fonttien avulla
20 Paras WordPress-tyypityskäyttöliittymä luettavuuden parantamiseksi
Parempi ja terävämpi UI-kuvakkeet, joissa on Web-fontteja

TypeRendering

Pähkinänkuoressa, TypeRendering toimii samaan tapaan kuin Modernizr, paitsi että se tunnistaa vain selaimen moottorin. Tämä kirjasto lisää mukautettuja luokkia sen löytöjen perusteella, joita voidaan käyttää erityisten muotoilusääntöjen soveltamiseen tyyppihyväksyntää varten.

KerningJS

Kerningiä ei voi muokata käytettäväksi vielä verkossa - font-kerning tuki on vielä huono - mutta uusi vakio-omaisuus on tulossa. KerningJS on Javascript-kirjasto, joka antaa sinulle muutamia uusia ominaisuuksia esimerkiksi parempaan ohjaukseen -kirjain-Kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Muista, että yllä oleva esimerkki on epätyypillinen ja sitä sovelletaan vain KerningJS: n kanssa.

DropcapJS

Vaikka dropcapin luominen on mahdollista nykyisten CSS-standardien kanssa, lopputulos ei ole vielä täydellinen. Joskus se on suorastaan epätoivottavaa. Adobe Web Platformin kehittämä DropcapJS on saanut tehtäväkseen sallia web-suunnittelijan soveltuvan täydelliseen pudotusikkunaan.

LiningJS

LiningJS on JavaScript-kirjasto, joka lisää linja luokkaa kappaleesi jokaisessa rivissä. Näin voit suunnitella riviä erikseen. Se simuloi ajatusta :: nnen-line (), :: nnen last line () ja :: viime line pseudo-luokat, joita ei vielä ole CSS: ssä. Tässä on esimerkki siitä, miten me suunnittelemme kappaleen ensimmäisen rivin LiningJS: llä:

 p .line [ensimmäinen] font-weight: 600; tekstimuunnos: isot kirjaimet;

Lisäksi LiningJS tukee myös kiinalaisen kappaleen virtaa.

UnderlineJS

UnderlineJS on JavaScript-kirjasto, joka tekee tekstistä paremman. Tutustu demoon nähdäksesi mitä tarkoitan, varmista, että siirryt yli rivien. Vertaa demoa nykyisen CSS: n alleviivattuun tulostukseen text-decoration vakio ja olet todennäköisesti myös underlineJS: n fani.

FlowType

Tämä plugin säätää dynaamisesti kirjasinkokoa tietyn kääreen leveyden perusteella. FlowType auttaa sinua soveltamaan ihanteellista määrää merkkejä riviä kohden missä tahansa näytön leveydessä. Kirjastossa on vaihtoehtoja, joissa voidaan asettaa min / max-näytön leveys, min / max-fonttikoko ja kirjasuhde.

HatchShow

HatchShow laajentaa fontin kokoa täyttääkseen koko säiliön leveyden. Plugin toimii ulos laatikosta algoritmin avulla; Lyhyesti sanottuna se mittaa säiliön leveyden ja kirjasimerkin pituuden ja lisää fontin oikean koon.

GridLover

GridLover on loistava työkalu, jolla voit luoda perustyyppejä typografiajärjestelyyn (koko, rivikorkeus ja marginaali) helposti liukuvan käyttöliittymän avulla. Se luo tyylit SCSS, LESS ja Stylus, jotta voit lisätä sen heti projektiisi riippumatta siitä, mitä CSS-Preprocessoria käytät.

TypeScale

TypeScale on online-työkalu, jonka avulla voit helposti määrittää verkkosivustosi oikean kirjasinkoon. Työkalu tarjoaa yksinkertaisen intuitiivisen graafisen käyttöliittymän, jonka avulla voit lisätä perusfonttikoon, asteikon ja fonttikokonaisuuden, jota haluat käyttää. Tulokset visualisoidaan sinulle, jotta voit pelata mittakaavassa ja saada juuri oikean arvon. Ota vain CSS heti kun olet valmis.

Modulaarinen skaala

Modulaarinen skaala on työkalu, jolla voidaan luoda ihanteellinen kirjasimen skaalaus kehon ja otsikon tekstille. Se lähettää Sassissa, jota tulisi käyttää yhdessä sen Sass-kirjaston kanssa. Vaihtoehtoisesti voit käyttää JavaScriptiä .

Font-leveys

Kirjasinleveys (FTW) on Javascript-kirjasto, joka tekee fontin sopivaksi sen leveyssäiliöön. Se määrittää fontin koon yhdessä fontin edellyttämän sanavälin kanssa. Jos haluat tehdä melkoisen otsikon, tämä on kirjasto, jonka haluat ehkä kokeilla.

FFFFallback

FFFFallback, kätevä työkalu, jonka avulla voit löytää parhaan mahdollisen kirjasinpinon, joka hajottaa sulavasti. Työkalu tulee kirjanmerkin muodossa, joka analysoi sivusi kirjasintyyppiä ja ehdottaa joukkoa kirjasimia, joita käytetään varmuuskopiona.

Fontin pari

Google-fontti on yksi suosituimmista web-kirjasinkirjastoista, joita käyttää miljoonia, ja isännöi yli 500 kirjasintyyppiä. Fontin pari on kokoelma pariksi liitettyjä Google-fontteja, joissa voit löytää eri yhdistelmän kirjasintyyppien ja -tyyppien välillä. Kirjasinparin avulla kirjasinparit voidaan valita hieman vähemmän ylivoimaisesti.

TypeSettings

TypeSettings on kokoelma CSS-sääntöjoukkoa, jolla määritellään oikean kirjasimen skaalaus, pystysuuntainen rytmi ja tyypillinen typografinen suhde. TypeSettings on Sass ja Stylus, joka mahdollistaa joustavuuden projektisi tarpeiden täyttämiseksi muuttamalla muuttujia.

tyyppikilpi

tyyppikilpi on luultavasti yksi täydellisin starttipaketti typografian määrittämiseksi. Tyyppikortti sisältää muutamia perustyyppisiä typografisia tyylejä, jotka käsittelevät skaalausta, värejä, pientä pääomaa, pudotusriviä, sisennystä, tavutusta, salausta, koodilohkoa ja paljon muuta..

Lue nyt: Esittelyssä kauniita typografioita sisältäviä Web-malleja