Fonttikoko ei ole koriste. Se on rakenne. Kun pidät fonttien luettavuutta liiketoimintataitona, arvaat vähemmän kalliisti ja rakennat sivuja, jotka ohjaavat ihmisiä toimimaan.
Fonttien luettavuus riippuu koosta, rivin pituudesta, riviväleistä ja tekstin kontrastista taustaan. Tässä luvussa kerrotaan selkokielellä, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten voit käyttää sitä ilman alan sanahelinää. Näet myös, miten typografia verkkosuunnittelussa liittyy samaan kokonaisuuteen. Käydään asia läpi vaihe vaiheelta.
Fonttien luettavuuden ydinasiat
Fonttien luettavuus riippuu koosta, rivin pituudesta, riviväleistä ja tekstin kontrastista taustaan.
Pieni teksti on yksi nopeimmista tavoista menettää mobiilikävijät.
Typografian säännöissä suositellaan lyhyitä rivinpituuksia, jotta lukeminen on miellyttävää.
Näin viet asian käytäntöön
Suurenna leipätekstin kokoa ja välejä, ennen kuin vaihdat fontteja kokonaan.
Tutustu lukuihin fonttihierarkia ja typografia verkkosuunnittelussa, niin yhdistät tämän aiheen osion muihin lukuihin.
Pienet, johdonmukaiset parannukset voittavat satunnaiset kokonaisuudistukset, kun vasta opettelet.
Käytännön tarkistuslista, jota voit käyttää heti
Suurenna leipätekstin kokoa ja välejä, ennen kuin vaihdat fontteja kokonaan.
Kun käyt läpi jotakin sivua, kysy, näkyykö fonttien luettavuus jo ensimmäisellä vierityksellä puhelimessa. Jos ei näy, järjestä osiot uudelleen ennen kuin hiot yksityiskohtia.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin opit, mikä muutos auttoi luettavuutta sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta typografia verkkosuunnittelussa pysyy samanlaisena uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin muutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten aihe liittyy laajempaan brändiisi
Visuaaliset valinnat harvoin koskevat vain yhtä sivua. Typografian säännöissä suositellaan lyhyitä rivinpituuksia, jotta lukeminen on miellyttävää.
Some-julkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa ajautua hajalleen, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue fonttityypit, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Pieni teksti on yksi nopeimmista tavoista menettää mobiilikävijät.
Kysymykset, jotka usein jäävät huomaamatta
Lisähakusanat, kuten typografia verkkosuunnittelussa 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 lyhyitä rivinpituuksia, jotta lukeminen on miellyttävää.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla julkaistulla sivulla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto fonttien luettavuudesta, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, joilla visuaaliset päivitykset käyvät helpommin
Moniin asettelun ja tyylin ongelmiin et tarvitse omaa koodia. Visuaalisella editorilla säädät välejä, värejä ja kirjasimia ja esikatselet samalla puhelin- ja tietokonenäkymiä.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista vielä fonttihierarkia ja typografia verkkosuunnittelussa, niin osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma fonttien luettavuuteen. Käytä sitä, kun tarkistat sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin typografia verkkosuunnittelussa ja fonttityypit, niin vauhti säilyy tässä osiossa.
Fonttien luettavuuden hallinta on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet tehnyt yhden parannuksen, jotta ajatukset siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset toimivat paremmin kuin kaikkien sääntöjen ahtaminen kerralla. Pidä muistiinpanoja siitä, mikä toimi yleisöllesi, niin seuraava päivitys sujuu nopeammin.
Usein kysytyt kysymykset
Kauanko fonttien luettavuuden parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamalla keskittyneellä kerralla, kun soveltavat tämän luvun perusasioita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan fonttien luettavuuden parantamiseen?
Suunnittelija auttaa monimutkaisissa brändiuudistuksissa, mutta moni luettavuuden korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla fonttihierarkia, niin saat aiheesta lisää.
Voiko WEMASY auttaa fonttien luettavuuden parantamisessa 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 luettavuudessa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät sivu kerrallaan. Valitse yksi tärkein asia, esimerkiksi luettavuus tai kontrasti, ja katso sitten typografia verkkosuunnittelussa seuraavaa parannusta varten.
Miten fonttien luettavuus 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 luettavuuden jälkeen?
Jatka tämän kirjan luvuilla fonttihierarkia ja typografia verkkosuunnittelussa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.