{"id":100,"date":"2025-11-11T18:12:33","date_gmt":"2025-11-11T16:12:33","guid":{"rendered":"https:\/\/vetecher.jamiserveri.fi\/?page_id=100"},"modified":"2025-11-12T17:49:15","modified_gmt":"2025-11-12T15:49:15","slug":"fontit-verkkosivuilla","status":"publish","type":"page","link":"https:\/\/vetecher.jamiserveri.fi\/index.php\/fontit-verkkosivuilla\/","title":{"rendered":"Fontit verkkosivuilla"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Fontit verkkosivuilla (h1)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

1. Typografian perusteita (h2)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Typografia on t\u00e4rke\u00e4 osa verkkosivujen suunnittelua, sill\u00e4 se vaikuttaa merkitt\u00e4v\u00e4sti ulkoasuun ja k\u00e4ytett\u00e4vyyteen. Huolellisesti suunniteltu ja harkittu verkkosivujen typografia parantaa luettavuutta ja saavutettavuutta. Kuitenkin, koska k\u00e4ytett\u00e4viss\u00e4 on lukuisia fontteja, sen oikean valitseminen verkkosivustollesi voi olla haastavaa. T\u00e4ss\u00e4 tekstiss\u00e4 k\u00e4yd\u00e4\u00e4n l\u00e4pi vinkkej\u00e4 ja parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4 fonttien valintaan.<\/p>

Fontti-termi\u00e4 k\u00e4ytet\u00e4\u00e4n varsin vapaasti puhuttaessa erilaisissa kirjaisimista. Tarkkaan ottaen fontti viittaa tiettyyn kirjasintyypin muunnelmaan, kuten \u201cTimes New Roman Regular\u201d tai \u201cArial Bold\u201d. Se sis\u00e4lt\u00e4\u00e4 lis\u00e4ominaisuuksia, kuten fonttien koon, painon ja tyylin.<\/p>

Kirjasintyyppi (typeface) viittaa tiettyyn \u201cfonttiin\u201d yleisesti. Kun puhumme fonteista Times New Roman tai Arial tarkoitamme yleens\u00e4 kirjasintyyppi\u00e4. Eri kirjasintyypeill\u00e4 on vaihtelevasti erilaisia versioita eli fontteja.<\/p>

Typografia taas on kattotermi kirjaisimien suunnittelulle ja k\u00e4ytt\u00e4miselle. Siihen kuuluu sopivien kirjasintyyppien ja fonttien valinta, tekstin j\u00e4rjest\u00e4minen luettavalla ja esteettisesti miellytt\u00e4v\u00e4ll\u00e4 tavalla sek\u00e4 erilaisten typografisten elementtien, kuten koon, painon ja v\u00e4rin, k\u00e4ytt\u00f6 yhten\u00e4isen ja tehokkaan suunnittelun luomiseksi.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

1.1 Fonttityypit (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Fontit jaetaan kahteen p\u00e4\u00e4luokkaan: Serif ja Sans serif eli p\u00e4\u00e4tteellisiin ja p\u00e4\u00e4tteett\u00f6miin. Serif eli p\u00e4\u00e4tteellisten fonttien jokaisen vedon lopussa on pieni\u00e4 p\u00e4\u00e4teviivoja, kun taas sans-serif eli p\u00e4\u00e4teett\u00f6miss\u00e4 fonteissa ei ole. Serif-fontit ovat perinteisempi\u00e4 ja muodollisempia, kun taas sans-serif-fontit ovat yleens\u00e4 moderneja ja ep\u00e4virallisia. Oikean kirjasintyypin valinta riippuu tavoiteltavasta mielikuvasta.<\/p>

Serif- ja sans-serif-fonttien lis\u00e4ksi on display-, script- ja monospace-fontit. Display-fontit ovat koristeellisia ja her\u00e4tt\u00e4v\u00e4t huomiota, joten ne ovat ihanteellisia otsikoissa ja logoissa. Script-fontit ovat virtaavia ja kursiivisia, mik\u00e4 tarjoaa tyylikk\u00e4\u00e4mm\u00e4n ja hienostuneemman ilmeen. T\u00e4h\u00e4n kategoriaan lasketaan usein \u201ck\u00e4sinkirjoitetut\u201d fontit. Monospace-fonttien kirjainten v\u00e4lill\u00e4 on aina yht\u00e4 suuri v\u00e4li, mik\u00e4 tekee niist\u00e4 hy\u00f6dyllisi\u00e4 koodauksessa ja ohjelmoinnissa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

1.2 Fonttikoko (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Fonttikoko on toinen olennainen elementti typografiassa. Fonttikoon tulee olla tarpeeksi suuri, jotta teksti on luettavissa kaikilla laitteilla. Leip\u00e4tekstin suositeltu fonttikoko on 16\u201320 kuvapistett\u00e4, kun taas otsikoiden fonttikoon tulee olla v\u00e4hint\u00e4\u00e4n 30 kuvapistett\u00e4. Verkkosivuilla k\u00e4ytet\u00e4\u00e4n usein my\u00f6s suhteellisia yksik\u00f6it\u00e4, jolloin k\u00e4ytt\u00e4j\u00e4n asetukset vaikuttavat kirjaisimien kokoon.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

1.3 Riviv\u00e4li (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Riviv\u00e4li viittaa jokaisen tekstirivin v\u00e4liin j\u00e4\u00e4v\u00e4\u00e4 tilaa. Optimaalinen riviv\u00e4li on noin 1,2\u20132 kertaa kirjasinkoko. K\u00e4ytett\u00e4v\u00e4 fontti vaikuttaa riviv\u00e4liin, joten se kannattaa tarkistaa fonttia vaihdettaessa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

1.4 Kirjainv\u00e4li (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Kirjainv\u00e4lill\u00e4 viitataan jokaisen kirjaimen v\u00e4liseen v\u00e4liin j\u00e4\u00e4v\u00e4\u00e4n tilaan. Oikein v\u00e4litetty tekstiss\u00e4 kirjainten v\u00e4lit tuntuvat tasaisilta, vaikka todellisuudessa tiettyjen kirjainten v\u00e4lit ovat eri pituisia.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

1.5 V\u00e4ri (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Tekstin v\u00e4rin ja taustan v\u00e4rin v\u00e4lill\u00e4 tulee olla tarpeeksi suuri kontrasti. T\u00e4ll\u00f6in tekstin luettavuus s\u00e4ilyy. Joillakin verkkosivuilla on valittavissa korkean kontrastin tila, joka nostaa mm. tekstin ja taustan v\u00e4list\u00e4 kontrastia.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

2. Vinkkej\u00e4 fonttien valintaan (h2)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

2.1 Valitse v\u00e4h\u00e4n ja viisaasti (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Kun valitset sopivaa fonttia, pid\u00e4 mieless\u00e4 yrityksen tavoitemielikuva ja luettavuus. Saavutettavan fontin valinnasta voit lukea lis\u00e4\u00e4 WebAIMin sivuilta. Johdonmukaisuuden vuoksi kannattaa k\u00e4ytt\u00e4\u00e4 kahta tai korkeintaan kolmea eri fonttia. Yhdell\u00e4kin fontilla voi tehd\u00e4 ihmeit\u00e4.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

2.2 K\u00e4yt\u00e4 hierarkiaa (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Hierarkia tarkoittaa elementtien v\u00e4list\u00e4 t\u00e4rkeysj\u00e4rjestykseen. Hieman yksinkertaistaen t\u00e4rkeimm\u00e4n tekstin tulisi olla isoimmalla fonttikoolla. Selke\u00e4 hierarkia auttaa k\u00e4ytt\u00e4ji\u00e4 navigoimaan nettisivulla ja erottamaan olennaisen tiedon. Tekstien v\u00e4lill\u00e4 hierarkiaa voi luoda k\u00e4ytt\u00e4en fonttikokoja, painoja ja v\u00e4rej\u00e4. Otsikoissa p\u00e4\u00e4otsikko on hierarkialtaan suurin eli H1 ja sen j\u00e4lkeen seuraavaotsikkoko on H2 jne.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

2.3 Optimoi luettavuutta (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Luettavuus on mainittu jo moneen kertaan. Oikea riviv\u00e4li, kirjasinkoko ja kirjainv\u00e4li helpottavat lukemista. T\u00e4m\u00e4n lis\u00e4ksi v\u00e4liotsikot, listat, lainaukset ja kuvat j\u00e4sent\u00e4v\u00e4t teksti\u00e4. Kukaan ei halua lukea loputonta tekstimassaa, jossa on kilometrin mittaisia lauseita.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

2.4 K\u00e4yt\u00e4 tyhj\u00e4\u00e4 tilaa (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Tyhj\u00e4\u00e4 tilaa sanotaan my\u00f6s negatiiviseksi tilaksi (negative space, white space). Tyhj\u00e4ll\u00e4 tilalla annat tekstin ja lukijan hengitt\u00e4\u00e4. Se on my\u00f6s tyylik\u00e4s tapa erottaa eri kokonaisuudet toisistaan.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

2.5 Tarkasta kontrasti (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

T\u00e4ss\u00e4 tapauksessa kontrastilla tarkoitetaan tekstin ja taustan v\u00e4lill\u00e4 olevaa eroa. Tarkista ett\u00e4 kontrasti on tarpeeksi korkea ja teksti on n\u00e4in luettavaa. Tarkistus onnistuu Webflow\u2019ssa suoraan v\u00e4ripanelista ja muilla sivuilla esimerkiksi Wave-lis\u00e4osalla Chromeen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

3. Yleisimm\u00e4t virheet (h2)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

3.1 Liian monta fonttia (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00c4l\u00e4 k\u00e4yt\u00e4 liian monta erilaista fonttia verkkosivuilla. Maksimisaan saisi olla 2 eri fonttia, esimerkiksi otsikoissa eri fontti ja leip\u00e4tekstiss\u00e4 eri. Jos k\u00e4yt\u00e4t t\u00e4t\u00e4 enemm\u00e4n fontteja, tulee verkkosivusta levoton ja saavutettavuus k\u00e4rsii.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

3.2 Ep\u00e4selv\u00e4 fontti (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Oletko koskaan yritt\u00e4nyt lukea graffitia? Usein niiden kantaaottava viesti j\u00e4\u00e4 lukematta. V\u00e4lill\u00e4 my\u00f6s netiss\u00e4 n\u00e4kee hyvin koristeellisia tai r\u00e4v\u00e4kki\u00e4 fontteja, joiden lukeminen on yksinkertaisesti vaikeaa. Kyseess\u00e4 voi olla my\u00f6s liian ohut fontti, joka ei erotu taustasta. Panosta siis aina tekstien luettavuuteen valitsemalla selke\u00e4 fontti.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

3.3 Liian pieni fontti (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Pienen kirjasinkoon k\u00e4ytt\u00e4minen tekee tekstist\u00e4 vaikeasti luettavan, etenkin mobiililaitteilla. Pieni\u00e4 fonttikokoja n\u00e4kee etenkin yhteydenottokaavakkeiden pieniss\u00e4 pr\u00e4nteiss\u00e4.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

3.4 Liian pieni kontrasti (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Mit\u00e4s veikkaat? Pieni kontrasti tekstin ja taustan v\u00e4lill\u00e4 heikent\u00e4\u00e4 luettavuutta. T\u00e4llaisia tilanteita n\u00e4kee, kun nettisivulla k\u00e4ytet\u00e4\u00e4n vahvaa taustav\u00e4ri\u00e4. Toinen yleinen tilanne syntyy, kun k\u00e4ytet\u00e4\u00e4n taustakuvaa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

3.5 Kaikki on keskitetty (H3)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Tekstin voi tasata jompaan kumpaan laitaan tai keskitt\u00e4\u00e4. Joillakin sivuilla kaikki tekstit on keskitetty. Pienet tekstit voi keskitt\u00e4\u00e4, mutta pitk\u00e4n keskitetyn tekstin lukeminen on haastavaa. Keskit\u00e4 siis harkitusti.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Fontit verkkosivuilla (h1) 1. Typografian perusteita (h2) Typografia on t\u00e4rke\u00e4 osa verkkosivujen suunnittelua, sill\u00e4 se vaikuttaa merkitt\u00e4v\u00e4sti ulkoasuun ja k\u00e4ytett\u00e4vyyteen. Huolellisesti suunniteltu ja harkittu verkkosivujen typografia parantaa luettavuutta ja saavutettavuutta. Kuitenkin, koska k\u00e4ytett\u00e4viss\u00e4 on lukuisia fontteja, sen oikean valitseminen verkkosivustollesi voi olla haastavaa. T\u00e4ss\u00e4 tekstiss\u00e4 k\u00e4yd\u00e4\u00e4n l\u00e4pi vinkkej\u00e4 ja parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4 fonttien valintaan. Fontti-termi\u00e4 k\u00e4ytet\u00e4\u00e4n […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-100","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":25,"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/pages\/100\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/vetecher.jamiserveri.fi\/index.php\/wp-json\/wp\/v2\/media?parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}