CMS-suunnitteluopas – Osa 6: Typografia

Aikaisemmin verkkopalveluihin ei ollut saatavilla kovin montaa kirjainleikkausta ja valinta pitikin tehdä niiden fonttien välillä, jotka oli asennettu sivuilla vierailijoiden koneille. Nykyään on mahdollista liittää nettisivuille lähes mikä tahansa fontti. Tällöin käytetään fontteja, jotka ovat saatavilla netissä houstattuna eli ne sijaitsevat pysyvästi toisella palvelimella ja niitä vain referoidaan omalla sivustolla. Yksi hyvä esimerkki tästä on Googlen tarjoamat fontit. Google tarjoaa satoja vapaita kirjainleikkauksia, joista löytyy perusmuotoja ja mielenkiintoisia erikoisfontteja maustamaan verkkopalvelua. Suunnittelija voi jopa hakea fonttitiedostot koneelleen ja käyttää niitä omassa suunnitteluohjelmassaan. Uusia fontteja lisätään listaan jatkuvasti.

Tämä artikkeli on osa sarjaa, jossa esittelen vinkkejä kuinka voit suunnitella nettisivuston graafisen ilmeen julkaisujärjestelmän päälle.

Googlen  lisäksi on muitakin tarjoajia, joiden fontteja voidaan käyttää. Tässä esimerkkejä:

• Fonts.com (kaikki mahdolliset kaupalliset fontit – Adobe, Linotype, Monotype, ITC jne.)
• Font Squirrel (ilmaisia fontteja)
• MyFonts (kaupallisia fontteja, maksullinen)

Ainakin Googlen ja Font Squirrelin tarjoamat fontit ovat ilmaisia. Muut tarjoavat esimerkiksi kuukausihinnoittelua.

Koska sivustolla käytetyt fonttitiedostot haetaan käyttäjän omalle koneelle, useamman erilaisen leikkauksen käyttämistä ei suositella. Esimerkiksi hyvä idea on käyttää yhtä tai kahta tällaista houstattua fonttia otsikoissa ja leipätekstissä taas käyttäjän omalla koneella olevaa perusfonttia.

Otsikot kuvana?

Julkaisujärjestelmien otsikoissa – kuten myös navigaatiossa – on hyvä välttää kuvapohjaisia ratkaisuja koska niiden muokkaaminen saattaa osoittautua vaikeaksi. Joissakin järjestelmissä otsikot luodaan automaattisesti kuvaksi etukäteen määritellystä fontista, mutta niiden tarkkuus, laatu ja skaalautumiskyky jäävät yleensä jälkeen normaalista fontista. Samoin hakukonelöydettävyys ei ole sitä luokkaa kuin oikeilla fonteilla saatu hyöty.

Tavutus

Ominaisuus, joka on ollut tekstinkäsittely- ja taitto-ohjelmissa jo ikuisuuden, on netissä vielä täysin levällään. Tähän asti tavuttamisen on joutunut tekemään käsin, jolloin sopiviin paikkoihin on pakotettu tavuviiva ja rivivaihto. Ongelmana tässä on kuitenkin se että kun tekstiä katsotaan eri leveyksisissä näytöissä, pakotetut tavu-
viivat (kuten tässä) rivittyvät lähes poikkeuksetta väärin. Lisäksi yleensä MACeissä kirjaimet vievät aavistuksen pienemmän tilan kuin vastaava samankokoinen teksti PC:ssä. Tämä saattaa aiheuttaa sen ettei tavuviiva osu kohdalleen rivin lopussa.

Esimerkiksi itsetavutettu teksti MAC:ssä:

Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam.

Voi näkyä PC:ssä näin:

Lorem ipsum dolor sit amet,
consec-
tetuer adipiscing elit, sed diam.

Vasta joissakin uusimmissa selaimissa on tuki tavutukselle, jolloin tekstiä ei tarvitse pätkiä käsin. Esimerkiksi tällä sivustolla leipätekstiin on lisätty automaattitavutus ja selaimen oma tavutuslaajennus hoitaa työn. Ominaisuus näkyy ainakin uusimmissa Firefox- ja Internet Explorer -selaimissa. Listan selainten tuesta tavutukselle löytää täältä.

Peruskirjasimet

Ohessa yleisimmät verkkokäytössä olevat Windows-fontit ja niiden MAC-vastineet, jotka löytyvät lähes jokaiselta koneelta.

Windows	MAC
Arial	Arial, Helvetica
Arial Black	Arial Black, Gadget
Comic Sans MS	Comic Sans MS
Courier New	Courier New
Georgia	Georgia
Impact	Impact, Charcoal
Lucida Console	Monaco
Lucida Sans Unicode	Lucida Grande
Palatino Linotype	Book Antiqua, Palatino
Tahoma	Geneva
Times New Roman	Times
Trebuchet MS	Helvetica
Verdana	Verdana, Geneva
Webdings (Webdings)	Webdings (Webdings)
Wingdings (Wingdings)	Zapf Dingbats (Zapf Dingbats)
MS Serif	New York

Kirjainperheillä annetaan liikkumavaraa

Verkkopalvelun typografiassa ei yleensä jättäydytä yhden fontin varaan, vaan käytetään kirjainperheitä. Esimerkiksi leipätekstin voi määritellä muodossa ”Arial, Helvetica, Verdana”. Tällöin selain tarkistaa käyttäjän koneelta onko sivulla tarvittavia fontteja saatavilla ja näyttää tekstin ensimmäistä osumaa vastaavalla kirjaintyypillä. Jos esimerkiksi Arialia ei ole saatavissa, teksti näytetään Helvetica-fontilla.

Jatka lukemaan seuraavaa artikkelia: Osa 7: Responsiivuus