Miten kotisivujen fontit kannattaa valita?

Kotisivut ovat yhä edelleen tärkeässä roolissa asiakashankinnassa, mutta oletko ikinä pysähtynyt pohtimaan niiden fontteja. Hyvät fontit ovat tietysti selkeitä ja helppolukuisia, mutta parhaassa tapauksessa fontit tukevat yrityksen visuaalista ilmettä ja rakentavat brändiä. 

Pelkästään oletusfontteja on useimmissa järjestelmissä satoja, joten parhaimman fontin valinta voi kuitenkin olla työlästä. Tässä artikkelissa käymme läpi, miten fontti valitaan sekä sen, mitä fonttikokoa ja -tyyliä  kannattaa kotisivuilla käyttää.

Valitaanko kotisivujen fontit aina itse?  

WordPressin ja useimpien kotisivukoneiden valmiit teemat sisältävät jo hyvin suunnitellut fonttiyhdistelmät, joiden ansiosta koko sivuston tekstit ovat ulkoasultaan yhtenäisiä. Jos siis olet jo valinnut sivustosi tyyliin sopivan teeman, ei sen fontteja kannata välttämättä muuttaa. 

Esimerkiksi WordPress-teemoissa tekstityylit on yleensä suunniteltu niin, että sekä leipäteksteille että eritasoisille otsikoille on jo valittu hyvät fontit väreineen ja kokoineen. Sivuja luodessasi sinun ei siis itse tarvitse valita fontteja: riittää, että merkitset otsikot otsikoiksi, jolloin tekstit saavat automaattisesti oikean tyylin. 

Jos teema on muuten sopiva, mutta sen fontit eivät mielestäsi anna oikeaa vaikutelmaa yrityksestäsi, kannattaa kokeilla muita fontteja. 

Mihin kotisivujen fontti vaikuttaa?

Kotisivujen fonteilla voi olla suuri merkitys esimerkiksi sivuston saavutettavuuden ja nopeuden kannalta. Toisaalta hyvin valinttu fontti voi vahvistaa yrityksen brändiä ja tekee visuaalisesta ilmeestä tunnistettavamman.

Selkeys ja luettavuus

Selkeä fontti tekee lukemisesta helpompaa. Tyyleiltään erikoisemmat fontit voivat näyttää hienolta, mutta niiden lukeminen ei välttämättä ole helppoa. Varsinkin leipäteksteissä kannattaa aina suosia helppolukuisia fontteja, sillä ne parantavat sivuston käyttökokemusta ja voivat tätä kautta vaikuttaa jopa hakukonenäkyvyyteen postiivisesti.

Brändi

Yhtenäinen fonttien käyttö tekee yrityksestä tunnistettavamman ja antaa siitä ammattimaisen vaikutelman. Samoja fonttityylejä ja värejä kannattaa suosia niin yrityksen kotisivuilla kuin sen somejulkaisuissa ja muissa materiaaleissa. 

Fontit ovatkin osa yrityksen brändiä. Selkeyden ja yhtenäisyyden lisäksi fontti voi tukea yrityksen brändiä eli sitä kuvaa, mikä yrityskestä muodostuu. Fonteilla voi luoda esimerkiksi asiantuntevan, rennon, vanhanaikaisen tai modernin vaikutelman. Katso alta, millaisia fontteja tunnetut yritykset ovat valinneet omiin logoihinsa.

• The New York Times – English Towne
• Puma – My Puma
• Tommy Hilfiger – Gill Sans Regular
• Adobe – Myriad Pro Bold Condensed
• Vogue – Didot
• Gillette – Futura Extra Black Italic
• Visa – Myriad Black Italic
• eBay – Univers 53 Extended

Reponsiisivuus ja saavutettavuus

Nykyaikaisten kotisivujen tulee toimia kaikilla laitteilla ja erikokoisilla näytöllä ongelmitta. Lisäksi nykyaikana tulee huomioida myös sivuston saavutettavuus. Tästä syystä valittujen fonttien on skaalauduttava hyvin ja säilytettävä luettavuus myös pienemmillä näytöillä.

