Typografia

Typografia tarkoittaa sitä, miltä teksti näyttää, tekstin visuaalinen ilme. Typografia ei ole vain fontin valintaa, vaan myös kuinka sitä käytetään.


Valtaosa kuluttamastamme tiedosta on tekstiä. Kun keskitymme lukemiseen, tekee typografia töitä taustalla alitajuisesti, selvästi enemmän kuin muut visuaaliset elementit.

Typografia on oleellinen osa yrityksen ja urheilujoukkueen visuaalista ilmettä, nettisivujen ulkoasua ja sen toiminnallisuutta. Typografia vaikuttaa keskeisesti lehden ja kirjan lukukokemukseen. Kun fontti valitaan huolella ja sitä käytetään taiten, voidaan yritys tunnistetaan pelkän typografian perusteella.

Fontin valinta

Millainen fontti sopii kuhunkin tilanteeseen? Jääkiekkojoukkue, kahvila ja lakimies käyttävät kaikki erilaista fonttia. Kun fontin valinta tehdään huolella, vahvistaa se viestiä, luo tunnelmaa ja auttaa myös erottautumaan joukosta. Fontin valintaan vaikuttaa keskeisesti kaksi asiaa, millaisen tunnelman se välittää lukijassa ja kuinka fontti toimii, eli sen tekniset ominaisuudet.

Typografia

Tunne

Lukija ei todennäköisesti tiedä mitään fonteista tai typografiasta, mutta aistii silti aina sen tunnelman. Yhden fontin tunnelma on leikkisä, toisen juhlallinen ja kolmas viestii luotettavuudesta. Kulttuuri ja vallitsevat trendit vaikuttavat meihin kaikkiin. Näitä voidaan ja kannattaakin hyödyntää kun valitaan fonttia. Pitää myös muistaa, että samat asiat eivät toimi kaikkialla maailmassa.

Fontilla voidaan tuoda tunnelmaa myös tietyltä historian aikakaudelta. Lukijan ei tarvitse tuntea typografian historiaa, aistiakseen tunnelman vaikkapa 60-luvulta. Voidaan valita fontti, joka on suuniteltu kyseisenä aikana tai hieman aiemmin. Käytetään siis fonttia, jota sinä aikana olisi voitu käyttää.

Kielituki

Fonttia ei voida valita pelkästään sen tunnelman perusteella, tekniset perusasiat täytyy olla kunnossa. Ensimmäinen varmistettava asia on, että sillä on riittävä kielituki kohdeyleisöön nähden. Fontit on suunniteltu tietyille markkinoille ja kielituki on aina rajallinen. Ei ole fonttia, joka tukisi kaikkia maailman kieliä.

Suomessa tulee ensimmäisenä varmistaa, että ä- ja ö-kirjaimet löytyvät fontista. Suositeltavaa olisi, että ainakin Länsi-Euroopan kielet ovat tuettuna. Mitä laajempi kielituki, sitä paremmin fontti palvelee eri tarpeisiin. Laajimmillaan fontit pitävät sisällään tuen sadoille kielelle.

Lukijat saattavat käyttää automaattista käännöspalvelua lukiessaan nettisivuja, jonka kieltä eivät ymmärrä. Jos kaikki kirjaimet eivät ole tuettuna, kääntäjä joutuu vaihtamaan fonttia puuttuvien kirjainten kohdalla.

Vahvuudet

Hyvällä fontilla on useita vahvuuksia. Perusvahvuus ja lihavointi eivät vielä riitä kovinkaan pitkälle. Mitä enemmän fontilla on vahvuuksia, sitä monikäyttöisempi se on. Fontti antaa suunnittelijalle selvästi enemmän mahdollisuuksia ja se taipuu moneen tilanteeseen.

Fontti, josta löytyy vain yksi vahvuus tai rajallinen merkistö, voi silti riittää kun suunitellaan logoa, julistetta tai yksittäistä grafiikkaa. Leipätekstiin tällaisesta fontista ei kuitenkaan ole.

Fontin vahvuudet

X-korkeus

X-korkeus eli pienaakkosten korkeus suhteessa suuraakkosiin vaikuttaa eniten tekstin luettavuuteen. Pieni x-korkeus aiheuttaa sen, että isot kirjaimet nousevat esille ja tekstin lukeminen pienessä koossa on vaikeaa. Pieni x-korkeus toimii kun teksti on tarpeeksi suurta. Liian suuri x-korkeus aiheuttaa puolestaan sen, että pien- ja suuraakkoset eivät erotu toisistaan riittävästi. X-korkeus on siis luettavuuden kannalta paljon tärkeämpi mittari, kuin fontin pistekoko.

