Kirjatüüp kodulehel ehk kuidas valida font, mis loeb hästi

Kirjatüüp on see, millega su koduleht räägib. Külastaja ei pruugi märgata, mis fondiga tekst on kirjutatud, aga ta märkab kohe, kui lugemine väsitab, kui tekst on telefonis liiga väike või kui leht vilgub laadimise ajal. Hea kirjatüüp ei paista silma. Halb kirjatüüp ajab külastaja lehelt minema enne, kui ta pakkumiseni jõuab.

Selles juhendis on lahti kirjutatud, mis on kirjatüüp ja font, kuidas valida kodulehele loetav kirjatüüp ning mida kontrollida suuruse, kontrasti, eesti tähtede ja laadimiskiiruse juures.

Mis on kirjatüüp ja mis on font

Kirjatüüp on ühtse joonisega tähtede, numbrite ja märkide perekond. Helvetica, Georgia ja Roboto on kirjatüübid. Font on selle perekonna üks konkreetne lõige, näiteks Georgia paks kaldkiri, või arvutis see fail, mis kirjatüüpi ekraanil kuvab.

Igapäevases kõnes kasutatakse sõnu „kirjatüüp“ ja „font“ sageli sünonüümidena ning kodulehe tellimisel ei ole see viga. Vahe muutub oluliseks alles siis, kui räägitakse litsentsidest ja failidest: litsents antakse tavaliselt kirjatüübi kaupa, aga lehele laetakse fondifailid ükshaaval.

• Kirjatüüp on kujundus, näiteks Inter.
• Lõige on kujunduse üks variant, näiteks Inter Medium või Inter Bold Italic.
• Fondifail on fail, mille brauser või arvuti laeb, näiteks inter-medium.woff2.
• Muutuvfont (variable font) on üks fail, milles on terve paksuste vahemik korraga.

Kirjatüüpide põhirühmad

Kodulehe jaoks piisab nelja rühma tundmisest. Igal rühmal on oma iseloom ja oma koht.

Ekraanil loetakse seriifita kirja kehatekstina kõige sagedamini, sest see püsib selge ka väiksel ekraanil. Seriifkiri ei ole ekraanil keelatud. Hästi joonistatud seriifkiri on artiklis sama loetav, kui suurus ja reavahe on paigas.

Kuidas valida kodulehele kirjatüüp

Kirjatüübi valik ei ole maitseasi. See on otsus, mis mõjutab lugemist, brändi äratuntavust ja lehe kiirust korraga. Käi need sammud läbi enne, kui fondi kujundusse lukustad.

1. Alusta brändist. Kui ettevõttel on brändiraamat, on kirjatüübid seal juba kirjas. Kui ei ole, otsusta kõigepealt, kas ilme peab olema range, soe, julge või klassikaline. Kuidas brändi alused paika panna, on kirjas artiklis brändi loomine.
2. Vali kehateksti kirjatüüp loetavuse järgi. Otsi selgelt eristuvaid tähti: suur I, väike l ja number 1 ei tohi sulada üheks. Sama kehtib O ja 0 kohta.
3. Vali pealkirjadele kas sama kirjatüüp teise lõikega või üks kontrastne paariline. Kaks sarnast, aga mitte päris ühesugust seriifita kirja näevad välja nagu viga.
4. Proovi eesti tähtedega. Kirjuta testlause, kus on õ, ä, ö, ü, š ja ž, ning vaata, kas kõik märgid tulevad samast fondist.
5. Kontrolli litsentsi. Arvutisse ostetud fondi litsents ei luba alati sama fondi veebis kasutada. Veebikasutuseks on vaja veebilitsentsi.
6. Kontrolli lõigete arvu. Tavaliselt piisab tavalisest, paksust ja kaldkirjast. Iga lõige on lehele lisafail.

Suurus, reavahe ja rea pikkus

Enamik loetavusprobleeme ei tule kirjatüübist, vaid sellest, kuidas seda kasutatakse. Samad reeglid kehtivad igale kirjatüübile.

