Pientä harmaata tekstiä sekavalla taustalla. Silmät rasittuvat jo ennen ensimmäisen lauseen loppua. Siksi fonttien yhdistäminen on tärkeää brändillesi. Kun asettelu ja väri tappelevat viestin kanssa, ihmiset lähtevät sanomatta miksi.
Fonttien yhdistämisessä käytetään kahta tai useampaa kirjasintyyppiä, jotka erottuvat toisistaan mutta sopivat silti yhteen. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen voi ottaa käyttöön ilman jargonia. Näet myös, miten serif- ja sans serif -valinta kuuluu samaan kokonaisuuteen. Käydään se läpi askel askeleelta.
Mitä fonttien yhdistäminen tarkoittaa käytännössä
Fonttien yhdistämisessä käytetään kahta tai useampaa kirjasintyyppiä, jotka erottuvat toisistaan mutta sopivat silti yhteen.
Hyvä pari erottaa otsikot leipätekstistä ilman, että ne riitelevät keskenään.
Typografian säännöissä suositellaan, että käytössä on enintään kaksi tai kolme fonttiperhettä.
Näin otat fonttien yhdistämisen käyttöön sivustollasi
Yhdistä persoonallinen otsikkofontti yksinkertaiseen ja hyvin luettavaan leipätekstifonttiin.
Aloita yhdestä sivusta, esimerkiksi etusivusta tai tärkeimmästä laskeutumissivusta. Korjaa suurin ongelma ensin ja vie sama ratkaisu sitten muihin pohjiin.
Lue tämän luvun parina verkkoturvalliset fontit perustaksi ja fonttien luettavuus seuraavaksi askeleeksi tässä osiossa.
Käytännön tarkistuslista, jota voit käyttää jo tänään
Yhdistä persoonallinen otsikkofontti yksinkertaiseen ja hyvin luettavaan leipätekstifonttiin.
Kun tarkastelet mitä tahansa sivua, mieti, näkyykö fonttien yhdistäminen onnistuneena jo ensimmäisellä vierityksellä puhelimessa. Jos ei, järjestä osiot uudelleen, ennen kuin alat viimeistellä pikkuasioita.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi fonttiparisi kanssa sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta serif- ja sans serif -valinta pysyy yhtenäisenä uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, kuten sivulla vietetty aika tai lomakkeen aloitukset. Näin muutokset sidotaan liiketoiminnan tuloksiin eikä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä rajoitu yhteen sivuun. Typografian säännöissä suositellaan, että käytössä on enintään kaksi tai kolme fonttiperhettä.
Somejulkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkkosivustolla.
Kun brändin visuaalinen ilme alkaa hajota, asiakkaat tuntevat hienoisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue fonttien luettavuus, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Hyvä pari erottaa otsikot leipätekstistä ilman, että ne riitelevät keskenään.
Kysymykset, jotka usein jäävät huomaamatta
Lisähakusanat, kuten serif vai sans serif ja typografian säännöt, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Typografian säännöissä suositellaan, että käytössä on enintään kaksi tai kolme fonttiperhettä.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla toimivalla sivulla. Pienet mitatut muutokset ovat parempia kuin hatarat suunnitelmat.
Kun tiimilläsi on yhteinen sanasto fonttien yhdistämisestä, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin asettelun ja tyylin ongelmiin ei tarvita omaa koodia. Visuaalisessa editorissa säädät välejä, värejä ja kirjasimia ja voit samalla esikatsella puhelin- ja tietokonenäkymää.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pikkusäädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista uudelleen verkkoturvalliset fontit ja parhaat fontit verkkosivustolle, jotta osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma fonttien yhdistämiseen. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin parhaat fontit verkkosivustolle ja fonttien luettavuus, niin vauhti säilyy tässä osiossa.
Fonttien yhdistäminen on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet viimeistellyt yhden parannuksen, jotta ajatukset siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset toimivat paremmin kuin kaikkien sääntöjen ahtaminen kerralla. Kirjaa ylös, mikä toimi yleisöllesi, niin seuraava päivitys sujuu nopeammin.
Usein kysytyt kysymykset
Kauanko fonttien yhdistämisen parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työvaiheessa, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan fonttien yhdistämiseen?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni fonttien yhdistämiseen liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla verkkoturvalliset fontit, niin saat aiheesta lisää.
Voiko WEMASY auttaa fonttien yhdistämisessä verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja kirjasimia ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutokset puhelimella.
Mikä on yleisin virhe fonttien yhdistämisessä?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi tärkein asia, kuten luettavuus tai kontrasti, ja katso sitten parhaat fontit verkkosivustolle seuraavaa parannusta varten.
Miten fonttien yhdistäminen liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät pidempään sivulla, mikä tukee merkkejä, joita hakukoneet seuraavat. Yhdistä ulkoasun korjaukset toimivaan sisältörakenteeseen, niin tulos on paras.
Mitä kannattaa lukea seuraavaksi fonttien yhdistämisen jälkeen?
Jatka tämän kirjan luvuilla verkkoturvalliset fontit ja parhaat fontit verkkosivustolle, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.