Kā izvēlēties fontus savai mājaslapai
Tipogrāfija var nešķist aizraujošākā mājaslapas veidošanas daļa. Iesācējus bieži vairāk saista krāsas, attēli un izkārtojums. Taču ir vērts atcerēties:
Tipogrāfija ietekmē gandrīz visu mājaslapu, jo lielākā daļa tās satura ir teksts.
Virsraksti, apraksti, pogas, izvēlnes un produktu informācija ir atkarīga no tā, cik ērti tekstu var izlasīt un cik labi tas iekļaujas kopējā dizainā.
Mozello pieredze rāda, ka pārdomāta tipogrāfija ir viens no ātrākajiem veidiem, kā piešķirt mājaslapai profesionālāku izskatu. Pat ja tavs uzņēmums ir neliels vai mājaslapu veido pirmo reizi, pareizi izvēlēti fonti var palīdzēt visam zīmolam izskatīties uzticamākam un pārdomātākam.
Labā ziņa ir tāda, ka tipogrāfijai nav jābūt sarežģītai. Nav vajadzīgas dizaina vai tehniskas zināšanas. Pietiek ar praktisku izpratni par to:
- kā izvēlēties piemērotus fontus
- kā tos savstarpēji saskaņot
- kā formatēt tekstu
- no kādām kļūdām izvairīties
- kā visā mājaslapā saglabāt vienotu stilu un labu lasāmību
Šajā rakstā soli pa solim apgūsi svarīgāko, izmantojot vienkāršus noteikumus un praktiskus piemērus.
Kāpēc tipogrāfija ir svarīga
Fonti nav tikai dekoratīvs elements. Tie ietekmē:
- cik viegli tekstu var izlasīt
- mājaslapas noskaņu un emocionālo toni
- tava zīmola personību
- apmeklētāju uzticību
- cik ātri apmeklētāji var pārskatīt saturu
- vai apmeklētāji mājaslapā paliks vai to pametīs
Tipogrāfija ir būtiska lietotāja pieredzes (UX) daļa. Ja teksts ir grūti lasāms vai izskatās nepārdomāts, apmeklētāji ātri zaudē uzticību, pat ja paši nevar precīzi izskaidrot, kāpēc. Savukārt tīra un konsekventa tipogrāfija padara mājaslapu vieglāk uztveramu un rada uzticamāku iespaidu.
Laba tipogrāfija ir gandrīz nemanāma.
Apmeklētāji tai nepievērš uzmanību. Viņi vienkārši var ērti lasīt un uztvert saturu.
Slikta tipogrāfija ir uzreiz pamanāma.
Tā rada neapmierinātību, apjukumu un nogurumu.
Trīs galvenie fontu veidi un to radītais iespaids
Izprotot galvenos fontu veidus, piemērotāko izvēlēties ir daudz vieglāk. Lielāko daļu fontu var iedalīt trīs plašās grupās:
1. Bezserifa fonti (sans-serif)
Bezserifa fontiem burtu galos nav nelielu dekoratīvu līniju jeb serifu.
Piemēri:
- Arial
- Helvetica
- Lato
- Montserrat
- Open Sans
- Poppins
Šie fonti parasti izskatās:
- mūsdienīgi
- tīri
- draudzīgi
- vienkārši
Bezserifa fontus parasti ir ļoti viegli lasīt ekrānā. Tie ir īpaši piemēroti:
- pamattekstam
- pogām
- navigācijai
- mūsdienīgiem zīmoliem
- tehnoloģiju uzņēmumiem
- mazo uzņēmumu mājaslapām
Ja mājaslapu veido pirmo reizi, bezserifa fonts gandrīz vienmēr ir droša izvēle.
2. Serifa fonti (serif)
Serifa fontiem burtu galos ir nelielas dekoratīvas līnijas jeb serifi.
Piemēri:
- Lora
- Playfair Display
- Merriweather
- Georgia
Šie fonti parasti izskatās:
- tradicionāli
- eleganti
- izsmalcināti
- klasiski
- akadēmiski
Serifa fonti ir īpaši piemēroti:
- virsrakstiem
- luksusa zīmoliem
- redakcionāla stila mājaslapām
- advokātu birojiem
- kāzu nozares uzņēmumiem
- žurnāliem un blogiem
Ekrānā serifa fonti visdrošāk darbojas virsrakstos. Dažus ekrānam pielāgotus serifa fontus var izmantot arī pamattekstam, ja teksta izmērs un atstarpes nodrošina ērtu lasīšanu.
3. Dekoratīvie jeb displeja fonti
Dekoratīvie fonti ir mākslinieciskāki un izteikti stilizēti.
Piemēri:
- kaligrāfiski fonti
- rokraksta fonti
- trekni retro stila burtveidoli
- neparasti vai tematiski fonti
Izmanto tos ļoti taupīgi:
- logotipos
- nelielos akcentos
- īpašu pasākumu reklāmkarogos
Nekad neizmanto dekoratīvos fontus pamattekstam vai garām rindkopām.
Kā izvēlēties savam uzņēmumam piemērotu fontu
Fontus nevajadzētu izvēlēties tikai tāpēc, ka tie "izskatās skaisti". Tiem jāatbilst tava zīmola personībai.
Pajautā sev, kāds ir tavs zīmols:
- formāls vai nepiespiests
- mūsdienīgs vai klasisks
- draudzīgs vai nopietns
- minimālistisks vai izteiksmīgs
Piemēri:
- Maizes ceptuve: maigi serifa fonta virsraksti kopā ar bezserifa pamattekstu rada siltu un aicinošu iespaidu.
- Tehnoloģiju jaunuzņēmums: trekni bezserifa virsraksti un tīrs bezserifa pamatteksts rada mūsdienīgu un pārliecinošu iespaidu.
- Luksusa rotaslietu zīmols: eleganti serifa fonta virsraksti un smalks bezserifa pamatteksts rada izsmalcinātu un ekskluzīvu iespaidu.
- Fitnesa studija: izteiksmīgi bezserifa virsraksti un tīrs bezserifa pamatteksts rada enerģisku un pārliecinošu iespaidu.
Fonts ir daļa no tava zīmola balss. Tam jāatbilst vēstījumam, ko vēlies nodot ar savu mājaslapu.
Kāpēc nevajadzētu izmantot pārāk daudz fontu
Viena no biežākajām iesācēju kļūdām ir pārāk daudzu fontu izmantošana vienā mājaslapā. Tas rada vizuālu haosu un var likt dizainam izskatīties nepārdomātam un neprofesionālam.
Ievēro vienkāršu noteikumu:
Vienā mājaslapā izmanto ne vairāk kā vienu vai divus fontus.
Vienkārša un droša kombinācija:
- viens fonts virsrakstiem
- viens fonts pamattekstam
Ar to pilnībā pietiek. Šāda pieeja palīdz uzturēt dizainu vienotu un padara tekstu ērtāk lasāmu.
Fontu saskaņošana: kā veiksmīgi apvienot divus fontus
Ja izvēlies divus fontus, tiem savstarpēji jāpapildinās, nevis jāsacenšas par uzmanību.
Tālāk ir vienkāršākās un drošākās kombinācijas iesācējiem.
1. Serifa fonts virsrakstiem + bezserifa fonts pamattekstam
Šī ir viena no klasiskākajām un profesionālākajām fontu kombinācijām.
Piemēri:
- Playfair Display + Montserrat
- Merriweather + Open Sans
Šī kombinācija ir piemērota:
- koučiem
- blogeriem
- butikiem
- fotogrāfiem
- konsultantiem
- labsajūtas zīmoliem
2. Bezserifa fonts virsrakstiem + bezserifa fonts pamattekstam
Šī kombinācija izskatās tīra un mūsdienīga, turklāt tekstu ir ļoti viegli lasīt.
Piemēri:
- Raleway
- Poppins
- Lato
- Montserrat
Šī kombinācija ir piemērota:
- tehnoloģiju uzņēmumiem
- maziem uzņēmumiem
- restorāniem
- e-veikaliem
- portfolio mājaslapām
3. Serifa fonts virsrakstiem + serifa fonts pamattekstam
Šī kombinācija var izdoties, ja abi fonti ir īpaši veidoti savstarpējai saskaņošanai. Taču bez pieredzes ir viegli kļūdīties.
Tā ir piemērotāka:
- redakcionāla stila mājaslapām
- žurnāliem
- blogiem ar gariem rakstiem
Ja mājaslapu veido pirmo reizi, drošāk izvēlēties vienu serifa fontu un vienu bezserifa fontu.
4. Dekoratīvs fonts virsrakstiem + bezserifa fonts pamattekstam
Dekoratīvo fontu izmanto tikai:
- lieliem un īsiem virsrakstiem
- vienam vārdam virsrakstā
- logotipam
- nelielam izcēlumam
Nekad neizmanto dekoratīvos fontus gariem teikumiem. Tie ir pārāk vizuāli piesātināti un grūti lasāmi.
Teksta izmērs un atstarpes: kā uzlabot lasāmību
Tipogrāfija nav tikai fonta izvēle. Tikpat svarīgi ir tas, kā teksts izkārtots lapā. Pat piemērots fonts kļūst grūti lasāms, ja teksta izmērs un atstarpes izvēlētas neveiksmīgi.
Galvenie noteikumi
- Izmanto lielus un skaidrus virsrakstus. Virsrakstiem jāizceļas, jāvada apmeklētāju uzmanība un jāpalīdz ātri pārskatīt saturu.
- Izvēlies ērtu pamatteksta izmēru. Pārāk mazs teksts apgrūtina lasīšanu un var mudināt apmeklētājus pamest mājaslapu.
- Atstāj pietiekamas rindstarpas. Pārāk blīvs teksts izskatās smagnējs un nogurdina. Pietiekamas rindstarpas padara tekstu gaisīgāku un vieglāk uztveramu.
- Veido īsas rindkopas. Lieli teksta bloki ir nogurdinoši. Ja vēlies, lai apmeklētāji ātri saprastu tavu vēstījumu, īsākas rindkopas būs daudz efektīvākas.
Labs piemērs: rindkopa ar diviem līdz četriem teikumiem.
Slikts piemērs: liels teksta bloks ar astoņiem līdz desmit teikumiem.
Biežākās tipogrāfijas kļūdas un kā no tām izvairīties
1. kļūda: pārāk daudz fontu
Šī ir viena no biežākajām tipogrāfijas kļūdām. Pārāk daudzi fonti padara mājaslapu nekārtīgu un vizuāli nevienotu.
Izmanto ne vairāk kā vienu vai divus fontus.
2. kļūda: zīmolam neatbilstoši fonti
Neveiksmīgi piemēri:
- advokātu birojs, kas izmanto komiksu stila fontu;
- luksusa zīmols, kas izmanto rotaļīgu rokraksta fontu;
- tehnoloģiju uzņēmums, kas izmanto retro vesterna stila fontu.
Izvēlētajiem fontiem jāatbilst tava zīmola identitātei un vēstījumam.
3. kļūda: dekoratīvu fontu izmantošana rindkopām
Dekoratīvos fontus parasti ir grūti lasīt. Neizmanto tos pamattekstam, rindkopām vai citam garākam saturam.
4. kļūda: nepietiekamas atstarpes
Teksts izskatās saspiests un ir grūtāk lasāms, ja:
- rindstarpas ir pārāk mazas
- rindkopas ir pārāk garas
- virsraksti pietiekami neizceļas
Pārdomātas atstarpes ir viens no vienkāršākajiem veidiem, kā uzreiz uzlabot mājaslapas izskatu un lasāmību.
5. kļūda: nekonsekventa fontu izmantošana dažādās lapās
Ja sākumlapā izmanto vienu fontu, bet sadaļā "Par mums" pavisam citu, apmeklētāji to pamanīs, pat ja nespēs precīzi pateikt, kāpēc dizains šķiet nesaskaņots.
Konsekvence palīdz veidot uzticību.
Rīki, kas palīdz izvēlēties un saskaņot fontus
Šie vienkāršie rīki palīdzēs atrast piemērotus fontus, pārbaudīt to kombinācijas un izvēlēties teksta izmērus:
- Google Fonts: plaša tīmeklim piemērotu fontu bibliotēka
- FontPair.co: iesaka savstarpēji saderīgas fontu kombinācijas
- Canva Font Combinations: piedāvā iesācējiem piemērotas fontu saskaņošanas idejas
- TypeScale.com: ļauj priekšskatīt fontu izmērus un atstarpes
Ar šiem rīkiem fontu izvēle kļūst vienkāršāka un pārskatāmāka.
Kā Mozello atvieglo darbu ar fontiem
Mēs zinām, ka lielākā daļa mazo uzņēmumu īpašnieku nevēlas pavadīt stundas, mēģinot saskaņot fontus. Tu vēlies ātri izveidot mājaslapu, kas jau no sākuma izskatās labi.
Tāpēc Mozello piedāvā vienkāršāku risinājumu.
Plaša profesionāli saskaņotu fontu kombināciju izvēle
Tā vietā, lai manuāli kombinētu fontus, vari ar vienu klikšķi visai mājaslapai piemērot tīru, līdzsvarotu un profesionāli izveidotu fontu komplektu.
Mozello fontu komplekti ir:
- viegli lasāmi;
- mūsdienīgi;
- vizuāli vienoti;
- pielāgoti mobilajām ierīcēm;
- pārbaudīti, lai nodrošinātu vizuālu harmoniju.
Tādējādi vari iegūt profesionālu tipogrāfiju arī bez dizaina zināšanām.
Ja uzņēmumam jau ir zīmola fonts, vari to pievienot
Dažiem uzņēmumiem dizainers jau ir izveidojis vai izvēlējies īpašu zīmola fontu. Arī to vari izmantot Mozello mājaslapā.
Vari:
- augšupielādēt vai piesaistīt savu fontu, izmantojot sadaļu "Pielāgotais kods";
- izmantot to visā mājaslapā;
- saglabāt vienotu zīmola vizuālo identitāti.
Tas ir īpaši noderīgi jau nostiprinātiem zīmoliem un uzņēmumiem, kuru logotips vai vizuālā identitāte veidota, izmantojot konkrētu fontu.
Tipogrāfijas kontrolsaraksts pirms mājaslapas publicēšanas
Pirms mājaslapas publicēšanas pajautā sev:
- Vai tekstu ir viegli izlasīt gan datorā, gan mobilajā ierīcē?
- Vai visā mājaslapā izmantots tikai viens vai divi fonti?
- Vai virsraksti ir pamanāmi lielāki par pamattekstu?
- Vai starp rindām un rindkopām ir pietiekamas atstarpes?
- Vai izvēlētie fonti atbilst uzņēmuma un zīmola personībai?
- Vai visās mājaslapas sadaļās konsekventi izmantoti vieni un tie paši fonti?
- Vai pamattekstā nav izmantoti pārmērīgi dekoratīvi fonti?
Ja uz visiem vai gandrīz visiem jautājumiem vari atbildēt ar "jā", tava tipogrāfija ir pārdomāta un gatava publicēšanai.
Secinājums: laba tipogrāfija ir vienkāršs veids, kā uzlabot mājaslapu
Laba tipogrāfija nenozīmē izvēlēties visizsmalcinātāko fontu. Tās uzdevums ir palīdzēt skaidri nodot vēstījumu. Veidojot mājaslapu ar tādu rīku kā Mozello, svarīgi ir virzīt apmeklētāju uzmanību, saglabāt tekstu viegli lasāmu un radīt uzticamu zīmola iespaidu.
Ievērojot šajā rakstā aprakstītos vienkāršos principus, vari izvairīties no biežākajām iesācēju kļūdām un izveidot tipogrāfiju, kas papildina dizainu un palīdz skaidri nodot tavu vēstījumu.
Vairāk rakstu šajā sērijā
- Kas ir labs dizains un kāpēc tas ir svarīgi
- Kā izveidot efektīvu krāsu paleti savai mājaslapai
- Kā izvēlēties fontus savai mājaslapai
- Kas ir brīvā vieta un kā to izmantot mājaslapas dizainā
- Kā formatēt tekstu savā mājaslapā
- Kā izveidot vizuālo identitāti savai mājaslapai
- Kā izveidot efektīvas aicinājuma uz rīcību (CTA) pogas
- Kā izveidot pārdomātu mājaslapas izkārtojumu
- Kā izveidot skaidru un ērtu mājaslapas izvēlni
Lejupielādē mūsu bezmaksas Efektīva mājaslapas dizaina kontrolsarakstu (PDF), kas palīdzēs tev soli pa solim izvērtēt savu mājaslapu.