Fonttikoon tuleekin olla riittävän suuri, jotta teksti on helposti luettavissa ilman sivun suurentamista. Lisäksi on tärkeää, että fontin ja taustan välinen kontrasti on riittävä, jotta teksti erottuu selkeästi. Fonttien tulisi myös tukea eri kielten erikoismerkkejä, jos sivustolla on monikielistä sisältöä.

Hyvä fontti toimiikin monen kokoisena, näyttää hyvältä kaikilla laittella ja tukee käyttössä olevien kielien erikoismerkkejä.

Sivuston latausnopeus

Fonttien määrä ja tiedostokoko voivat vaikuttaa sivuston latausnopeuteen. Jos sivustolla on paljon erilaisia fontteja, ne voivat hidastaa sivuston latautumista. Nykyaikana käyttäjät odottavat, että sivustot latautuvat nopeasti, joten tähän kannattaa kiinnittää huomiota myös fonttien kohdalla.

Miten kotisivujen fontti valitaan?

Fontteja on olemassa todella paljon ja tämän takia fonttien valinta voikin tuntua haastavalta. Annamme seuraavaksi viisi vinkkiä kotisivujen fonttien valintaan, käymme sen jälkeen läpi hyviä fonttivaihtoehtoja sekä sitä, mitkä fontit sopivat hyvin yhteen ja mistä fontteja löytää.

5 vinkkiä kotisivujen fonttien valintaan

1. Käytä helppolukuisia fontteja. Varsinkin leipätekstin fontin on tärkeää olla helppolukuinen, joten kannattaa valita jokin tavallisimmista fonteista, jotka näyttävät samalta kaikilla laitteilla. Erikoisemmat fontit eivät yleensä sovi leipäteksteihin: esimerkiksi kaunokirjoitus fontti sopii lähinnä logoihin ja suuriin otsikoihin. 
   
2. Älä käytä kotisivuilla liian montaa eri fonttia. Yleensä yksi tai kaksi fonttia riittää – yksi leipätekstiä varten, ja mahdollisesti toinen otsikoille. Suuri määrä erilaisia fontteja tekee sivustosta sekavan näköisen. Yksikin fontti taipuu moneen, kun muutat sen kokoa, tyyliä, väriä, riviväliä ja merkkiväliä. 
   
3. Valitse myös kotisivuille fontit, jotka sopivat yrityksesi brändiin. Mieti, mitä mielikuvia eri fontit herättävät, ja sopivatko ne yritykseesi. 
   
4. Käytä mahdollisuuksien mukaan samoja fontteja kotisivuilla, somejulkaisuissa ja muissa materiaaleissa. Fontit ovat osa yrityksesi brändiä, joten pääsääntöisesti kannattaa suosia samoja fontteja kaikissa yrityksen materiaaleissa. 
   
5. Tutki muiden verkkosivujen fontteja. Minkälaisen vaikutelman ne antavat, ja sopisivatko ne myös omille sivuillesi? Ottamalla vaikutteita monilta eri sivustoilta saat paremman kuvan siitä, miten fontteja voi käyttää, ja osaat paremmin valita kotisivuillesi sopivat fontit. 

Mitkä fontit ovat parhaita?

Kaikilla järjestelmillä toimivat ja helppolukuiset fontit ovat varmoja valintoja kotisivujen ja uutiskirjeiden teksteille. Netistä ladatut fontit eivät välttämättä näy kaikille käyttäjille oikein, sillä esimerkiksi sähköpostiohjelmat saattavat muuttaa ne oletusfonteiksi.  

Esimerkiksi nämä fontit ovat helppolukuisia, suosittuja ja näyttävät varmasti samalta kaikilla laitteilla ja alustoilla: 

• Helvetica  
• Times New Roman 
• Arial 
• Verdana 
• Baskerville 
• Georgia 
• Lucida 

Mitkä fontit sopivat hyvin yhteen?

