Mukautuvat fontit
Mukautuvat fontit parantavat typografiaa netissä. Perinteisiin fontteihin verrattuna etuna ovat pienemmät tiedostokoot ja paremmat työkalut typografian hallintaan.
Fontit netissä
Ensimmäiset parikymmentä vuotta netissä oli mahdollista käyttää vain fontteja, jotka oli asennettu valmiiksi käyttäjän koneelle. Tällaisia oli vain kourallinen, kuten Arial, Verdana, Times New Roman tai Georgia. Koska vaihtoehtoja oli niin vähän, saatettiin otsikot esittää kuvina, kun haluttiin käyttää vaikkapa yrityksen brändin mukaista typografiaa. Nykyään, tekniikan ja fonttipalveluiden kehityttyä, on fontteja voitu käyttää netissä selvästi laajemmin. Lähes kaikki käytettävissä olevat fontit ovat saatavilla myös netissä.
Netti ei ole staattinen ympäristö, kuten juliste tai sanomalehti. Samoja sivuja katsotaan pienillä puhelimien näytöillä ja suurilla pöytäkoneilla. Tämän takia nettisivujen ulkoasu skaalautuu, eli joustaa ympäristön koon mukaan. Tämä asettaa haasteensa myös typografialle, jonka tulisi myös joustaa tilanteen mukaan. Mukautuvat fontit tuovat tähän helpostusta.
Pienemmät tiedostokoot
Typografian suurimpana haasteena netissä ovat olleet fonttien suuret tiedostokoot. Kun fontteja käytetään runsaasti, hidastavat ne nettisivujen latautumista selvästi. Jokainen fontin leikkaus pitää ladata omana tiedostonaan. Tämän takia jokaista fonttia ja sen eri leikkauksen tarpeellisuutta joudutaan harkitsemaan erikseen. Jos kursiivia käytetään sivuilla vain vähän, pudotetaan se helposti kelkasta pois.
Mukautuvien fonttien yksi tärkeimmistä ominaisuuksista on selvästi pienemmät tiedostokoot. Yksi mukautuvan fontin tiedosto pitää sisällään kaikki fontin eri leikkaukset, joita voi olla jopa 30 erilaista. Kun fonttia käytetään nettisivuilla, ei tarvitse ladata kuin yksi tiedosto. Mukaan saadaan kerralla kaikki halutut leikkaukset ja tiedostokoossa säästetään jopa 70 %.
Muuttuvat akselit
Toinen merkittävä ero perinteisiin fontteihin verrattuna on, että mukautuvat fontit eivät ole lukittu ennalta määrättyihin leikkauksiin. Fonteissa voidaan käyttää tiloja, joita esiintyy perinteisten fonttien leikkausten välillä. Fontin suunnittelija on määritellyt eri ominaisuuksille minimi- ja maksimiarvot, ja kaikkea tältä väliltä voidaan säätää liukuvalla akselilla.
Muuttuvia akseleita voi olla mille tahansa fontin ominaisuudelle. Yleisimpiä akseleita ovat fontin vahvuus, leveys, kallistus ja optinen koko. Mukautuvat fontit antavat nettisivujen suunnittelijalle hyvin vapaat kädet hienosäätää ja parantaa typografiaa. Toki tämä vaatii myös taitoa ja silmää.
Fontin vahvuus
Hyvän fontin merkki on ollut laaja valikoima eri vahvuuksia. Mukautuvassa fontissa vahvuutta säädetään liukuvalla akselilla. Valittava arvo voi olla esimerkiksi 100 ja 900 välillä. Aina vahvuutta ei tarvitse kovin tarkasti säätää, mutta on tilanteita joissa siitä on ehdottomasti hyötyä.
Leipätekstien seassa käytetty lihavointi poppaa monesti liikaa esille, joten se voidaan määritellään hieman oletusvahvuutta kevyemmäksi. Tummalla taustalla teksti luonnostaan vaikuttaa vahvemmalta kuin vaalealla taustalla. Tällaisessa tilanteessa tekstin vahvuutta on hyvä keventää aavistuksen. Käyttöliittymästä saadaan eheä ja siisti, kun fontin vahvuus säädetään sopimaan tarkasti vaikkapa ikonin viivan leveyden kanssa.
Fontin leveys
Fontin leveydellä voidaan säätää kuinka leveää teksti on suhteessa perusleveyteen. Mukautuvassa fontissa tekstin leveys voidaan säätää suhteessa näytön leveyteen. Tämä on erittäin hyödyllinen ominaisuus, kun samoja nettisivuja katsotaan eri kokoisilla näytöillä. Käyttämällä kapeampaa leikkausta kapeilla näytöillä, voidaan varmistaa että otsikon sanat mahtuvat otsikkoriville. Samoin eri otsikkotasojen (h1, h2, h3) hierarkia, eli kokoerot, voidaan säilyttää myös puhelimilla.
Optinen koko
Yleensä otsikoille ja leipätekstille on omat fonttinsa. Fontin optista kokoa säätämällä saadaan sama fontti toimimaan niin pienessä kuin suuressakin koossa.
Tekstin ollessa pientä, optista kokoa säätämällä voidaan pienentää kontrastia, suurentaa x-korkeutta ja kirjainten välitystä. Nämä tekevät tekstistä helppolukuisempaa. Tekstin ollessa suurta, voidaan kirjainten viivojen kontrastia vahvistaa, välitys olla tiiviimpää ja tuoda pieniä yksityiskohtia paremmin esille. Nettiselain osaa säätää optisen koon automaattisesti, mutta mukautuvissa fonteissa sen voi asettaa myös käsin.
Linkkejä
V-fonts eli Variable Fonts on kirjasto mukautuvista fonteista, jossa fontin ominaisuuksia voi kokeilla livenä. Toisilla fonteilla on vain yksi muuttuja, ja toisilla niitä on useita. Mielenkiintoisia fontteja ovat mm. Flicker, Pimpit ja Roboto Flex. Viimeistä voidaan muuttaa todella monipuolisesti.
Pangea fonttia voidaan muuttaa monilla akseleilla. Esimerkiksi ylä- ja alapäätteiden pituuden muuttaminen mahdollistaa pienen rivinvälin, ilman että päätteet törmäävät alapuoliseen tekstiin.
Google Fonts -kirjasto tarjoaa jo laajan valikoiman mukautuvia fontteja.