tiistai 9. kesäkuuta 2015

Parhaat fonttiasetukset blogiin


Ulkoasu ei saa mennä sisällön edelle


Fontilla, sen koolla ja värillä on suuri vaikutus siihen, kuinka moni lukee kirjoittamaasi tekstiä. Pääsääntöisesti bloggaajat haltsaavat ulkoasuasiat, mutta aika ajoin törmää joihinkin mahdottoman vaikealukuisiin blogeihin. Niissä saattaa olla esimerkiksi liian kirkkaat värit tai epäselvä fontti.

Jokaisella bloggaajalla on tarve tehdä blogistaan omannäköinen ja fontti on yksi ratkaiseva tekijä blogin ulkoasussa. Bloggaajan pitäisi kuitenkin muistaa, että blogitekstin tarkoitus on välittää lukijoille tietoa. Lukijan pitäisi kyetä lukemaan blogia, joten tekstin pitäisi olla mahdollisimman selkeää ja helppolukuista. Yritä siis katsoa blogiasi lukijan silmin ja miettiä, miten voisit tehdä siitä selkeämmän.


Jos fonttiasetukset ovat pielessä, voi blogin lukeminen olla hankalaa.


Jos blogiin haluaa tietynlaisen tyylin, esimerkiksi rokahtavan, sitä ei kannata luoda postausten fonttia muokkaamalla. Muuta sen sijaan bannerin, sivupalkkien ja muiden blogin osien tyyliä. Tällä tavoin tyyli ei mene sisällön edelle.

Yksinkertainen ulkoasu tuo esille blogin sisällön. Taidenäyttelyissäkin teokset ripustetaan valkoisille seinille ja näin pitäisi blogeissakin tehdä. Teksti pitää esittää arvokkaalla tavalla ja sille pitää antaa tilaa hengittää.

Kannattaa käydä katsomassa suosittuja blogeja ja ottaa vinkkejä niiden ulkoasuista. Ne ovat lähes poikkeuksetta väritykseltään mustavalkoisia ja fonttina on Arial, Times New Roman tai jokin muu helppolukuinen.

VINKKI: Jos haluat tietää, millaiset fonttiasetukset jollakin sivustolla on, löydät vastauksen sivuston lähdekoodista. Klikkaa selaimesi yläpalkista kohtaa ”Näytä” ja valitse ”Näytä lähdekoodi”. Myös hiiren oikealla näppäimellä sivua klikatessa pitäisi näkyä tuo vaihtoehto.


Fonttikoko – 14 tai yli


Kouluaikana mieleemme on iskostettu, että fontin koon on oltava 12. Tämä ajattelutapa jatkuu tuottaessa sisältöä internetiin, vaikka suurempi fontti sopii verkkosisältöön paremmin.

Selaimet on suunniteltu käyttämään kokoa 16 oletuksena, koska tavalliselta tietokoneen näytöltä lukiessa koko 16 näyttää samalta kuin lukisi 12-kokoista tekstiä paperilta. Yllättävää, eikö? Itselleni tämä tuli shokkina, sillä en ollut ajatellut blogini tekstin olevan liian pientä. Mutta kun vertasin blogini fonttikokoa muihin sivustoihin, näytti oma tekstini pieneltä tihrustukselta. Vaihdoin siis äkkiä fonttikoon suuremmaksi.

Monissa blogialustoissa on fonttikoko 12 oletuksena. Liian pieni fontti ei aiheuta kaikille käyttäjille ongelmia, koska esimerkiksi Macbookilla sivustoa saa zoomattua pienellä sormiliikkeellä. Kaikissa tietokoneissa zoomaaminen ei kuitenkaan käy yhtä helposti, joten lukija saattaa siirtyä muille sivustoille etsimään haluamaansa tietoa.

Fonttikooksi siis kannattaa laittaa mielellään 14 tai sitä suurempi. Esimerkiksi monet uutissivustot käyttävät artikkeleissaan fonttikokoa 15. Jopa 18 voi näyttää hyvältä leipätekstin fonttikokona. Alussa blogin fontin suurentaminen voi näyttää omissa silmissä omituiselta, mutta siihen tottuu nopeasti.


Mikä fontti?


Blogin fontin tulee olla yksinkertainen ja helppolukuinen. Leipätekstin fontiksi sopivat esimerkiksi Arial, Times New Roman, Georgia, Helvetica ja Trebuchet. Fonteilla leikittelyä kannattaa harrastaa mieluummin otsikoissa kuin leipätekstissä.