Jos valitset kotisivuillesi eri fontin leipätekstille ja otsikoille, varmista, että ne sopivat hyvin yhteen. Toisaalta niiden on hyvä myös erottua toisistaan. 

Esimerkiksi serif ja sans serif -fontit toimivat usein hyvin yhdessä. Toinen tapa valita yhteensopivat fontit on ottaa ne samasta fonttiperheestä. Tällöin esimerkiksi otsikoissa voidaan käyttää kyseisen fontin vahvistettua eli bold-leikkausta ja leipätekstissä normaalia eli regular-leikkausta.

Mistä fontteja löytää?

Useimmilla kotisivualustoilla ja käyttöjärjestelmillä on jo valmiiksi laaja valikoima fontteja. Ainakin leipätekstin ja otsikoiden fontit kannattaa valita oletusfonteista. 

Jos haluat käyttää erikoisempia fontteja esimerkiksi yrityksesi logossa, kuvissa tai muissa materiaaleissa, niitä löytyy netistä paljon sekä ilmaisia että maksullisia. Ilmaisia fontteja löytyy esimerkiksi Adobe Fonts ja Google Fonts -sivustoilta.  

Fonttien käyttö kotisivuilla

Kotisivujen fontteja kannattaa aina käyttää mahdollisimman johdonmukaisesti. Esimerkiksi koko sivustolla kannattaa käyttää samaa fonttia leipäteksteissä ja samaa fonttia otsikoissa. Johdonmukaisuus tekee sivustosta selkeämmän ja ammattimaisemman.  

Fonttien väri

Fontin värissä on tärkeintä, että se erottuu hyvin taustasta ja on helppo lukea. Kontrasti taustan ja tekstin välillä kannattaa olla suuri, jotta teksti ei katoa taustaan. Tekstien värien pitäisi tietysti myös olla yhtenäisiä sivuston ja yrityksen brändin kanssa. 

Hyvä fontin väri on helppo löytää itse kokeilemalla erilaisia vaihtoehtoja ja yhdistelmiä. Kun sopiva yhdistelmä löytyy, kannattaa sitä vielä testata erilaisilla laitteilla.

Fonttien koko

Fonttikoon on tärkeää olla tarpeeksi suuri, jotta teksti on helppo lukea ilman sivun suurentamistakin. Käyttämällä erilaisia fonttikokoja voit korostaa otsikoita ja eri osioita sivuillasi. 

Jos käytät valmisteemaa, on valitsemassasi teemassa on todennäköisesti jo oletuksena hyvät ja toisistaan erottuvat fonttikoot niin otsikoissa kuin leipätekstissäkin. 

Fonttityylit ja muut tavat muokata tekstejä

Tekstin tyyliä voi muokata muillakin tavoilla kuin vaihtamalla sen väriä, fonttia ja kokoa. Esimerkiksi kirjasinväliä muokkaamalla ja käyttämällä isoja kirjaimia voit erottaa otsikot leipätekstistä selkeästi, vaikka fontti pysyisikin samana. Riviväliä suurentamalla voit tehdä pitkistä teksteistä kevyemmän näköisiä. 

Tekstien ulkoasua voi muokata monilla eri tavoilla, ja erilaisia yhdistelmiä kannattaa aina kokeilla. Muista kuitenkin käyttää erilaisia tyylejä johdonmukaisesti koko sivustollasi. 

Varafontit

Jos käytössä oleva fontti on kovin harvinainen, voi olla tarpeen määrittää varafontti (engl. fallback font) CSS-tiedostoon. Tämä tarkoittaa sitä, että varafonttia käytetään niissä tilanteissa, kun sivuston varsinainen fontti ei syystä tai toisesta lataudu käyttäjän laitteella oikein.

Aloita omien kotisivujen rakentaminen

Nyt kun tiedät, miten kotisivuille valitaan hyvä fontti, voit aloittaa myös omien kotisivujen rakentamisen. Zonerin webhotelli sisältää kaiken tarvittavan alkuun, kokeile 30 päivää riskittä ja jos et ole tyytyväinen, saat rahasi takaisin!