Kodulehe tüpograafia: kuidas valida fondid, mis müüvad
Tahad teada, kuidas sinu enda leht seisab?
Küsi tasuta audititTüpograafia mõjutab loetavust, brändi tajumist ja konversiooni. Praktiline juhend fontide valikuks ja paaritamiseks.
Autor: Meiko Neuman
Asutaja ja veebistrateeg, Kodulehe Haldus
Tüpograafia tähtsus
MIT uuring näitab, et hea tüpograafia tõstab lugemiskiirust 35% ja meeldejäämist 22%. Halb tüpograafia on suurim põhjus, miks külastajad lehe sulgevad.
Põhireeglid
1. Maksimum 2 fonti - **Heading font** (pealkirjad) – distinktiivne, isikupärane - **Body font** (sisu) – loetav, neutraalne
2. Loetavuse miinimum - Body: 16px+ (mobiilis 17px+) - Line-height: 1.5–1.7 - Max paragraph width: 65–75 tähemärki - Kontrast: WCAG AA (4.5:1)
3. Hierarhia ```text H1 – 48-72px (üks lehe kohta) H2 – 32-48px H3 – 24-32px Body – 16-18px Small – 14px ```
Fontide tüübid
Sans-serif (kõige populaarsem veebis) - **Inter** – kaasaegne, neutraalne - **Plus Jakarta Sans** – sõbralik, kaasaegne ([kasutame ise](/)) - **DM Sans** – mineraalne, geomeetriline - **Manrope** – isikupärane
Serif (klassikaline, autoriteetne) - **Playfair Display** – luksuslik - **Lora** – tasakaalukas - **Merriweather** – loetav blogis
Display (eriline kasutus) - **Space Grotesk** – tehnikaline - **Caveat** – käsikirja-stiilne
Monospace (kood) - **JetBrains Mono** - **Fira Code**
Tasuta vs premium
Google Fonts (tasuta) [Google Fonts](https://fonts.google.com/) – 1500+ fonti, GDPR vastavus läbi [Bunny Fonts](https://fonts.bunny.net/).
Premium - [Adobe Fonts](https://fonts.adobe.com/) – Creative Cloud kasutajatele - [Fontshare](https://www.fontshare.com/) – tasuta premium fontide kollektsioon - [Pangram Pangram Foundry](https://pangrampangram.com/)
Fontide paaritamine
Reegel: kontrast. Kombineeri: - Serif heading + Sans body - Geometric sans + Humanist sans - Display heading + Neutral sans body
Klassikalised paarid: - Playfair Display + Source Sans Pro - Space Grotesk + DM Sans - Merriweather + Open Sans
Tööriist: Fontjoy – AI fontide paaritaja.
Sooritus
Iga font on HTTP päring. Optimeerimine: - Lae ainult kasutatavad weights (400, 700 piisab tavaliselt) - WOFF2 formaat - font-display: swap - Self-host'i kriitilised fondid
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Eesti keele eripära
Tähed õ, ä, ö, ü, š, ž peavad olema toetatud. Kontrolli: - Glüfid olemas? (mitte fallback) - Õige kerning? - Ladina laiend (Latin Extended)
Tüpograafia kontrollnimekiri
- Maksimum 2 fonti
- Body 16px+ desktop, 17px+ mobile
- Line-height 1.5+
- Kontrast WCAG AA
- Eesti tähed toetatud
- Fontide laadimine optimeeritud
- H1 üks per leht
- Hierarhia visuaalne ja semantic
Disainitrendid 2026
Vaata ka veebi disaini trendid 2026.
Kokkuvõte
Hea tüpograafia on nähtamatu – külastaja loeb voolavalt ja ei märka fonti üldse. Halb tüpograafia on esimene asi, mida märgatakse. Pakume kodulehe disaini koos professionaalse tüpograafia süsteemiga – küsi pakkumist.
Allikad
Vajad abi oma kodulehega?
Meie meeskond hooldab, optimeerib ja kaitseb sinu kodulehte. Hinna lepime kokku mahu järgi.
Küsi pakkumistArtikli autor
Meiko Neuman — Asutaja ja veebistrateeg, Kodulehe Haldus. Meiko juhib Kodulehehalduse tiimi ja on üle kümne aasta aidanud Eesti ettevõtetel kodulehti hallata, optimeerida ja müügitulemusi parandada. Kirjutab kodulehe haldusest, SEO-st, AEO/GEO-st ja veebi ärilisest poolest.