Fontit voidaan jakaa eri kategorioihin sen mukaan, onko niissä pääteviivoja. Serif-fonteissa (esim. Times New Roman ja Courier) on pääteviivat kirjaimissa ja sans-serif-fonteissa (esim. Arial ja Helvetica) taas ei ole. Pääteviivattomia fontteja on helpompaa lukea tietokoneen näytöltä kun taas paperilta luettaessa pääteviivallinen teksti on helppolukuisempaa. Otsikoissa taas ei ole niin väliä, minkä tyyppistä fonttia käyttää, koska niissä on vain vähän tekstiä.

Esimerkiksi seuraavat fontit ovat yleisesti käytettyjä:

  • Arial on pyöreähkö pelkistetty fontti.
  • Courier-fonttia on käytetty kirjoituskoneissa. Kaikki kirjaimet vievät yhtä paljon tilaa.
  • Georgia on elegantti kirjasin ja hyvä vaihtoehto Times New Romanille.
  • Helvetica on nimeltään vähän vieraampi, vaikka on se on yksi maailman käytetyimmistä fonteista.
  • Times on kenties maailman käytetyin fontti.
  • Trebuchet on yksinkertainen ja moderni fontti.
  • Verdana on astetta leveämpi.


Tumma fontti, vaalea tausta


Onneksi niistä ajoista ollaan päästy pitkälle, kun tällainen väritys oli muotia. Eihän tuollaisesta värimössöstä saa mitään selvää. Valitettavasti valkoista tekstiä mustalla taustalla näkee vieläkin silloin tällöin, mikä on varma keino karkottaa lukijat. Jos blogiin haluaa luoda tummanpuhuvan tunnelman, se onnistuu muunlaisillakin ulkoasun muokkauksilla.

Nyrkkisäännöksi kannattaa ottaa, että blogin tausta on mielellään valkoinen ja teksti on tummaa. Tekstin ei tarvitse olla aina mustaa. Myös tummanharmaa on toimiva väri blogitekstissä.

Tekstin ja taustan välisen kontrastin on oltava riittävän suuri, jotta silmät eivät rasitu lukiessa. Jos kontrastia ei ole tarpeeksi, silmät joutuvat tekemään paljon töitä erottaakseen tekstin taustan joukosta. Toisaalta myös liian suuri kontrasti voi rasittaa silmiä.


Riviväli – noin 1,5


Myös rivivälistä kannattaa tehdä lukijaystävällinen. Liian lyhyet rivivälit saavat tekstirivit sulautumaan toisiinsa. Tekstiä on vaikeaa lukea myös silloin, kun rivivälit ovat liian pitkät. Sopiva riviväli on yleensä 1,3–1,6. Tämä voi tosin vaihdella fontista riippuen. Kokeile eri vaihtoehtoja, jotta löydät omaan blogiisi sopivimman vaihtoehdon.

Blogin rivivälin muuttaminen onnistuu HTML-koodin kautta. Jos sinulla on blogi Bloggerissa, mene vasemman sivupalkin kautta kohtaan ”Malli” ja valitse ”Muokkaa HTML-koodia”. Etsi koodista kohta line-height. Siihen voit merkitä haluamasi rivivälin. Mitä suurempi luku, sitä suurempi väli.




Rivin leveys


Tämä on yleinen virhe nettisivuilla ja blogeissa. Jos rivi on liian pitkä, silmien on vaikeaa löytää seuraavan rivin alkua eksymättä. Kun tekstiä on koko näytön leveydeltä, eivät silmät ja aivot pysty käsittelemään näkemäänsä.

Joillakin asiantuntijoilla on mottona, että mitä lyhyemmät rivit, sen parempi. Jotkut taas suosittelevat, että rivin pituus olisi noin 45–75 merkkiä, koska silmät väsyvät myös silloin, jos rivi on liian lyhyt. Juuri kun on saanut aloitettua uuden rivin lukemisen, joutuukin jo siirtymään seuraavalle riville. Tässäkin siis kannattaa noudattaa kultaista keskitietä.

Bloggerissa tekstikentän leveyttä voi säätää mallin suunnittelutyökalussa koko blogin leveyttä säätämällä. Alussa kapeampi tekstikenttä voi näyttää omaan silmään kummalliselta, mutta siihen tottuu nopeasti.

Blogin reunoilla on oltava tyhjää tilaa, jotta blogi ei vaikuta täyteen ahdetulta. Esimerkiksi tavallisen A4-sivun lukeminen olisi vaikeaa, jos sivulla ei olisi marginaaleja. Sama juttu on blogin kanssa. Tekstin ympärille on jätettävä tyhjää tilaa.


Älä tasaa tekstiä keskelle


Keskelle tasattua tekstiä näkee laittoman usein blogeissa. En ymmärrä keskitetyn tekstin suosiota. Ehkä bloggaajat hakevat blogeihinsa taiteellista ilmettä sen avulla? Vaikka blogi olisi sisällön puolesta kuinka hyvä tahansa, en lue sitä, jos teksti on tasattu keskelle. Bloggaaja ei ehkä itse tajua, miten ärsyttävää keskelle tasattu teksti on lukijoiden mielestä.