Fontin x-korkeus

Kursiivi

Fontin valinnassa kannattaa tarkastella myös kursiivia tekstiä. Laadukkailla fonteilla on hyvin kaunis ja huoliteltu kursiivi. Sen ilme saattaa lähennellä skriptiä. Kursiivi säilyttää hyvin tekstin vahvuuden ja näyttää tasaiselta tekstin seassa.

Kursiivi

Leveys

Kirjaimen leveys on mielenkiintoinen ominaisuus. Kuten fontin vahvuudet, myös eri leveydet säilyttävät fontin perusrakenteen samana. Jos samasta fontista löytyy useita vahvuuksia ja leveyksiä, antaa se suunnittelijalle jo paljon mahdollisuuksia. Rinnalle ei välttämättä tarvita toista fonttia ollenkaan.

Käyttämällä kapeaa kirjaimen leveyttä kapealla näytöllä, voidaan varmistaa että otsikon sanat mahtuvat otsikkoriville. Erityisen suuri kirjaimen leveys tarjoaa persoonallisuutta ja toimii hyvin lyhyissä otsikoissa.

Fontin eri leveyksiä säätämällä voidaan erottaa eri tekstit toisistaan, ilman että muutetaan tekstin kokoa tai vahvuutta, ja säilytetään silti hyvä luettavuus. Esimerkiksi voidaan käyttää leveää leikkausta lainauksissa, perusleveyttä tekstissä ja kapeaa leikkausta kuvatekstissä.

Fontin leveys

Luettavuus

Hyvään luettavuuteen voidaan vaikuttaa typografian avulla, eli käyttämällä fonttia taiten. Myös fontin valinnassa kannattaa kiinnittää luettavuuteen huomiota.

Pitkissä teksteissä, artikkeleissa, uutisissa ja kirjoissa, vaaka kallistuu yleensä päätteellisiin (serif) fontteihin. Tämä pätee niin fyysisessä kuin digitaalisessa mediassa. Päätteelliset fontit ovat silmälle miellyttävämpiä lukea suurissa määrissä ja kirjaimet erottuvat paremmin toisistaan.

Lyhyissä leipäteksteissä toimii hyvin niin päätteelliset kuin päätteettömät (sans-serif) fontit. Kun teksti ei ole montaa kappaletta pidempi, voi fontti olla myös kokeellisempi.

Päätteettömän fontin luettavuus on yleensä huonompi pienemmän kontrastin ja suuren x-korkeden takia. Fontin luettavuutta voidaan testata, laittamalla Il1-kirjaimet peräkkäin. Erottuvatko suuraakkos i, pienaakkos l ja numero 1 riittävästi toisisstaan? Tämä on hyvä pikatesti kun valitaan fonttia.

Fonttien paritus

Kokonainen yritysilme tai nettisivut voidaan luoda käyttämällä vain yhtä fonttia tai fonttiperhettä. Edellytyksenä on, että siitä löytyy runsaasti vahvuuksia ja mielellään useampi leveys. Harvemmin näin kuitenkaan on. Tällainen vaatimus rajoittaisi paljon fontin valintaa.

Isoimmat yritykset suunnittelevat toisinaan kokonaisen fonttiperheen omiin tarpeisiinsa. Applen suunnittelemasta San Francisco -fontista löytyy tuki yli 150 kielelle. Fontista on omat versionsa niin suurille näytöille (Mac), erityisen pienille näytöille (Apple Watch) ja tasalevyinen versio koodausympäristöön.

Yhden fontin tarpeet harvoin kuitenkaan riittävät, kun suunnitellaan kokonaista ilmettä. Rinnalle voidaan tuoda yksi tai useampi hieman erilainen fontti. Toisen fontin avulla saadaan ilmeeseen luotua persoonallisuutta ja ulkoasuun dynamiikkaa. Kun fontti valitaan huolella, voidaan saada aikaan kaunis ja harmoninen kokonaisuus.

Fontteja voidaan parittaa monella tapaa. Rinnalle tulee valita fontti, joka sopii pääfontin kanssa yhteen, mutta on kuitenkin tarpeeksi erilainen. Yhdistäviä tekijöitä voi olla vaikka samanlainen rakenne, leveys, x-korkeus tai kontrasti. Yksi tyypillinen tapa on parittaa leipätekstin päätteellinen fontti, on valita otsikkoon päätteetön fontti.

