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.)
Tää oli hyvä ja tarpeellinen paketti. Thanks!
Hyvä lista tosiaan, kiitos. sIFR:iä olen jo joutunut käyttämäänkin (valitettavasti). Minun periaatteeni on: jos asiakas ei vaadi tiettyjä fontteja (koska jonkun suunnittelema graafinen ohjeisto niin sanelee), saa perussetti riittää ja riittääkin yleensä aivan mainiosti. Erilaisilla varjostus- ja korostusefekteillä saa mielestäni aivan riittävästi persoonallisuutta aikaan useimmilla nettisivuilla. Toki tähän on aina poikkeuksiakin. Mutta enhän olekaan graafinen tai web-suunnittelija, vaan pragmaattinen markkinoija, jolle tärkeää on ihan muut asiat kuin täydellinen visuaalinen elämys.
Hyvä ja tarpeellinen kirjoitus. Kiitos tiedonjakamisesta.
En nää itse oikeastaan vaihtoehtoja TypeKitin kaltaisille palveluille. Se on se paras tekniikka, ajatteli miltä kantilta tahansa (SEO, käytettävyys, toimivuus,…). Olettaen siis, ettei fonttia saa itse font-facen kautta jaellla.
Toisaalta TypeKitissä on mun mielestä melko suppea fonttivalikoima. Toki fontteja on siellä paljon, mutta ei useita suosittuja maksullisia fonttikirjastoja (Dalton Maag, LinoType, yms).
Olen kokenut fiksuksi ratkaisuksi rekisteröityä lukuisiin vastaaviin webbipalveluihin. Fonttitoimistot ovat usein solmineet web fonts -sopparit juuri tietyn tarjoajan kanssa, joka saa eksklusiiviset oikeudet fontin jakoon. Täten saittejen tekijä joutuu väkisin kikkailemaan näiden palveluiden välillä. Usein onneksi palvelu löytyy helposti googlaamalla fontin nimeä ja “web fonts”.
Pari äkkiseltään mieleen tulevaa palvelua TypeKitin lisäksi:
http://webfonts.fonts.com/en-US
http://www.extensis.com/en/WebINK/
http://www.webtype.com/
Valitettavasti osa web fontseista näyttää kaameilta tietyillä Windows-kokoonpanoilla, riippumatta onko cleartype päällä vaiko ei. Ongelman saa korjattua kätsysti seuraavalla CSS-pätkällä:
text-shadow: 0 0 1px rgba(0,0,0,0.01); opacity: 0.9999;
Terve Niko ja kiitos kommentista! Piti oikein itsekin pysähtyä miettimään miten verkkotypografian toteutus on kehittynyt tässä vuoden aikana, alkuperäinen kirjoitus on siis julkaistu syyskuussa 2010.
Googlen Web Fonts -osasto on ainakin laajentunut melkoisesti (nyt 252 fonttia, reilu vuosi sitten niitä taisi olla alle kymmenes tuosta) ja sitä on Aucorillakin käytetty useissa toteutuksissa hyvin kokemuksin.
Asiantuntijaraatimme tuntuma Typekitistäkin on hyvä. Sitä emme ole käyttäneet asiakastoteutuksiin, mutta hinta ei sinänsä ole esteenä ja maksulla sekä ‘ulkoistaa’ lisenssien kimurantit kohdat että pääsee käsiksi varsin runsaaseen valikoimaan klassikkofontteja.
Tuo Windows-ongelma tuli meilläkin taannoin vastaan, mutta silloin emme löytäneet purevaa rohtoa siihen. Pitänee palata uusin eväin windows-rumuuden kimppuun ja katsoa kuinka käy. Muistathan Niko mainita auttaneesi meitä jos joskus päädyt esim. työhaastatteluun tänne suunnalle, saat valtavat lisäpisteet :)