• Kehateksti suurus vähemalt 16 pikslit. Pikkade artiklite puhul on mugavam 17 kuni 18 pikslit.
• Reavahe umbes 1,4 kuni 1,6 korda fondi suurusest. Liiga tihe rida väsitab, liiga hõre lõhub lõigu.
• Rea pikkus 45 kuni 75 tähemärki. Laial ekraanil üle kogu lehe jooksev tekst on raske lugeda, sest silm kaotab järgmise rea alguse.
• Pealkirjade astmestik peab olema selge. H2 peab eristuma kehatekstist ja H3 omakorda H2-st, muidu ei saa lugeja lehte silmadega läbi vaadata.
• Lõigud olgu lühikesed. Telefonis muutub viie reaga lõik kümne reaga plokiks.

Need on lähtepunktid, mitte seadus. Mõni kirjatüüp on oma olemuselt suurem või väiksem, seega vaata tulemust alati päris telefonis, mitte ainult disainiprogrammis.

Kontrast ja ligipääsetavus

Hall tekst heledal taustal näeb kujundusfailis elegantne välja, aga ereda päikese käes telefonis ei ole seda võimalik lugeda. Rahvusvaheline ligipääsetavuse juhis WCAG seab tavalise teksti ja tausta kontrastiks vähemalt 4,5:1 ning suure teksti puhul vähemalt 3:1.

• Kontrolli iga teksti ja tausta paari kontrastikontrolliga, näiteks brauseri arendajatööriistades.
• Ära kirjuta pikka teksti pildi peale. Kui taust muutub, muutub ka loetavus.
• Väldi õhukesi lõikeid kehatekstis. Väga peenike joon kaob väikesel ekraanil ära.
• Ära kasuta pikas tekstis ainult suurtähti. Suurtähtedega kiri sobib lühikesele pealkirjale või nupule, lõigus aeglustab see lugemist.

Kontrast ja loetavus kuuluvad ka iga kodulehe ülevaatuse juurde. Kuidas kogu lehte ise kontrollida, on kirjas artiklis kodulehe audit.

Kuidas font mõjutab kodulehe kiirust

Iga veebifont on fail, mille brauser peab enne teksti kuvamist alla laadima. Kui fonte on palju või need on rasked, jääb lehe põhisisu kauemaks ootama ja Google’i kiirusmõõdikud lähevad halvemaks. Leht võib ka laadimise ajal hüpata, kui varufont vahetub lõpliku vastu ja tekst võtab teise laiuse.

Kiire lehe jaoks kehtivad lihtsad reeglid.

• Kasuta WOFF2-vormingut. See on veebifontide kõige kompaktsem vorming ja kõik tänapäevased brauserid toetavad seda.
• Lae ainult vajalikud lõiked. Neli kuni viis faili on sageli juba palju. Muutuvfont võib asendada mitu eraldi lõiget ühe failiga.
• Lae ainult vajalik märgistik. Eesti keele jaoks on vaja ladina ja laiendatud ladina märgistikku, sest š ja ž kuuluvad laiendatud osasse. Kirillitsat ega kreeka tähti ei ole vaja laadida, kui lehel neid keeli ei ole.
• Määra font-display swap. Siis näitab brauser teksti kohe varufondiga ja vahetab selle välja, kui õige font on kohal. Tekst ei ole vahepeal nähtamatu.
• Hoia fondid oma serveris. Kui font tuleb kolmanda osapoole serverist, saadab külastaja brauser sinna oma IP-aadressi. Saksamaal leidis Müncheni kohus 2022. aastal, et Google Fontsi teenuse kasutamine otse Google’i serverist ilma külastaja nõusolekuta rikkus isikuandmete kaitse reegleid. Oma serverisse laetud font ei jaga andmeid ja laeb sageli ka kiiremini.

Kui lehe kiirus on juba probleem, on fondid üks esimesi kohti, mida vaadata, sest nende korrastamine ei muuda lehe välimust.

Arvuti kirjatüübid ja veebifondid

Arvutis on alati olemas hulk süsteemifonte, näiteks Arial, Georgia, Verdana ja Times New Roman. Need on kasutaja seadmes juba olemas ja neid ei pea alla laadima. Sellepärast on need kõige kiiremad, aga ka kõige vähem eristuvad.

Veebifont laetakse koos lehega ja see näeb igas seadmes ühesugune välja. Enamik ettevõtteid valib kompromissi: brändi kirjatüüp veebifondina pealkirjadele ja kehatekstile ning süsteemifont varufondiks, mis kuvatakse seniks, kuni veebifont laeb.