Helpoin tapa parittaa fontteja, on käyttää saman fonttiperheen fontteja. Joskus fonttiperheet tarjoavat samasta fontista niin päätteellisen kuin päätteettömän version. Nämä ovat tyylillisesti ja teknisesti hyvin samanlaisia ja sopivat erinomaisesti yhteen.

Toinen melko varma tapa yhdistää eri fontteja on käyttää saman fonttitalon tai suunnittelijan fontteja. Suunnittelijan mieltymykset näkyvät vahvasti läpi eri fonteissa ja ne monesti pariutuvat hyvin yhteen keskenään.

Fontin käyttö

Hyväkään fontti ei pelasta huonoa fontin käyttöä. Leikkaukset, tyylit, tekstin koko, rivivälit, asettelu ja otsikoinnit kuuluvat kaikki typografiaan. Toisaalta, vaikka fontti ei olisi paras mahdollinen, on taidokkaasti käyttäen mahdollista saada siitä paljon irti.

Riviväli

Tekstin rivien välisellä tilalla on suuri merkitys luettavuuteen. Sopiva riviväli tekee tekee kappaleista ilmavia ja miellyttäviä lukea. Riviväli asetetaan yleensä suhteessa tekstin kokoon, riviväli voisi olla 140 % tekstin koosta. Yleisohjetta ei ole.

Mitä pienempi tekstin koko tai pidempi rivi, sitä suurempi riviväli. Otsikoissa riviväli on aina tiiviimpi, koska teksti on suurempaa. Puhelinten näytöt ovat kapeita ja rivit tällöin myös lyhyitä, joten rivivälikin voi olla pienempi.

Rivin pituus

Rivin pituuden suositus on 40 ja 60 merkin välillä. Tämä tarkoittaa noin 8-12 sanaa rivillä. Suositus koskee leipätekstiä. Kapealla näytöllä rivi on monesti lyhyempikin. Liian pitkää riviä on raskasta lukea, eikä silmä löydä pitkän rivin jälkeen seuraavalle riville.

Tekstin koko

Yhtä oikeata tekstin kokoa ei ole. Fontit ovat erilaisia. Käytettyyn kokoon vaikuttaa kirjaimen leveys ja x-korkeus. Pieni x-korkeus vaatii paljon suuremman tekstin koon.

Osa fonteista on suunniteltu käytettäviksi vain suurissa koissa, kuten otsikoissa. Näissä on ominaisuuksia ja mielenkiintoisia yksityiskohtia, jotka tulevat esille vain isossa koossa. Joistakin fonteista on omat Display-versionsa, jotka on tarkoitettu juuri otsikkokäyttöön.

Kontrasti

Luettavuuden kannalta kontrasti on hyvin tärkeä ominaisuus. Tekstin ja sen taustan värin kontrasti tulee olla riittävän suuri. Vaalea teksti valkoisella taustalla voi näyttää tyylikkäältä, mutta kaikki lukijat eivät välttämättä erota tekstiä.

Otsikot ohjaavat lukijaa kappaleesta toiseen, joten niiden ja leipätekstin välillä tulee olla riittävä kontrasti. Kontrastia saadaan otsikoihin muokkaamalla sen kokoa, vahvuutta ja tyyliä tarpeeksi erilaiseksi leipätekstiin nähden.

Säännöt on tehty rikottaviksi

Typografia on hyvin mielenkiintoinen visuaalisen suunnittelun alue, joka tarjoaa loputtomasti mahdollisuuksia ja haasteita. Vaikka typografiaa hallitsee valtava määrä sääntöjä, hyvä typografia syntyy sääntöjen rikkomisesta. Monesti syntyy tilanteita, jolloin säännöt eivät vain toimi. Jos jokin näyttää huonolta, se kannattaa korjata. Vaikka se olisi sääntöjen vastaista.


Lue lisää

Huono typografia voi aiheuttaa ongelmia jopa Yhdystavaltain presidenttiehdokkaille.

Mielenkiintoinen Wikipedia-sivu, joka käsittelee läntisen maailman typografian historiaa.

Fonts Knowledge on Googlen toteuttama kirjasto artikkeleista ja oppaista, joka opastaa fontin valintaan ja käyttöön.

Professional Web Typography on ilmainen opas, joka käsittelee typografian käyttöä netissä.

Kaikki artikkelit

Est. 2007
Turenki
60°55’1.2”N
24°38’30.4”E