Kā izvēlēties fontus savai mājaslapai
Tipogrāfija varētu nešķist aizraujošākā mājaslapas veidošanas daļa. Lielāko daļu iesācēju daudz vairāk interesē krāsas, attēli vai izkārtojumi. Bet patiesība ir šāda:
Tipogrāfija ietekmē katru Tavas mājaslapas daļu, jo gandrīz viss Tavā lapā ir teksts.
Tavi virsraksti, Tavi apraksti, Tavas pogas, Tavas izvēlnes, Tava produktu informācija — tas viss ir atkarīgs no tā, cik viegli to izlasīt un cik labi tas izskatās.
Mozello mēs esam redzējuši, ka tipogrāfija ir viens no ātrākajiem veidiem, kā panākt, lai Tava lapa uzreiz izskatītos profesionālāka. Pat ja Tavs bizness ir mazs vai Tu tikai sāc veidot mājaslapu, pareizā fontu izvēle var panākt, ka viss Tavs zīmols šķiet uzticamāks un noslīpētāks.
Labākais? Tipogrāfijai nav jābūt sarežģītai. Tev nav vajadzīgas dizaina zināšanas, un Tev nav jāzina nekas tehnisks. Tev ir vajadzīga pamata, praktiska izpratne par:
- kā izvēlēties fontus
- kā tos saskaņot
- kā formatēt tekstu
- no kā izvairīties
- kā saglabāt savu mājaslapu konsekventu un viegli lasāmu
Šis raksts izvedīs Tevi cauri visam soli pa solim, ar vienkāršiem noteikumiem un reāliem piemēriem.
Kāpēc tipogrāfija ir svarīga
Fonti nav tikai dekorācija. Tie ietekmē:
- lasāmību
- noskaņu un emocionālo toni
- Tava zīmola personību
- uzticību
- cik ātri cilvēki var pārskatīt Tavu lapu
- vai apmeklētāji paliek vai aiziet
Tipogrāfija ir būtiska UX (lietotāja pieredzes) daļa. Ja Tavu tekstu ir grūti izlasīt vai tas izskatās neprofesionāli, apmeklētāji ātri zaudē pārliecību — pat ja viņi nevar paskaidrot, kāpēc. No otras puses, kad Tava lapa izmanto tīru, konsekventu tipogrāfiju, viss šķiet vieglāk un uzticamāk.
Laba tipogrāfija ir neredzama.
Apmeklētāji to nepamana — viņi vienkārši bauda lasīšanu.
Slikta tipogrāfija vienmēr ir pamanāma.
Apmeklētāji jūtas neapmierināti, apjukuši vai noguruši.
Trīs galvenie tīmekļa fontu veidi (un ko tie pauž)
Pamata fontu klasifikācijas izpratne atvieglo izvēli. Lielākā daļa fontu iekļaujas trīs plašās saimēs:
1. Sans-serif fonti
Sans-serif fonti ir fonti bez mazajiem dekoratīvajiem galiem (serifiem) uz burtiem.
Piemēri:
- Arial
- Helvetica
- Lato
- Montserrat
- Open Sans
- Poppins
Šie fonti šķiet:
- moderni
- tīri
- draudzīgi
- vienkārši
Tie ir ārkārtīgi viegli lasāmi ekrānos un ir ideāli piemēroti:
- pamattekstam
- pogām
- navigācijai
- moderniem zīmoliem
- tehnoloģiju uzņēmumiem
- mazo uzņēmumu mājaslapām
Ja Tu esi iesācējs, sans-serif fonts gandrīz vienmēr ir droša izvēle.
2. Serif fonti
Serif fontiem ir mazas līnijas vai vilcieni burtu galos.
Piemēri:
- Lora
- Playfair Display
- Merriweather
- Georgia
Šie fonti šķiet:
- tradicionāli
- eleganti
- augstas klases
- klasiski
- akadēmiski
Serif fonti ir lieliski:
- virsrakstiem
- luksusa zīmoliem
- redakcionāla stila lapām
- advokātu birojiem
- kāzu biznesiem
- žurnāliem un blogiem
Ekrānos serif fontus bieži ir visvieglāk izmantot virsrakstiem. Daži ekrānam draudzīgi serif fonti var strādāt arī pamattekstam, ja izmērs un atstarpes ir ērtas.
3. Displeja jeb dekoratīvie fonti
Tie ir mākslinieciskāki vai stilizētāki fonti.
Piemēri:
- rokraksta stila fonti
- ar roku rakstīti fonti
- treknie retro burtveidoli
- savdabīgi vai tematiski fonti
Izmanto tos ļoti taupīgi:
- logotipiem
- maziem akcentiem
- īpašu pasākumu baneriem
Nekad neizmanto tos pamattekstam vai garām rindkopām.
Kā izvēlēties pareizo fontu savam biznesam
Tā vietā, lai izvēlētos fontus pēc tā, kas "izskatās skaisti", izvēlies tos pēc sava zīmola personības.
Pajautā sev:
- Vai es esmu formāls vai nepiespiests?
- Moderns vai klasisks?
- Draudzīgs vai nopietns?
- Minimāls vai izteiksmīgs?
Piemēri:
- Maizes ceptuve: maigi serif virsraksti ar sans-serif pamattekstu šķiet silti un aicinoši.
- Tehnoloģiju jaunuzņēmums: trekni sans-serif virsraksti ar tīru sans-serif pamattekstu šķiet moderni un pārliecinoši.
- Luksusa rotaslietu zīmols: eleganti serif virsraksti ar tievu sans-serif pamattekstu šķiet augstākās klases un izsmalcināti.
- Fitnesa studija: spēcīgi sans-serif virsraksti ar tīru sans-serif pamattekstu šķiet enerģiski un droši.
Tavs fonts ir daļa no Tavas balss. Tam vajadzētu atbilst vēstījumam, ko vēlies, lai Tava mājaslapa pauž.
Kāpēc pārāk daudz fontu izmantošana ir kļūda
Viena no biežākajām iesācēju kļūdām ir daudzu dažādu fontu izmantošana vienā mājaslapā. Tas rada vizuālu haosu un padara Tavu lapu neprofesionālu.
Šeit ir noteikums:
Izmanto 1-2 fontus kopā.
Laba vienkārša kombinācija:
- viens fonts virsrakstiem
- viens fonts pamattekstam
Tas arī viss.
Tas piešķir Tavam dizainam konsekvenci un rada raitu lasīšanas pieredzi.
Fontu saskaņošana: kā apvienot fontus kā dizainerim
Ja Tu izvēlies divus fontus, tiem jāpapildina viens otru — nevis jācīnās par uzmanību.
Šeit ir vieglākās, iesācējam drošākās kombinācijas:
1. Serif virsraksts + sans-serif pamatteksts
Šī ir visklasiskākā un profesionālākā kombinācija.
Piemēri:
- Playfair Display + Montserrat
- Merriweather + Open Sans
Šī kombinācija der:
- koučiem
- blogeriem
- butikiem
- fotogrāfiem
- konsultantiem
- labsajūtas zīmoliem
2. Sans-serif virsraksts + sans-serif pamatteksts
Tīra, moderna un ārkārtīgi viegli lietojama.
Piemēri:
- Raleway
- Poppins
- Lato
- Montserrat
Šī der:
- tehnoloģiju uzņēmumiem
- maziem uzņēmumiem
- restorāniem
- e-komercijai
- portfolio
3. Serif virsraksts + serif pamatteksts
Tas var strādāt, bet tikai tad, ja abi ir veidoti, lai labi saskanētu. To ir viegli sabojāt.
Labāk piemērots:
- redakcionāla stila mājaslapām
- žurnāliem
- gariem blogiem
Iesācējiem turieties pie viena serif un viena sans-serif fonta.
4. Dekoratīvs fonts + sans-serif pamatteksts
Izmanto dekoratīvo fontu tikai:
- lieliem vai īsiem virsrakstiem
- vienam vārdam virsrakstā
- logotipam
- mazam izcēlumam
Nekad neizmanto dekoratīvos fontus gariem teikumiem. Tie ir pārāk smagi un grūti lasāmi.
Teksta izmērs un atstarpes: kā padarīt tipogrāfiju viegli lasāmu
Tipogrāfija nav tikai par fonta izvēli. Tā ir arī par to, kā teksts izvietojas lapā. Pat labākais fonts kļūst grūti lasāms, ja atstarpes ir nepareizas.
Šeit ir pamata noteikumi:
- Izmanto lielus, skaidrus virsrakstus. Taviem virsrakstiem vajadzētu izcelties. Tie vada Tavus apmeklētājus un palīdz viņiem ātri pārskatīt.
- Padari pamattekstu ērtu. Pārāk mazs teksts ir garantēts lasāmības nāvinieks.
- Izmanto dāsnas rindstarpas. Blīvs teksts šķiet biezs un nomācošs. Panāc, lai teksts justos gaisīgs un viegli uztverams.
- Saglabā rindkopas īsas. Lieli teksta bloki ir nogurdinoši. Īpaši, kad Tu veido mājaslapu un vēlies, lai apmeklētāji ātri saprastu Tavu vēstījumu, īsākas rindkopas strādā labāk.
Labs piemērs:
Rindkopa ar 2-4 teikumiem.
Slikts piemērs:
Milzīgs bloks ar 8-10 teikumiem.
Biežākās tipogrāfijas kļūdas, no kurām iesācējiem jāizvairās
Kļūda #1: Pārāk daudz fontu izmantošana
Šī ir tipogrāfijas kļūda numur viens.
Tava lapa uzreiz kļūst nekārtīga. Turies pie 1-2 fontiem.
Kļūda #2: Fontu izmantošana, kas neatbilst zīmolam
Piemēram:
- advokāts, kas izmanto komiksu stila fontu
- luksusa zīmols, kas izmanto rotaļīgu rokrakstu
- tehnoloģiju uzņēmums, kas izmanto vintāžas Vestern fontu
Tavam fontam jāatbilst Tavai identitātei.
Kļūda #3: Dekoratīvu fontu izmantošana rindkopām
Dekoratīvie fonti ir grūti lasāmi. Tos nekad nevajadzētu izmantot parastam saturam.
Kļūda #4: Sliktas atstarpes
Teksts izskatās nekārtīgs, kad:
- rindstarpas ir pārāk ciešas
- rindkopas ir pārāk garas
- virsraksti neizceļas
Atstarpes ir viens no vieglākajiem veidiem, kā uzreiz uzlabot savas lapas izskatu.
Kļūda #5: Fontu izmantošana, kas nesaskan ar pārējām lapām
Ja Tava sākumlapa izmanto vienu fontu un Tava "Par mums" lapa izmanto citu, apmeklētāji to uzreiz pamana — pat ja viņi apzināti nesaprot, kāpēc tas šķiet "nepareizi".
Konsekvence veido uzticību.
Tipogrāfijas rīki, kas var palīdzēt iesācējiem
Šeit ir vienkārši rīki fontu atrašanai vai pārbaudei:
- Google Fonts – milzīga tīmeklim draudzīgu fontu bibliotēka
- FontPair.co – ieteiktās fontu kombinācijas
- Canva Font Combinations – iesācējam draudzīga iedvesma
- TypeScale.com – priekšskatiet fontu izmērus un atstarpes
Šie rīki padara fontu izvēli daudz mazāk biedējošu.
Kā Mozello atvieglo Tev tipogrāfiju
Mozello 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 ar dizainu, kas jau izskatās labi.
Tāpēc:
Mozello iekļauj plašu profesionāli saskaņotu fontu kombināciju izvēli
Tā vietā, lai izvēlētos fontus manuāli, Tu vari vienkārši noklikšķināt vienu reizi un pielietot tīru, līdzsvarotu, dizainera apstiprinātu fontu saskaņojumu visā savā mājaslapā.
Mozello fontu komplekti ir:
- viegli lasāmi
- moderni
- konsekventi
- mobilajām ierīcēm draudzīgi
- pārbaudīti vizuālai harmonijai
Tas nozīmē, ka Tu iegūsti profesionālu tipogrāfiju, nebūdams dizaineris.
Ja Tavam biznesam jau ir zīmola fonts, Tu vari to instalēt
Dažiem uzņēmumiem jau ir pielāgots zīmola fonts no viņu dizainera. Mozello padara arī to vieglu.
Tu vari:
- augšupielādēt vai saistīt savu pielāgoto fontu, izmantojot Pielāgotā koda sadaļu
- pielietot to visā savā lapā
- saglabāt savu zīmola identitāti konsekventu
Tas ir īpaši noderīgi jau iedibinātiem uzņēmumiem vai logotipiem, kas izveidoti, izmantojot konkrētu fontu.
Pēdējais kontrolsaraksts pirms mājaslapas publicēšanas
Pirms savas lapas palaišanas pajautā sev:
- Vai manu tekstu ir viegli izlasīt gan datorā, gan mobilajā ierīcē?
- Vai es izmantoju tikai 1-2 fontus?
- Vai mani virsraksti ir manāmi lielāki par pamattekstu?
- Vai manas rindkopas ir labi izvietotas ar atstarpēm?
- Vai mans fonts atbilst mana biznesa personībai?
- Vai visas lapas konsekventi izmanto vienus un tos pašus fontus?
- Vai es izvairījos no pārāk dekoratīviem fontiem parastam tekstam?
Ja Tu vari teikt "jā" uz šiem, Tava tipogrāfija ir stabila.
Secinājums: Tipogrāfija ir viens no vieglākajiem veidiem, kā uzlabot savu mājaslapu
Laba tipogrāfija nav par visizsmalcinātākā fonta izvēli — tā ir par komunikācijas uzlabošanu. Kad Tu veido mājaslapu, izmantojot mājaslapu veidotāju maziem uzņēmumiem, piemēram, Mozello, Tavs mērķis ir vadīt apmeklētājus, saglabāt visu viegli lasāmu un panākt, ka Tavs zīmols šķiet uzticams.
Ar šī raksta vienkāršajiem principiem Tu izvairīsies no iesācēju kļūdām un izveidosi tipogrāfiju, kas skaisti atbalsta Tavu vēstījumu.
Vairāk rakstu šajā sērijā
- Kas ir labs tīmekļa dizains un kāpēc tas ir svarīgi
- Kā izvēlēties krāsas savai mājaslapai
- Kā izvēlēties fontus savai mājaslapai
- Kā izmantot brīvo vietu tīmekļa dizainā
- Kā formatēt tekstu savā mājaslapā
- Kā radīt vizuālo identitāti savai mājaslapai
- Kā izveidot efektīvus aicinājumus rīkoties
- Kā organizēt savu mājaslapu kā dizainerim
- Kā izveidot skaidru mājaslapas navigāciju
Lejupielādē mūsu bezmaksas Labākās tīmekļa dizaina prakses kontrolsarakstu, kas palīdzēs Tev soli pa solim izvērtēt savu mājaslapu.