Serif- ja sans serif -fontit selitettynä

Serif-fonttien kirjainten päissä on pieniä viimeistelyviivoja, sans serif -fonteissa ei. Tässä luvussa kerrotaan, miten serif- ja sans serif -fontteja käytetään sivustolla ja brändimateriaaleissa.

Luonnos

Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhentuneelta, vaikka molemmat myyvät samanlaisia palveluja. Ero löytyy yleensä serif- ja sans serif -valinnasta ja sen takana olevista tavoista. Huomaat eron heti, vaikka et osaisi vielä nimetä yhtäkään sääntöä.

Serif-fonttien kirjainten päissä on pieniä viimeistelyviivoja, sans serif -fonteissa ei. Tässä luvussa kerrotaan selkokielellä, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen voi ottaa käyttöön ilman ammattisanaston sotkua. Näet myös, miten typografian perusteet liittyvät samaan kokonaisuuteen. Käydään asia läpi vaihe vaiheelta.

Serif ja sans serif ymmärrettäväksi

Serif-fonttien kirjainten päissä on pieniä viimeistelyviivoja, sans serif -fonteissa ei.

Verkkoturvalliset fontit varmistavat, että teksti näkyy samanlaisena eri laitteilla.

Serif- ja sans serif -valinta vaikuttaa sävyyn, luettavuuteen ja brändin persoonaan.

Näin valitset brändillesi sopivan

Käytä pitkään leipätekstiin näytöllä sans serif -fonttia, ellei brändisi selvästi kaipaa serif-fonttia.

Vertaa nykyistä sivustoasi lukuihin fonttien yhdistäminen ja verkkoturvalliset fontit, niin huomaat puutteet nopeasti.

Kirjoita ylös kaksi sääntöä, joita noudatat jokaisella uudella sivulla, jotta päätökset pysyvät yhtenäisinä.

Käytännön tarkistuslista tälle päivälle

Käytä pitkään leipätekstiin näytöllä sans serif -fonttia, ellei brändisi selvästi kaipaa serif-fonttia.

Kun käyt läpi jotakin sivua, kysy, näkyykö serif- ja sans serif -valinta onnistuneena jo ensimmäisellä vierityksellä puhelimessa. Jos ei, järjestä osiot uudelleen ennen kuin hiot yksityiskohtia.

Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin näet, mikä muutos auttoi serif- ja sans serif -valintojen kanssa sivustollasi.

Anna tämä lista kaikille, jotka päivittävät sivustoasi, jotta typografian perusteet pysyvät yhtenäisinä uusillakin sivuilla.

Valitse tälle kuulle yksi seurattava mittari, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Silloin ulkoasun muutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.

Miten tämä aihe liittyy laajempaan brändiisi

Visuaaliset valinnat harvoin koskevat vain yhtä sivua. Verkkoturvalliset fontit varmistavat, että teksti näkyy samanlaisena eri laitteilla.

Some-julkaisujesi, sähköpostiesi ja painotuotteidesi kannattaa toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.

Kun brändin visuaalinen ilme alkaa ajautua eri suuntiin, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.

Lue parhaat fontit verkkosivustolle, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.

Serif- ja sans serif -valinta vaikuttaa sävyyn, luettavuuteen ja brändin persoonaan.

Kysymykset, jotka usein jäävät huomaamatta

Lisähakusanat, kuten typografian perusteet ja verkkoturvalliset fontit, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin käytäntöihin.

Verkkoturvalliset fontit varmistavat, että teksti näkyy samanlaisena eri laitteilla.

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 serif- ja sans serif -fonteista, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.

Työkalut, joilla visuaaliset päivitykset sujuvat 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äkymää.

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ä fonttien yhdistäminen ja verkkoturvalliset fontit, niin osio pysyy yhtenä kokonaisuutena mielessäsi.

Sinulla on nyt toimiva näkökulma serif- ja sans serif -fontteihin. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin verkkoturvalliset fontit ja parhaat fontit verkkosivustolle, niin vauhti säilyy tässä osiossa.

Usein kysytyt kysymykset

Kauanko serif- ja sans serif -valintojen parantaminen kestää?

Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamalla keskittyneellä kerralla, kun käyttävät tämän luvun perusasioita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.

Tarvitsetko suunnittelijan serif- ja sans serif -valintoihin?

Suunnittelijasta on apua laajoissa brändiuudistuksissa, mutta moni serif- ja sans serif -valintaan liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla fonttien yhdistäminen, niin saat aiheesta lisää.

Voiko WEMASY auttaa serif- ja sans serif -fonttien käyttöönotossa 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 muutoksia puhelimessa.

Mikä on yleisin virhe serif- ja sans serif -valinnoissa?

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 verkkoturvalliset fontit seuraavaa parannusta varten.

Miten serif- ja sans serif -valinta 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 serif- ja sans serif -fonttien jälkeen?

Jatka tämän kirjan luvuilla fonttien yhdistäminen ja verkkoturvalliset fontit, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.

Ota se heti käyttöön
omalla verkkosivullasi.

Aloita ilmaiseksi WEMASYlla ja rakenna sivusi muutamassa minuutissa.