\n Jokainen yritt\u00e4j\u00e4 tiet\u00e4\u00e4 selke\u00e4n, oikein suunnitellun ja hyvin hoidetun verkkosivuston t\u00e4rkeyden. Nyky\u00e4\u00e4n, jos et tarjoa asiakkaillesi verkkosivustoa, joka tekee heihin todella vaikutuksen, menet\u00e4t heid\u00e4t paljon nopeammin kuin kesti saadaksesi heid\u00e4n luottamuksensa.\n<\/p>\n
\n Valitettavasti useimmat yritt\u00e4j\u00e4t n\u00e4kev\u00e4t vaivaa ja palkkaavat suunnittelijoita, jotka ovat hyvi\u00e4 kehitt\u00e4misess\u00e4. He usein j\u00e4tt\u00e4v\u00e4t huomioimatta yhden olennaisen ominaisuuden – kirjasintyylin.\n<\/p>\n
\n K\u00e4ytt\u00e4m\u00e4si kirjasintyyli ja jokaisen sis\u00e4isen verkkosivustosi tekstin koko on yksi niist\u00e4 asioista, jotka ovat ratkaisevia sen suhteen, pysyv\u00e4tk\u00f6 asiakkaasi, ovatko he vuorovaikutuksessa ja konvertoivatko ne.\n<\/p>\n
\n Totuus on, ett\u00e4 vaikka kirjasimet eiv\u00e4t todellakaan vaikuta kovin vaikuttavilta, niill\u00e4 on voima vied\u00e4 yrityksesi korkealle tai alas. Se on todella yksinkertaista, jos verkkosivustosi vierailija ei halua tai pysty lukemaan julkaisemaasi sis\u00e4lt\u00f6\u00e4, viestisi ei mene h\u00e4nelle l\u00e4pi, joten et voi muuntaa. Useat tutkimukset ovat osoittaneet, ett\u00e4 verkkosivuilla k\u00e4ytettyjen fonttien tyyppi ei vaikuta pelk\u00e4st\u00e4\u00e4n luettavuuteen, vaan mielialaan, k\u00e4ytt\u00f6kokemukseen ja jopa artikkelin koettuun pituuteen. T\u00e4st\u00e4 syyst\u00e4 on olennaista, ett\u00e4 suunnittelija ymm\u00e4rt\u00e4\u00e4 eron pelk\u00e4n paljon sis\u00e4lt\u00f6\u00e4 sis\u00e4lt\u00e4v\u00e4n verkkosivuston luomisen ja sellaisen verkkosivuston kehitt\u00e4misen v\u00e4lill\u00e4, jolla on miellytt\u00e4v\u00e4 ja vaikuttava muotoilu, joka parantaa lukijan mielialaa.\n<\/p>\n
\n\n ”Tyyppi on kaunis kirjainryhm\u00e4, ei joukko kauniita kirjaimia.”\n <\/p>\n
\n -Mathew Carter\n <\/p>\n<\/blockquote>\n
\n Kun ajattelet fontteja, mik\u00e4 tulee ensimm\u00e4isen\u00e4 mieleesi? Jos olet kuten useimmat ihmiset, jotka eiv\u00e4t viel\u00e4 ymm\u00e4rr\u00e4 niiden t\u00e4rkeytt\u00e4, ajattelet todenn\u00e4k\u00f6isesti kirjasintyyppej\u00e4, kuten Calibri, Comic Sans, Arial, Times New Roman ja muut. Sinun on kuitenkin tiedett\u00e4v\u00e4, ett\u00e4 n\u00e4m\u00e4 ovat vain perusasiat. Kun puhutaan typografiasta, joka on otettava k\u00e4ytt\u00f6\u00f6n verkkosivustollasi, sinun ei tarvitse ottaa huomioon vain kirjasintyyppej\u00e4, vaan my\u00f6s niiden kokoa, v\u00e4rej\u00e4, v\u00e4lily\u00f6ntej\u00e4 ja v\u00e4lily\u00f6ntej\u00e4.\n<\/p>\n
\n T\u00e4ss\u00e4 artikkelissa tavoitteemme ei ole vain kertoa sinulle fonttien t\u00e4rkeiden ominaisuuksien vaikutuksesta, vaan my\u00f6s antaa sinulle k\u00e4yt\u00e4nn\u00f6n ehdotuksia, joiden avulla voit nostaa oman verkkosivustosi tulosprosenttia. Varustaudu siis kyn\u00e4ll\u00e4 ja muistilehti\u00f6ll\u00e4, sill\u00e4 n\u00e4it\u00e4 tietoja et halua missata.\n<\/p>\n
\n Kirjasintyypit ja niiden vaikutus
\n<\/h5>\n\n Jos olet lukenut muutamia kirjasimia ja typografiaa koskevia artikkeleita, tied\u00e4t, ett\u00e4 on olemassa useita kirjasintyyppej\u00e4, joiden katsotaan olevan verkkojulkaisun arvoisia. Jotkut ovat yht\u00e4 mielt\u00e4 siit\u00e4, ett\u00e4 Georgia tuo eniten tuloksia, kun taas toiset ajattelevat, ett\u00e4 Baskerville vie kotiin voittajan kunnian. Mutta ennen kuin alamme puhua siit\u00e4, keskustellaan kirjasimien kokonaisvaikutuksesta sivustosi br\u00e4nd\u00e4ykseen. T\u00e4ss\u00e4 on asia; Jos sis\u00e4lt\u00f6\u00e4si on vaikea lukea, koska kirjaimet ovat liian l\u00e4hell\u00e4 toisiaan tai niiden koko on liian pieni, ne joko poistuvat v\u00e4litt\u00f6m\u00e4sti tai yritt\u00e4v\u00e4t lukea viel\u00e4 muutaman sekunnin ja poistuvat lopulta, jos se tuntuu edelleen vaikealta. Vaikka sinulla olisi eritt\u00e4in uskollisia asiakkaita, jotka k\u00e4yttiv\u00e4t aikaa ja lukisivat koko kopion, he muistavat, ett\u00e4 kesti heilt\u00e4 liian kauan ja menet\u00e4t heid\u00e4t.\n<\/p>\n
\n Verkkosivustollesi valitsemasi kirjasintyypit ovat ratkaisevan t\u00e4rkeit\u00e4, koska ne tekev\u00e4t koko viestin lukemisen, ymm\u00e4rt\u00e4misen ja ymm\u00e4rt\u00e4misen prosessista vaivatonta. Jos valitset kirjasimen, joka on samaa mielt\u00e4 lukijoidesi kanssa, heid\u00e4n huomionsa j\u00e4\u00e4 antamaasi tietoon eik\u00e4 siihen, kuinka kauan lukeminen kesti.\n<\/p>\n
\n K\u00e4yt\u00e4nn\u00f6n vinkki:<\/strong> Kaikki kirjasimet eiv\u00e4t toimi kaikilla verkkosivustoilla. Fontit ovat luonteeltaan erilaisia, ja valitsemasi fontti riippuu t\u00e4ysin yrityksest\u00e4si, siit\u00e4, millaisia \u200b\u200basiakkaita palvelet, ja viestist\u00e4, jonka haluat esitt\u00e4\u00e4. Parasta olisi tutkia laajasti ja tarkastella kirjasintyyppej\u00e4, joita muut samalla alalla k\u00e4ytt\u00e4v\u00e4t. Kokeile ja testaa useita tyyppej\u00e4 eri alustoilla, jotta tied\u00e4t tekev\u00e4si oikean p\u00e4\u00e4t\u00f6ksen. Muista, ett\u00e4 sopivan kirjasimen valitseminen kest\u00e4\u00e4 jonkin aikaa, mutta se on sen arvoista, kun n\u00e4et tulosprosenttisi nousevan.\n<\/p>\n
\n Fonttikoot ja niiden vaikutus
\n<\/h5>\n\n Kun puhut fontin koosta, yksi t\u00e4rkeimmist\u00e4 huolenaiheistasi on luettavuus. Luettavuus tulee paljon t\u00e4rke\u00e4mm\u00e4ksi, koska haluat varmistaa, ett\u00e4 viestisi tulee perille. Vaikka fonttivalintasi ei olisikaan t\u00e4ydellinen, oikean kokoinen koko s\u00e4\u00e4st\u00e4\u00e4 sinut, sill\u00e4 k\u00e4vij\u00e4n ei ainakaan tarvitse rasittaa silmi\u00e4\u00e4n lukeakseen esitt\u00e4m\u00e4\u00e4si sis\u00e4lt\u00f6\u00e4. Jos sinulla on oikea kirjasinkoko, asiakkaasi lukevat todenn\u00e4k\u00f6isemmin viestisi, ovat vuorovaikutuksessa ja jopa levitt\u00e4v\u00e4t sanaa. Kun pystyt kommunikoimaan paremmin asiakkaidesi kanssa, br\u00e4ndisi vaikuttaa positiivisesti ja t\u00e4m\u00e4 puolestaan \u200b\u200blis\u00e4\u00e4 yrityksesi mainetta.\n<\/p>\n
\n K\u00e4yt\u00e4nn\u00f6n vinkki:<\/strong> Esitett\u00e4v\u00e4ksi valitsemasi fontin koko riippuu verkkosivuston suunnittelukontekstista. Vaikka k\u00e4yntikortti voi vaatia hyvin pienen koon, tapahtumajuliste vaatii paljon suuremman. Mutta koska puhumme nimenomaan verkkosivustojen suunnittelusta, sinun on harkittava, julkaisetko mobiililaitteita vai yleisi\u00e4 n\u00e4ytt\u00f6j\u00e4. Nyrkkis\u00e4\u00e4nt\u00f6n\u00e4 asiantuntijat suosittelevat, ett\u00e4 k\u00e4yt\u00e4t kokoa 10 – 14 pikseli\u00e4 tekstisis\u00e4ll\u00f6lle ja 16 – 20 pikseli\u00e4 otsikoille tai otsikoille. Parhaan tuloksen saavuttamiseksi voit suorittaa harjoitustarkistuksen sinulle sopivista kooista ja s\u00e4\u00e4t\u00e4\u00e4 sitten niiden mukaan, jos ne eiv\u00e4t n\u00e4yt\u00e4 toimivan hyvin. Lis\u00e4ksi, jos k\u00e4yt\u00e4t erilaisia \u200b\u200bn\u00e4ytt\u00f6kokoja (mik\u00e4 sinun pit\u00e4isi), varmista, ett\u00e4 fontti toimii my\u00f6s hyvin, kun kokoa pienennet\u00e4\u00e4n mobiililaitteissa.\n<\/p>\n
\n Fontin v\u00e4ri ja verkkosivustosi
\n<\/h5>\n\n Jos haluat saada viestisi vierailijoillesi parhaalla mahdollisella tavalla, sinun ei tarvitse mietti\u00e4 vain sanavalintaa, vaan my\u00f6s sen esitt\u00e4mist\u00e4. Vaikka fontin v\u00e4ri ei ehk\u00e4 vaikutakaan niin isolta jutulta, sill\u00e4 on suuri vaikutus, varsinkin jos sivustosi on erityisen pirte\u00e4. V\u00e4ripsykologia on kokonainen tutkimusalue, ja voit oppia siit\u00e4 melko paljon. Mutta kun k\u00e4yt\u00e4t v\u00e4rej\u00e4, varsinkin fonteissa, muista olla ylitt\u00e4m\u00e4tt\u00e4, koska se vain n\u00e4ytt\u00e4\u00e4 hauskalta. Valitsemiesi v\u00e4rien ei pit\u00e4isi ainoastaan \u200b\u200bvahvistaa yrityksesi ydinarvoja, vaan my\u00f6s tuoda lis\u00e4potkua persoonallisuudelle, jonka kanssa asiakkaat ovat yhteydess\u00e4. Jos p\u00e4\u00e4dyt valitsemaan fontillesi v\u00e4\u00e4r\u00e4n v\u00e4rin, ne toimivat sinua ja yrityst\u00e4si vastaan.\n<\/p>\n
\n Toinen mainitsemisen arvoinen ominaisuus on kontrasti. Tekstisi tai sivusi kontrasti on taustan ja tekstin v\u00e4lill\u00e4 vallitseva tummuuden ero. Vaikka et halua k\u00e4ytt\u00e4\u00e4 vanhoja tekniikoita, kuten punaisen tekstin laittamista vihre\u00e4lle taustalle, sinun tulee varmistaa, ett\u00e4 tekstin ja taustan v\u00e4lill\u00e4 on hyv\u00e4 kontrasti, jotta luettavuus paranee.\n<\/p>\n
\n K\u00e4yt\u00e4nn\u00f6n vinkki:<\/strong> Ensinn\u00e4kin, ennen kuin p\u00e4\u00e4t\u00e4t fontin v\u00e4rist\u00e4, sinun on mietitt\u00e4v\u00e4 huolellisesti v\u00e4rej\u00e4 ja fontteja, jotka pit\u00e4isi olla tai jotka on jo integroitu br\u00e4ndiisi ja sen logoon. Esimerkiksi, kun ajattelet Coca-Colaa, luultavasti loihdit esiin hyvin erottuvan kiharan fontin punaisen v\u00e4rin ohella. Kun valitset v\u00e4ri\u00e4, asiantuntijat suosittelevat, ett\u00e4 ajattelet sit\u00e4 kuin talosi huoneen v\u00e4rj\u00e4\u00e4mist\u00e4. Jos haluat vierailijoidesi tuntevan olonsa l\u00e4mpim\u00e4ksi ja kotoisaksi blogia lukiessaan, k\u00e4yt\u00e4 himmeit\u00e4 punaisia \u200b\u200bja appelsiineja, sill\u00e4 ne ovat tarkoitettu rentoutumaan ja rauhoittamaan aisteja. Mutta j\u00e4lleen kerran, muista olla ylitt\u00e4m\u00e4tt\u00e4, koska suurin osa sis\u00e4ll\u00f6st\u00e4 n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 ja luettavalta mustana taustav\u00e4rist\u00e4 riippuen.\n<\/p>\n
\n Otsikon fontit ja mit\u00e4 sinun tulee tiet\u00e4\u00e4
\n<\/h5>\n\n Otsikot, joita k\u00e4yt\u00e4t sis\u00e4ll\u00f6llesi, ovat eritt\u00e4in t\u00e4rkeit\u00e4 paitsi todellisten sanojen, my\u00f6s sen esitt\u00e4misen kannalta. Useat tutkimukset ovat osoittaneet, ett\u00e4 ellet k\u00e4yt\u00e4 tarttuvia ja huomiota her\u00e4tt\u00e4vi\u00e4 otsikoita, vierailijasi siirtyv\u00e4t eteenp\u00e4in ja etsiv\u00e4t jotain hieman mielenkiintoisempaa luettavaa. Ihmisill\u00e4 on tiettyj\u00e4 tapoja lukea verkkoa, ja t\u00e4m\u00e4n avulla huomaat, ett\u00e4 suurin osa sis\u00e4ll\u00f6st\u00e4 yksinkertaisesti luetaan l\u00e4pi. Joten jos et kiinnit\u00e4 vierailijasi huomiota otsikolla, h\u00e4nen lukemismahdollisuudet heikkenev\u00e4t entisest\u00e4\u00e4n. Muista nyt, ett\u00e4 sek\u00e4 otsikossasi k\u00e4ytt\u00e4m\u00e4si kirjasin ett\u00e4 v\u00e4ri ratkaisevat, haluaako vierailija lukea sit\u00e4. Joten vaikka et halua alkaa k\u00e4ytt\u00e4\u00e4 Comic Sansia vain kiinnitt\u00e4\u00e4ksesi huomion, sinun tulee pit\u00e4\u00e4 se luettavana.\n<\/p>\n
\n K\u00e4yt\u00e4nn\u00f6n vinkki:<\/strong> Jos yhdist\u00e4t kirjasimia (k\u00e4yt\u00e4 toista otsikossa ja toista p\u00e4\u00e4sis\u00e4ll\u00f6ss\u00e4), varmista, ett\u00e4 ne todella n\u00e4ytt\u00e4v\u00e4t hyv\u00e4lt\u00e4 yhdess\u00e4. Pariliitos voi joskus olla hankalaa, koska sinun on varmistettava, ett\u00e4 useimmat fonttien elementit t\u00e4sm\u00e4\u00e4v\u00e4t, jotta ne eiv\u00e4t n\u00e4yt\u00e4 kovin erilaisilta toisistaan. T\u00e4ss\u00e4 tapauksessa otsikon kirjasimen on t\u00e4ydennett\u00e4v\u00e4 leip\u00e4teksti\u00e4. Toisaalta, jos k\u00e4yt\u00e4t samaa kirjasintyyppi\u00e4, voit kokeilla eri kokoja ja riviv\u00e4li\u00e4 otsikon parantamiseksi. Sama kirjasintyyppi ei vain tarjoa visuaalista harmoniaa lukijallesi, vaan my\u00f6s v\u00e4hent\u00e4\u00e4 ladattavien fonttien m\u00e4\u00e4r\u00e4\u00e4, mik\u00e4 lis\u00e4\u00e4 yleist\u00e4 latausaikaa ja tehokkuutta.\n<\/p>\n
\n Viivan pituus ja sen merkitys
\n<\/h5>\n\n Useimmat verkkosivustoa luovat ihmiset harkitsevat k\u00e4ytetyn tekstin fonttia, kokoa, v\u00e4ri\u00e4 ja kontrastia. Kuitenkin, mit\u00e4 he menett\u00e4v\u00e4t, on linjan pituus. Rivin pituus on vastuussa yleisen luettavuuden lis\u00e4\u00e4misest\u00e4 tai v\u00e4hent\u00e4misest\u00e4 ja viittaa sanojen tai merkkien m\u00e4\u00e4r\u00e4\u00e4n jokaisella vaakaviivalla. Mit\u00e4 vaikutuksia luettavuuteen on lauseiden lyhyydell\u00e4 tai pituudella. Jos valitsemasi kirjasin saa rivit n\u00e4ytt\u00e4m\u00e4\u00e4n liian pitkilt\u00e4, \u200b\u200bvierailijasi silm\u00e4t joutuvat kulkemaan pitk\u00e4n matkan, mik\u00e4 heikent\u00e4\u00e4 heid\u00e4n lukemistaan, koska se vaatii paljon vaivaa. Toisaalta, jos rivit ovat liian lyhyit\u00e4, lausevirta katkeaa ja vierailija menett\u00e4\u00e4 kiinnostuksensa.\n<\/p>\n
\n K\u00e4yt\u00e4nn\u00f6n vinkki:<\/strong> Yksi Usability Institute Baymardin ehdottama teoria on, ett\u00e4 sinun tulee valita fontti, joka k\u00e4ytt\u00e4\u00e4 50-75 merkki\u00e4 (v\u00e4lily\u00f6nnit mukaan lukien) rivi\u00e4 kohden, koska t\u00e4m\u00e4 takaa optimaalisen luettavuuden. Voit my\u00f6s k\u00e4ytt\u00e4\u00e4 Golden Ratio -typografialaskuria m\u00e4\u00e4ritt\u00e4\u00e4ksesi t\u00e4ydellisen rivin pituuden sis\u00e4ll\u00f6n lukemiseen k\u00e4ytett\u00e4v\u00e4n n\u00e4yt\u00f6n mukaan.\n<\/p>\n
\n Kerning ja miksi sill\u00e4 on merkityst\u00e4
\n<\/h5>\n\n Wikipedian mukaan ”Kerning on prosessi, jossa s\u00e4\u00e4det\u00e4\u00e4n merkkiv\u00e4li\u00e4 suhteellisessa fontissa, yleens\u00e4 visuaalisesti miellytt\u00e4v\u00e4n tuloksen saavuttamiseksi.” Jos k\u00e4yt\u00e4t hyv\u00e4\u00e4 fonttia, se on hyvin tiivis ja jokaisen merkkiparin v\u00e4li on samanlainen. Jos sinulla on suunnittelija, joka m\u00e4\u00e4ritt\u00e4\u00e4 kirjasintyylin graafisessa ohjelmassa, kuten Photoshopissa, h\u00e4n voi muuttaa kirjainten v\u00e4list\u00e4 tilaa ja tehd\u00e4 muutoksia, kunnes kirjasin ja v\u00e4litys n\u00e4ytt\u00e4v\u00e4t t\u00e4ydelliselt\u00e4. Kerningiin keskittym\u00e4tt\u00e4 j\u00e4tt\u00e4minen tulee maksamaan, koska se on usein suurin yksitt\u00e4inen asia, joka erottaa ammattity\u00f6n amat\u00f6\u00f6rien tai haluttujen suunnittelijoiden tekem\u00e4st\u00e4 ty\u00f6st\u00e4.\n<\/p>\n
\n K\u00e4yt\u00e4nn\u00f6n vinkki:<\/strong> Kunkin kirjaimen v\u00e4liin j\u00e4\u00e4v\u00e4n tilan on oltava yht\u00e4 suuri, jos haluat verkkosivustosi n\u00e4ytt\u00e4v\u00e4n ammattimaiselta. Jos suunnittelet kirjasintyyppi\u00e4, muista integroida v\u00e4litys, koska luettavuus paranee, jos kirjainten v\u00e4lill\u00e4 on spatiaalista jatkuvuutta. Toisaalta, jos k\u00e4yt\u00e4t jo olemassa olevia kirjasimia, sinun ei tarvitse huolehtia t\u00e4st\u00e4, koska kaikki n\u00e4m\u00e4 fontit sis\u00e4lt\u00e4v\u00e4t tietoja v\u00e4lily\u00f6nnist\u00e4.\n<\/p>\n
\n Johtop\u00e4\u00e4t\u00f6s
\n<\/h4>\n\n Yritysten omistajille, jotka haluavat parantaa verkkosivustonsa br\u00e4nd\u00e4yst\u00e4 ja saada lis\u00e4\u00e4 asiakkaita, on t\u00e4rke\u00e4 muistaa k\u00e4ytt\u00e4\u00e4 kirjasintyyppej\u00e4, jotka t\u00e4ydent\u00e4v\u00e4t kopiota. Jos teet asiat oikein, se vaikuttaa my\u00f6s lukijasi tunteisiin, mielialaan ja toimintaan. T\u00e4m\u00e4 puolestaan \u200b\u200btekee siit\u00e4 todenn\u00e4k\u00f6isemm\u00e4n, ett\u00e4 he muuttuvat uskollisiksi asiakkaiksi. Muista, ett\u00e4 yksi parhaista tavoista testata fonttia, sen kokoa, v\u00e4ri\u00e4 jne. on testata sit\u00e4 ja katsoa, \u200b\u200bmit\u00e4 tuloksia tuodaan. Anna my\u00f6s koko prosessille aikaa ja jakamatonta huomiotasi, sill\u00e4 jos haluat t\u00e4ydellisyytt\u00e4, t\u00e4ytyy tehd\u00e4 t\u00f6it\u00e4 sen eteen.\n<\/p>\n
\n Lopuksi j\u00e4t\u00e4n sinulle t\u00e4m\u00e4n inspiroivan lainauksen Steve Jobsilta, joka on ensisijaisesti vastuussa siit\u00e4, miksi kiinnit\u00e4mme niin paljon huomiota kirjasimiin nyky\u00e4\u00e4n.\n<\/p>\n
\n\n ”P\u00e4\u00e4tin k\u00e4yd\u00e4 kalligrafiatunnilla oppiakseni (oppia kalligrafiaa). Opin Serif- ja Sans-Serif-kirjasintyypeist\u00e4, eri kirjainyhdistelmien v\u00e4lisen tilan vaihtelemisesta ja siit\u00e4, mik\u00e4 tekee suuresta typografiasta hienoa. Se oli kaunis. Historiallinen. Taiteellisesti hienovarainen tavalla, jota tiede ei koskaan pysty vangitsemaan.”\n <\/p>\n
\n -Steve Jobs\n <\/p>\n<\/blockquote>\n