Somemainokset, verkkosivut ja verkkokaupat kilpailevat kaikki huomiosta, ja typografia on yksi tehokkaimmista työkaluista erottua. Oikein valitut fontit voivat kiinnittää katseen, viestiä persoonallisuutta ja ohjata asiakasta toimintaan. Toisaalta huono fonttivalinta voi latistaa koko homman.
Katso canva-esitys linkkipareista >
Somemainoksissa fonteista huomioitavaa
- Huomioarvo:
- Fontin on erotuttava nopeasti liikkuvassa somevirrassa.
- Luettavuus:
- Suurin osa katsoo mainoksia puhelimella, joten tekstin on oltava hyvin näkyvä.
- Ytimekkyys:
- Mainoksen teksti on yleensä melko lyhyttä, joten yksi fonteista voi olla hieman persoonallisempi mutta muuten selkeä teksti
- Toimintakehotteet:
- Selkeät fontit tehostavat ”Osta nyt!” tai ”Lue lisää” -kehotteita.
- Brändin yhdenmukaisuus:
- Fontit tukevat brändin ilmettä.
- Esimerkkejä fonttipareista somemainoksiin:
- Otsikko: Montserrat Bold, Leipäteksti: Montserrat Regular
- Otsikko: Anton, Leipäteksti: Lato
- Otsikko: Raleway ExtraBold, Leipäteksti: Raleway Regular
Fontit verkkosivuilla ja verkkokaupoissa
- Leipätekstin luettavuus ja selkeys:
- Sivustolla on paljon tekstiä, joten fontin on oltava miellyttävä lukea
- Käytettävyys:
- Verkkosivuilla hyvä typografia parantaa sivuston selkeyttä ja navigointia.
- Hierarkia:
- Otsikot ja alaotsikot jäsentävät sivua ja ohjaavat lukijaa.
- Brändin yhdenmukaisuus:
- Fontit tukee brändin ilmettä.
- Verkkokaupan erityispiirteet:
- Tuotenimet ja hinnat on oltava superselkeitä.
- Esimerkkejä fonttipareista verkkosivuille ja verkkokauppaan:
- Otsikko: Playfair Display Bold, Leipäteksti: Open Sans
- Otsikko: Lato Black, Leipäteksti: Lato Regular
- Otsikko: Montserrat Bold, Leipäteksti: Roboto
- Ilmaiset ja helpot fontit sekä someen että verkkosivuille
- Google Fonts: Laaja valikoima ilmaisia, laadukkaita ja web-ystävällisiä fontteja. Helppo käyttää monissa ohjelmissa ja WordPressissä. Saa myös Canva.comiin ladattua.
- Canva.com: Kätevä valikoima fontteja suoraan suunnittelutyökalussa.
- Canva-opas -alkeet blogiteksti
Vinkkejä
- Yksinkertaisuus toimii aina:
- Vältä liian koristeellisia koukeroisia fontteja
- Testaa mobiilissa:
- Näyttääkö teksti hyvältä puhelimella? Näkyykö hyvin? Mobile first!
- Älä pelkää valita samaa fonttia:
- Eri tyylit (esim. Lato regular ja Lato bold) toimivat hyvin yhdessä. Varsinkin jos on epävarma mitkä fontit sopii yhteen.
- LATO BOLD – Lato regular
- Käytä fontteja johdonmukaisesti:
- Samat fontit läpi sivuston.
- Käytä 2-3 eri fonttia, liikaa eri fontteja tekee sivut ja mainokset sekaviksi
- Riittävän suuri koko ja sopivan väljä riviväli (1.5x fontin koko) parantavat luettavuutta
- Lihavointi korostaa, kursivointi tuo pehmeyttä (käytä vähän). ISOT kirjaimet toimivat otsikoissa.
- Kuten muitakin graafisen suunnittelun -sääntöjä, fonttiohjeitakaan ei tarvitse seurata orjallisesti, vaan tutkia, testata ja löytää omat käytännöt.
Lisää esimerkkejä fonttipareista:
- Otsikko: Montserrat, Leipäteksti: Open Sans
- Otsikko: Playfair Display, Leipäteksti: Merriweather
- Otsikko: Bebas Neue, Leipäteksti: Lato
- Otsikko: Arvo, Leipäteksti: PT Sans
- Otsikko: Oswald, Leipäteksti: Raleway
- Otsikko: Libre Baskerville, Leipäteksti: Source Sans Pro
- Otsikko: Cabin, Leipäteksti: Nunito
- Otsikko: Fira Sans Extra Condensed, Leipäteksti: Fira Sans
- Otsikko: Anton, Leipäteksti: Roboto
- Otsikko: Bitter, Leipäteksti: Varela Round
Tekstiin on käytetty tekoälyä, tarkistettu ja muokattu radikaalisti. Tekoäly antoi hieman erikoisiakin fonttipareja, mitä en itse käyttäisi, joten tämän esityksen fontit ovat valittu omaan silmääni miellyttävät ja selkeät.