Kui paned kujunduses paika varufondi, vali see sarnase laiuse ja kõrgusega. Siis ei hüppa tekst fondivahetuse hetkel.

Levinud vead kirjatüüpidega

• Liiga palju kirjatüüpe. Kolm või neli eri kirjatüüpi ühel lehel teevad kujunduse juhuslikuks.
• Dekoratiivne kiri kehatekstis. Mis pealkirjas on iseloomukas, on lõigus väsitav.
• Liiga väike tekst telefonis. Kui külastaja peab teksti lugemiseks suurendama, lahkub ta sageli enne.
• Puuduvad eesti tähed. Kui š või ž tuleb teisest fondist, paistab see sõnas kohe silma.
• Litsentsita font. Arvutist leitud fondi kasutamine veebis ilma veebilitsentsita võib tuua nõude fondi omanikult.
• Kirjatüüp valitakse ühe lehe järgi. Font peab töötama ka menüüs, nupus, tabelis, hinnakirjas ja vormis, mitte ainult avalehe suures pealkirjas.

Kirjatüüp on osa brändist

Kirjatüübid kirjutatakse brändiraamatusse samamoodi nagu värvikoodid: kirjatüübi nimi, kasutatavad lõiked, suurused pealkirjadele ja kehatekstile ning litsentsi tingimused. Siis teeb ka uus disainer, trükikoda või agentuur materjali ühtemoodi. Mida brändiraamat veel sisaldama peab, on kirjas artiklis brändiraamat ja CVI.

Kui kodulehte alles ehitatakse, pane kirjatüübid paika enne kujundust, mitte selle lõpus. Kirjatüüp mõjutab paigutust, nuppude suurust ja isegi seda, kui palju teksti ühele reale mahub. Rohkem kasutajakogemuse ja liidese kujunduse kohta leiad lehelt UX ja UI disain.

Korduma kippuvad küsimused

Mis on kirjatüüp

Kirjatüüp on ühtse joonisega tähtede, numbrite ja märkide perekond, näiteks Helvetica või Georgia. Font on selle perekonna üks konkreetne lõige, näiteks Georgia paks kaldkiri, või arvutis see fail, mis kirjatüüpi kuvab.

Mis vahe on kirjatüübil ja fondil

Kirjatüüp on kujundus, font on selle kujunduse konkreetne lõige või fail. Igapäevases kõnes kasutatakse sõnu sageli sünonüümidena ja kodulehe tellimisel on see enamasti probleemita.

Mitu kirjatüüpi kodulehel kasutada

Enamasti piisab ühest või kahest kirjatüübist: üks pealkirjadele ja teine kehatekstile või üks kirjatüüp mitme lõikega. Iga lisakirjatüüp teeb lehe rahutumaks ja lisab laaditavaid faile.

Milline fondi suurus sobib kodulehe kehatekstile

Kehateksti hea alguspunkt on 16 pikslit, pikemate artiklite puhul 17 kuni 18 pikslit. Reavahe võiks olla umbes 1,5 korda fondi suurusest ja rea pikkus 45 kuni 75 tähemärki.

Kas font mõjutab kodulehe kiirust

Jah. Iga fondifail on eraldi laaditav fail ja iga lisalõige lisab kaalu. Kasuta WOFF2-vormingut, lae ainult vajalikud lõiked ja märgistikud ning määra font-display swap, et tekst oleks kohe loetav.

Kas eesti täpitähed on igas fondis olemas

Ei ole. Õ, ä, ö ja ü on enamikus fontides olemas, aga š ja ž kuuluvad laiendatud ladina märgistikku, mis võib veebifondist puudu olla. Proovi fonti enne valimist lausega, kus on kõik eesti tähed.

Kokkuvõte

Kodulehe kirjatüüp peab tegema kolme asja: olema loetav igas seadmes, sobima brändiga ja laadima kiiresti. Vali üks või kaks kirjatüüpi, hoia kehatekst vähemalt 16 piksli suurune, kontrolli kontrasti ja eesti tähti ning lae ainult need fondifailid, mida leht päriselt kasutab. Kui need neli asja on paigas, kannab kirjatüüp teksti ja lugeja ei pea sellele mõtlema.