Fontit web-sivuilla
Ei-tekninen katsaus eri tapoihin, joiden avulla saa muita kuin yleisimmin käytössä olevia fontteja web-sivuille.
Ilman ylimääräistä vaivannäköä web-sivulla voi käyttää ainoastaan sellaista fonttia, joka on asennettu käyttäjän koneelle. Jos fonttia ei ole asennettu, selain käyttää vastaavaa, vaihtoehtoista fonttia (jos sivun tekijä on määritellyt sellaisen) tai selaimen oletusfonttia.
Koska näitä kaikilta löytyviä fontteja on hyvin vähän ja typografia on oleellinen osa web-sivun ulkoasua, on kehitetty eri tekniikoita, joiden avulla tästä rajoituksesta päästäisiin eroon.
Nämä tekniikat voidaan jakaa karkeasti kolmeen ryhmään:
- Kuvan käyttäminen tekstin sijaan
- Fontin korvaaminen ohjelmallisesti
- Fontin lataaminen käyttäjän koneelle
Huom! 1. ja 2. tekniikka ovat aivan liian raskaita käytettäväksi sivun leipätekstiin. Tämän vuoksi niillä yleensä tyylitellään otsikoita sekä muita lyhyitä tekstipätkiä, joiden halutaan erottuvan muusta tekstistä.
Kuvan käyttäminen tekstin sijaan/lisäksi
Perinteinen tapa käyttää erikoisia fontteja web-sivulla on tehdä tekstistä kuva, ja näyttää tämä kuva varsinaisen tekstin sijaan. CSS-tyylien kehittymisen myötä on nykyään mahdollista käyttää sekä kuvaa että piilotettua tekstiä, jolloin useimmat käyttäjät näkevät kuvan mutta hakukoneet sekä tekstinlukuohjelmien käyttäjät näkevät oikean tekstin. Näin kuvien käyttäminen ei heikennä esteettömyyttä eikä hakukonenäkyvyyttä.
Tekniikan hyvänä puolena on, että jos käyttäjä näkee kuvat näkee hän tekstin juuri sellaisena kuin suunnittelija on halunnut.
Huonona puolena taas kaikki tekstimuutokset vaativat uuden kuvan tekemisen, joka voi pidemmän päälle tulla kalliiksi. Jos käyttäjän selain ei jostain syystä näytä kuvia mutta noudattaa tyylimäärityksiä, käyttäjä ei näe kuvien lisäksi myöskään tekstiä. Vanhoissa selaimissa kuvat eivät myöskään suurene kun tekstikokoa suurentaa. Uuusissa selaimissa tätä ongelmaa ei kuitenkaan enää ole, koska selain suurentaa kaikkea sivulla näkyvää, ei pelkästään tekstiä.
Kuvien valmistus voidaan myös automatisoida valmiilla ohjelmakirjastoilla tai räätälöidyllä ohjelmakoodilla. Näiden avulla sivun tekstistä voidaan haistella esimerkiksi kaikki pääotsikot, lukea niiden teksti ja asettaa tilalle tekstin perusteella luotu kuva. Näin ensiasennuksen jälkeen sivun päivittäjä voi kirjoittaa tekstiä normaalisti eikä hänen tarvitse miettiä kuvien tekemistä/teettämistä sen enempää.
Joitakin erikoistapauksia lukuunottamatta tätä tekniikkaa voidaan kuitenkin pitää jo vanhentuneena.
Fontinkorvausmenetelmät
Fontinkorvausmenetelmissä kuvia ei tarvitse itse tehdä, vaan teksti kirjoitetaan ja tyylitellään normaalisti. Kun sivu latautuu selaimeen, tekstissä käytetty fontti korvataan toisella. Fontin korvaus tapahtuu siis aina käyttäjän selaimessa. Käytetty tekniikka riippuu menetelmästä, mutta tällä hetkellä kaikki vaativat selaimelta JavaScript-tuen.
Fontinkorvaus on tietyssä mielessä hienovarainen tapa käyttää eri fontteja, sillä jos JavaScript ei ole käytössä, käyttäjä näkee tekstin normaalisti, vaikkakin väärällä fontilla.
Kun tekniikka on otettu kerran käyttöön, samaa fonttia voidaan helposti käyttää useammassa paikassa sivua. Lisäksi jos sivustolle tulee uusi sivu, teksti korvautuu automaattisesti myös tällä uudella sivulla ilman eri toimenpiteitä.
Fontinkorvausmenetelmiä on useita, mutta tällä hetkellä suosituimmat ovat sIFR ja Cufón. Kummankin heikkona puolena on, että niiden vaatimien resurssien vuoksi niitä ei kannata käyttää leipätekstin muuntamiseen, koska se saattaa näkyä sivun toiminnan hidastumisena. Yleinen tapa onkin korvata vain otsikot ja muut yksittäiset tekstielementit.
sIFR
sIFR toimii siten, että se korvaa valitun tekstin Flash-esityksellä, johon on upotettu käytettävä fontti. Se vaatii toimiakseen Flash-tuen, eli se ei toimi esimerkiksi Applen mobiililaitteissa. Lisäksi suuri määrä korvattua tekstiä hidastaa sivuston (selaimen) toimintaa.
Hyvinä puolina voidaan mainita se, että tekstiä pystyy valitsemaan ja kopioimaan. Lisäksi periaatteessa tekniikan kanssa voi käyttää mitä fonttia tahansa, koska sen voidaan katsoa olevan verrannollinen normaalin grafiikan kanssa, eli käyttäjä ei pääse fonttitiedostoon käsiksi. Tämäkin on silti vähän harmaata aluetta, ja joidenkin fonttien käyttöoikeussopimus voi kieltää käytön sIFR:in kaltaisissa tekniikoissa. Adoben fontit ovat tässä kuitenkin varma valinta.
Cufón
Cufónin toiminta perustuu pääasiassa JavaScriptiin. Haluttu fontti lähetetään Cufónin palveluun, jossa siitä tehdään JavaScript-tiedosto. Tämä JavaScript sitten piirtää tekstistä kuvan valitulla fontilla.
sIFR:iin verrattuna Cufónin hyvänä puolena on se, että se toimii kaikissa selaimissa joissa toimii JavaScript, ja se on myös nopeampi. Jotkut myös pitävät Cufónin tekemiä fontteja miellyttävämmän näköisinä kuin sIFR:n, mutta tämä on makuasia.
Suunnittelijan kannalta hyviä puolia on myös se, että Cufón noudattaa automaattisesti korvattavan tekstin tyylimäärityksiä, kun taas sIFR:iä varten tekstin muotoilu pitää tehdä vielä erikseen.
Huonona puolena on, että koska teksti muutetaan kuvaksi, sitä ei pysty valitsemaan tai kopioimaan.
Koska Cufón käytännössä muuttaa fontin eri tiedostomuotoon ja vaikka sen käytön voi rajoittaa vain tietylle sivustolle, se on periaatteessa kenen tahansa ladattavissa. Siksi lisenssiongelmat voivat nostaa päätään jopa ilmaisten fonttien kohdalla. Adoben fontteja voi hyvillä mielin käyttää Cufónin kanssa, muiden valmistajien kohdalla asia pitää selvittää erikseen.
Oikeiden fonttien käyttö
Web-fonttien lähitulevaisuus nykyaikaa on oikein fonttitiedostojen käyttö. Siinä sivustolla käytettävä fontti ladataan käyttäjän tietokoneelle, ja selain käyttää sitä kuten tähän asti Arialia ja Verdanaa. Fontti näkyy yhtä hyvin kuin mikä tahansa fontti, mikäli selain tukee fontin latausta.
Tällä hetkellä Aiemmin tekniikkaa rajoittivat yhteisten standardien puuttuminen (eri selaimet tukevat eri fonttimuotoja) sekä lisenssointiongelmat (selaimen käyttäjä saa haltuunsa kopion fontista). Näiden yli ollaan kuitenkin päästy jo sen verran, että tekniikkaa voidaan mielestäni pitää kypsänä ja käyttövalmiina sivustolle kuin sivustolle.
Jos fontin lisenssit eivät tuota ongelmaa, tätä kannattaa ehdottomasti harkita pääasiallisena ratkaisuna.
Typekit
Typekit on kaupallinen palvelu, jonka kautta voi vuokrata fonttien käyttöoikeuksia web-sivustoille. Käytettävät fontit voi valita vain Typekitin tarjoamasta valikoimasta, joka on kuitenkin sangen laaja.
Sittemmin Adobeen sulautuneen palvelun eteen on tehty selvästi työtä, ja Typekitin avulla ladattavat fontit näkyvät melko luotettavasti eri selaimilla.
Typekit huolehtii fonttien lisensseistä ja sen käyttöä on kehuttu helpoksi, joten siinä mielessä palvelu on huoleton. Sen käytöstä joutuu kuitenkin maksamaan joka vuosi 25-100 dollaria, summan riippuessa siitä minkä kolmesta eri tarjolla olevasta paketista on valinnut. Paketti valitaan sen mukaan kuinka monta sivunäyttöä odottaa sekä kuinka monelle sivustolle ja kuinka monta fonttia haluaa käyttöön.
Lisäksi on olemassa vielä ilmainen paketti kokeilua varten, jonka saa käyttöön yhdelle sivustolle ja jossa fonttien määrä on rajoitettu kahteen. Siinä kuitenkin edellytetään Typekit-mainoksen laittamista sivustolle.
Muut palvelut
Typekitin rinnalle on noussut joitakin vastaavia palveluita. Normaalissa käytössä eri palveluiden välillä ei ole merkittäviä eroja, joten palvelun voi valita sen perusteella kenen fonttivalikoima ja hinnoittelu miellyttävät eniten. Jos hinta on suurin tekijä, kannattaa käydä katsomassa Googlen fonttivalikoima.
Muutama suurempi toimija Typekitin lisäksi on:
Sylvia Egger on tehnyt hyvän vertailun eri fonttipalveluista, ja se löytyy osoitteesta http://sprungmarker.de/wp-content/uploads/webfont-services/ (englanniksi). Myös Smashing Magazinen yhteenveto kannattaa vilkaista läpi, vaikka se jo vähän vanha onkin (englanniksi tämäkin).
Tee-se-itse
Sen minkä Typekit ja muut palvelut tekevät voi tehdä myös itse. Mikään ei kestä käyttämästä samoja tekniikoita ja laittamasta fontteja jakoon omin päin. Tiettyjen selainerojen sekä teknisten ryppyjen siloittamiseksi on olemassa lisäksi myös online-työkaluja, kuten FontSquirrelin tarjoama @font-face-generaattori. Sen avulla voi haluamastaan fontista tehdä sopivan web-upotusta varten, ja kaupan päälle saa vielä upottamiseen tarvittavat koodipätkät sekä Cufón-version fontista.
Ongelmaksi tässä muodostuukin lähinnä lisenssiasiat: jos fontti ei ole jo vapaasti jaossa, sitä ei saa jakaa myöskään web-fonttitekniikoiden avulla. Fonttipalvelut ovat omalta osaltaan neuvotelleet fontintekijöiden kanssa ja rakentaneet teknisiä järjestelmiä, joiden avulla saadaan varmistettua että fontit eivät päädy väärien ihmisten käsiin. Normaalissa upotuksessa mitään rajoituksia ei voi tällä hetkellä asettaa, vaikka jonkinlaista DRM-suojausta tietyntyyppisissä fonteissa jo on.
FontSquirrelin sivuilla ja muualla webissä on kuitenkin listattu fontteja, joita voi vapaasti upottaa web-sivuihin ilman huolia lisenssiongelmista. Jos niistä löytää mieleisensä, ei mitään esteitä käytölle ole.
Yhteenveto
Tällä hetkellä suositeltavin tekniikka on käyttää oikeita fontteja, joko palveluna tai omalta palvelimelta tarjottuna. Niiden valikoima on valtava ja erona muihin tekniikoihin fonttien ulkoasua (välistys, ligatuurit) on paljon helpompi hallita. Todennäköisesti niiden lataaminen ja näyttäminen on myös nopeampaa.
Vanhempien selainten poistuessa markkinoilta tekniset ongelmat ovat lieventyneet ja käyttötavat yhdenmukaistuneet, joten yhä suurempi osa netin käyttäjistä myös näkee sivustolle asetetut fontit.
Jos fontin lisenssi ei kuitenkaan salli fontin käyttämistä sellaisenaan mutta sallii Cufón-tyylisen ratkaisun, on se ehkä kuitenkin sIFR:iä parempi nopeuden ja Flash-riippumattomuuden takia.