Sami Reunanen

Aikakapselihuomio: Tämä kirjoitus ei ole enää se ihan tuorein, mutta aikansa kuvaus ja jostain syystä yhä kovin suosittu, joten pidämme piuhat seinässä. Voit myös kurkata vaikkapa tuoreempia vinkkejä täältä.

Kuva, ja erityisesti video ovat yleistyneet räjähdysmäisesti informaation esittämiseen verkossa, mutta valtaosa käyttäjien kuluttamasta tiedosta on edelleen tekstiä. Typografian harjoittaminen tieteenä ja taiteena pitäisi siis edelleen olla jokaisen verkkoon asioita suunnittelevan peruspaletissa.

Suurimpana ongelmana toimivaan verkkotypografiaan nähdään yleensä hyvin rajallinen määrä fontteja, joita on turvallista käyttää. Ongelman ytimessä on erilaiset päätelaitteet, käyttöjärjestelmät, selaimet ja loppukäyttäjän omat fonttivarannot. Vähänkään eksoottisemman kirjaisimen valitseminen tarkoittaa yleensä sitä, että suuri osa käyttäjistä ei näe suunnittelemaasi kokonaisuutta sellaisena kuin olit sen suunnitellut.

Ajat ovat muuttuneet, hitaasti mutta varmasti. Kiitos kuuluu osittain uudelle selainsukupolvelle, mutta erityisesti aktiiviselle kehittäjäyhteisölle joka on omatoimisesti rakentanut läjän vastauksia ongelmaan. Siis ennen kuin myyt eioota tai sorrut sorvaamaan valtavaa kasaa kuvaotsikoita, tarkasta ainakin nämä!

sIFR (wiki.novemberborn.net/sifr/)

Yksi ensimmäisistä, Mike Davidsonin ja Mark Wubbenin ‘Scalable Inman Flash Replacement’ korvaa määritellyt tekstielementit Flash-alueella johon renderöidään alkuperäinen teksti käyttäen Flashiin upotettuja merkkejä. Ehkä ei kevein, ehkä ei elegantein, mutta ehdottomasti mainitsemisen arvoinen.

cúfon (cufon.shoqolate.com)

Simo Kinnusen cúfon on JavaScriptillä kirjoitettu fonttirenderi, joka osaa lukea korvaavan fontin kunhan se on käännetty ensin cúfonin lukemaan JavaScript/JSON muotoon. sIFRistä poiketen cúfon ei nojaa selainlaajennuksiin, jonka ansiosta se on nopeampi ja toimintavarmempi tapa.

Google Font API (code.google.com/apis/webfonts/)

Hakukonejätti tarjoaa rajapinnan vapaan lähdekoodin fonttien esittämiseen. Toteutus on nerokas, lähdekoodiin tarvitaan vain viittaus haluttuihin fontteihin Google API:ssa ja loppu hoituu perinteisesti CSS säännöllä. Valikoima on kirjoitushetkellä kovin suppea, mutta jo nyt joukosta löytyy päteviä vaihtoehtoja perusfonttien korvaajiksi.

@font-face (tiiviisti englanniksi)

Vaikka @font-face ei varsinaisesti ole CSS3:n mukanaan tuoma sääntö (Internet Explorer on tukenut sääntöä sitten version 4), vasta viimeisimpien selainversioiden myötä on päästy edes jonkinlaiseen yhteisymmärrykseen siitä mitä formaattia tulisi käyttää. Uudemmat selainversiot tukevat – tai ovat luvanneet tukevansa tulevissa versiossa – lähes poikkeuksetta jonkinlaiseksi standardiksi muodostunutta Web Open Font Format (WOFF) fontteja. Ajatus on yksinkertainen; palvelimelle ladataan halutun fontin lähdetiedosto johon viitataan tyylitiedostossa. Käyttäjän selain noutaa fontin palvelimelta ja käyttää sitä määritettyjen tekstielementtien esittämiseen.

@font-facen käytössäkin on toki epävarmuustekijänsä, kuten serverin kuormaan ja sivujen latautumiseen liittyvät ongelmatilanteet, mutta näissäkin tapauksissa aktiivinen kehitystyö rauhoittaa kummasti mieltä.

Miksi perusfontit eivät riitä?

Valitsemalla fontin perinteisen “turvajoukon” ulkopuolelta suunnittelija voi avata aivan uuden tason näyttävyydessä ja visuaalisessa yhteneväisyydessä esim. yrityksen muuhun ilmeeseen. Kun fontti istutetaan sivustoon kuvatuilla uusilla menetelmillä, pysyy hakukonenäkyvyys kunnossa ja uuden sisällön luominen ei tuota harmaita hiuksia graafikko-osastolla. Comic Sansin voi vihdoin korvata silmää miellyttävällä käsinkirjoitusfontilla (esim. Reenie Beanie) tai klassikkopakasta voi poimia perusmuodossaan tutusta Helveticasta lukuisia uusia leikkauksia (esim. Extended, Condensed, Heavy, Light ja näiden yhdistelmät.)

Lisenssipolitiikkaa

Ennen kuin lähdet toteuttamaan mitään, joka toimiakseen vaatii fontin lähdetiedoston on syytä olla tietoinen kyseisen fontin lisenssiehdoista. Fontin sisällyttäminen verkkosivustolle ei siis oletusarvoisesti ole sallittua. Suuri osa fonttitaloista haluaa, että asennat fontin vain tiettyyn määrään työasemia. Toisaalta esimerkiksi Adobe sallii fonttien upottamisen sähköisiin dokumentteihin, jolloin voit käyttää tekniikoita kuten cúfon tai sIFR. Vapaan lähdekoodin fontit soveltuvat hyvin käytettäväksi @font-face tyylisäännön kautta ja uudet web-formaatit selkeyttävät tulevaisuudessa kaupallisten fonttien käyttämistä myös verkossa.

Tekniikaltaan Google Font APIN ja cúfonin välimaastosta löytyy Typekit, joka tarjoaa ratkaisuksi lisenssikysymyksiin sivunäyttöihin perustuvaa hinnoittelua ja varsin laajaa fonttivalikoimaa. Ilmaistilillä voi kokeilla palvelun toimintaa ja järeämmässä päässä ainakaan referenssien nimillä ei säästellä: tiskiin lyödään The New York Times, Twitter ja last.fm.

Tämä on vasta tukeva perusta

Typografia niin verkossa kuin muuallakin on tietenkin paljon muuta kuin oikean fontin valinta. Se on kuitenkin suurin yksittäinen este ja irvistys toimivan verkkotypografian tiellä. Kun tämä este on raivattu pois tieltä, voi rauhassa keskittyä typografian kannalta oleellisimpiin asioihin.

(Tämän kirjoituksen tuotti Aucorin typohifistelytiimi Sami & Anssi.)