Keskelle tasatun tekstin lukeminen rasittaa silmiä, koska jokainen rivi alkaa eri kohdasta. Vasemmalle tasatussa tekstissä taas lukija tietää, mihin silmät pitää siirtää rivin päätyttyä. Vasemmalle tasatun tekstin lukeminen on näin ollen helpompaa ja nopeampaa.

Keskelle tasattua tekstiä kannattaa käyttää vain harkittuna mausteena. Esimerkiksi blogin otsikko, yksittäiset lainatut lauseet ja runonpätkät voivat näyttää kivoilta keskelle tasattuna, mutta siihen ne käyttötarkoitukset sitten loppuvatkin.

Blogiteksti kannattaa siis aina tasata vasemmalle tai molemmille reunoille, koska silloin tekstiä on helpointa lukea. Koska kaikki lauseet alkavat samasta reunasta, eivät silmät joudu tekemään töitä etsiäkseen seuraavaan rivin aloituskohdan.




Onko sinun mielestäsi fontilla väliä?

6 kommenttia:

  1. Kiitokset taas hyvästä aiheesta! Fontilla on todella väliä ja tuon keskittämisen paljouteen olen itsekin kiinnittänyt huomiota. Se ei vain toimi, jos ei ole sitten kyse vaikka lorun pätkästä.

    Mutta mitäs sinä sanot siitä, että teksti tasataan molempiin reunoihin? Itse olen käyttänyt sitä blogissani (minä kun tykkään järjestyksestä kaikkinensa) mutta välillä on käynyt mielessä, onko se mukavinta luettavaa vierailijoille.

    VastaaPoista
    Vastaukset
    1. Kävin katsomassa blogiasi ja teksti näyttää oikein hyvältä molempiin reunoihin tasattuna. Tuon levyisille riveille molempiin reunoihin tasaaminen sopii oikein hyvin. Jos tekstirivit taas olisivat kovin lyhyitä, saattaisivat sanojen välit venyä joissakin kohdissa liian pitkiksi, mutta senkin voisi luultavasti korjata tavuviivoilla.

      Poista
  2. Totta ihmeessä fontilla on väliä. Muinoin tuli aina Times- ja Helvetica-kausi vuorotellen. Mikä tietysti paljastaa kommentoijan printtimediataustan.

    Varsinainen asia kuitenkin on se, että 14 voi olla liikaa näytön ja ikänäön yhdistelmälle, jotka tietysti ovat yhtä monimuotoisia kuin allergiat. :) Ikäporukka pelaa Ctrl plussan kanssa koko ajan, eikä hevosenkokoista jaksa lukea. Kokeilin omassa blogissani ja tykkäsin, että 12 on kuitenkin parempi. Ainakin sillä fontilla.

    Meitä vanhoja on netissä yhä enemmän, joten muistuttelen aina välillä olemassaolostamme. Toiset ovat sormi suussa, ja sitten on niitä joita voi sanoa diginatiiveiksi. Kuten mediajunkie muisteli joskus: "In my day we had to write our web-blogs by hand in html 1.0, barefoot in the snow, uphill all the way, against the wind ..." (Hain sitaatin hiljattain muuta tarkoitusta varten.)

    Konsultin blogista on ollut paljon iloa. Hyvä, että joku kerää yhteen paikkaan teknisiä neuvoja sekä ajankohtaisia juttuja, jotka bloggaajan on syytä tietää. Kiitokset!

    VastaaPoista
    Vastaukset
    1. Kiitos kommentista! En ollutkaan osannut ajatella fontin kokoa tuolta kantilta. Tuntuu, että itse törmään vain tilanteisiin, että nettisivun teksti on liian pientä. Se taas on harvinaista, että teksti olisi omaan silmään liian isoa. Tähän toki varmasti vaikuttavat myös tietokoneen näytön ominaisuudet, näkökyky sekä omat mieltymykset :) On mielenkiintoista kuulla muiden kokemuksia aiheesta.

      Tuo on hauska juttu, että fonteissakin on omat trendinsä. Esimerkiksi Comic Sans oli vielä 2000-luvun alussa suosittu fontti, mutta nykyisin on olemassa jopa kansanliike sen kieltämiseksi.

      Poista
  3. Olen sitä mieltä että fontilla on väliä. Olen nähnyt sellaisia blogeja joita en pysty lukemaan liian monimutkaisen fontin takia.

    VastaaPoista
  4. Olen eri mieltä fontin ja taustan väristä. Valkoinen tausta rasittaa ainakin minun silmiä. Vaaleanharmaa teksti mustalla pohjalla tuntuu mukavimmalta kun lukee näytöltä.

    VastaaPoista