{"id":18017,"date":"2017-08-02T13:40:41","date_gmt":"2017-08-02T11:40:41","guid":{"rendered":"https:\/\/dev.optiweb.com\/?post_type=post&p=17670"},"modified":"2018-09-03T08:51:11","modified_gmt":"2018-09-03T08:51:11","slug":"kako-izbrati-primerno-tipografijo-za-spletno-stran","status":"publish","type":"post","link":"https:\/\/dev.optiweb.com\/sl\/blog\/kako-izbrati-primerno-tipografijo-za-spletno-stran\/","title":{"rendered":"Kako izbrati primerno tipografijo za spletno stran?"},"content":{"rendered":"
\n

Ste kdaj pomislili, da lahko nepravilna izbira tipografije<\/strong> vpliva na uporabnikovo razpolo\u017eenje, posledi\u010dno pa tudi na njegovo uporabni\u0161ko izku\u0161njo<\/strong> z va\u0161o spletno stranjo<\/a>?<\/p>\n

Pisave imajo na uporabnika lahko mo\u010dne vplive; nekatere vzbudijo veselje, zaupanje, nekatere jezo in nervoznost. Premi\u0161ljena izbira pisave je zato pri oblikovanju spletne strani pomemben korak; prav z njo namre\u010d komuniciramo s strankami oz. potencialnimi kupci.<\/strong><\/p>\n

V spodnjem \u010dlanku vam razkrivamo nekaj pravil<\/strong>, na katere velja biti pozoren pri izbiri tipografije za spletno stran, da bo le ta prijazna uporabniku.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/main><\/div><\/div>

\n

Postavite se v vlogo uporabnika<\/h2>\n

Uporabite najve\u010d 3 razli\u010dne pisave<\/strong><\/p>\n

Uporaba preve\u010d razli\u010dnih tipov in stilov pisav lahko izpade neprofesionalno, hkrati pa stran deluje nepregledno in nestrukturirano. Skupno zato uporabite najve\u010d 3 razli\u010dne pisave. Oblikovalci se najpogosteje poslu\u017eujemo celo le dveh; prve za naslove, druge za preostalo besedilo.<\/p>\n

A \u010detudi se poslu\u017eite le dveh pisav, je treba izbirati premi\u0161ljeno: paziti je treba, da sta pisavi med seboj skladni in se dopolnjujeta. Na spletu je na voljo ne\u0161teto strani, ki prikazujejo najbolj\u0161e kombinacije razli\u010dnih pisav.<\/p>\n<\/div><\/section>\n<\/p>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Preve\u010d razli\u010dnih pisav hkrati deluje nestrukturirano in nepregledno.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Izogibajte se neberljivim in dekorativnim pisavam<\/strong><\/p>\n

Dekorativne pisave so postale pravi trend; spletno stran ob zmerni uporabi namre\u010d lahko dodobra po\u017eivijo. A kljub temu bodite pozorni na njeno berljivost; \u010de uporabnik besedila ne bo znal prebrati, nikoli ne bo dobil informacij, ki jih potrebuje.<\/p>\n

Dekorativne pisave zato raje uporabite za naslove ali kraj\u0161e citate, NIKOLI pa za glavno besedilo.<\/p>\n

NE NAPADAJTE UPORABNIKA<\/strong><\/p>\n

Nikoli se ne poslu\u017eujte uporabe velikih tiskanih \u010drk za besedila, namenjena dalj\u0161emu branju, saj uporabnik tako dobi ob\u010dutek, da ga napadate, hkrati pa je tudi samo branje besedila ote\u017eeno. Raje jih uporabite za poudarke, naslove ali gumbe.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Velike tiskane \u010drke niso primerne za dalj\u0161e odstavke; uporabite jih le za poudarke in gumbe.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Je va\u0161 font dovolj berljiv?<\/h2>\n

Serifna ali neserfina pisava?<\/strong><\/p>\n

V tiskarstvu serifna pisava velja za bolj berljivo, saj naj bi zaradi serifov (zaklju\u010dkov) \u010dlove\u0161ko oko hitreje skeniralo besede in tako la\u017eje prebralo dalj\u0161e besedilo. Ta zgodba pa je na spletu nekoliko druga\u010dna.<\/p>\n

Ravno zaradi svojih zaklju\u010dkov je serifna pisava na digitalnih medijih te\u017eje berljiva; zasloni z manj\u0161o resolucijo namre\u010d ne morejo natan\u010dno prikazovati vseh linij. Ta te\u017eava se postopoma re\u0161uje sama od sebe, saj z zasloni ve\u010dje resolucije tako prihaja tudi bolj\u0161a berljivost serifnih pisav.<\/p>\n

Razmiki med vrsticami<\/strong><\/p>\n

Berljivost dalj\u0161ega besedila lahko izbolj\u0161ate s pove\u010danjem razmika med vrsticami. S tem besedilu pustite dihati, ga osvobodite \u00bbnatla\u010denosti\u00ab; pa tudi uporabnik ga bo la\u017eje skeniral. Pravilna dolo\u010ditev razmika med vrsticami naj bi kar za 20 % izbolj\u0161ala razumevanje besedila. A pazite, da ne boste pretiravali, saj lahko v nasprotnem primeru dose\u017eete ravno nasprotni u\u010dinek.<\/p>\n

A kako lahko veste, kak\u0161en je tisti pravi razmik? Za doseganje optimalne re\u0161itve obstaja prava formula: velikost pisave pomno\u017eite z 1,4. \u010ce je torej velikost pisave npr. 17 px, bi idealen razmik med vrsticami zna\u0161al pribli\u017eno 24 px. Pri tem so rezultati odvisni tudi od tipa pisave, zato je se je treba v\u010dasih preprosto treba zanesti na svoje oko.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Razmik med vrsticami mo\u010dno vpliva na prikaz in berljivost besedila.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Omejite \u0161irino besedilnega bloka<\/strong><\/p>\n

\u010ce je besedilo razporejeno \u010dez celotno dol\u017eino strani, se \u010dlove\u0161ko oko nanj ne more osredoto\u010diti. Bralec te\u017eje zazna konec in za\u010detek besedila, s tem pa je ote\u017eeno tudi branje. Za optimalno re\u0161itev na ra\u010dunalni\u0161kih ekranih zadostuje 50-75 znakov na vrstico (z vklju\u010denimi presledki), za mobilne verzije pa 30-40 znakov na vrstico.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

\u010clove\u0161ko oko te\u017eko bere predolge ali prekratke vrstice; najti je treba zlato sredino.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Barvni kontrast s podlago<\/strong><\/p>\n

Za besedila na spletni strani je najbolje uporabiti barve, ki so primerno kontrastne ozadju (na temnem ozadju uporabite svetlo pisavo in obratno). Izogibajte se uporabi \u010drne barve, saj je le ta na beli podlagi te\u017eje berljiva (predvsem za dislektike); namesto nje raje uporabite temnej\u0161i odtenek sive (npr: #434343).<\/p>\n

Priporo\u010dljivo razmerje kontrasta med ozadjem in besedilom je pribli\u017eno 3:1, lahko pa variira glede na velikost in debelino pisave.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Za temno podlago naj se uporabljajo svetle pisave, za svetlo podlago pa temne pisave.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Odsvetujemo tudi uporabo komplementarnih barvnih kombinacij, predvsem zeleno-rde\u010de, saj je ta precej problemati\u010dna za uporabnike z barvno slepoto.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Kje najti primerno pisavo za splet?<\/h2>\n

Google fonts<\/strong><\/p>\n

Splet ponuja velik nabor razli\u010dnih pisav, a vse \u017eal niso primerne za splet. Priporo\u010damo vam, da si izberete pisavo na strani Google fonts<\/a>. Stran zdru\u017euje pisave v primernem formatu (.otf ali .ttf ) za splet, zato se bodo zagotovo pravilno prikazovale v vseh brskalnikih.<\/p>\n

\u010ce va\u0161a spletna stran vsebuje \u0161umnike, obvezno izberite opcijo \u00bbLatin extended\u00ab, ki vam prika\u017ee le pisave s \u0161umniki; v nasprotnem primeru bodo \u0161umniki na strani prikazani popa\u010deno.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Izbira “Latin Extended” bo omogo\u010dila prikaz pisav s \u0161umniki.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Pri iskanju na drugih spletnih straneh (npr. 1001 Font, Fontsquirrel, \u2026) bodite pozorni, da izbrana pisava dovoljuje uporabo na spletu, saj v nasprotnem primeru kr\u0161ite avtorske pravice.<\/p>\n

My fonts<\/strong><\/p>\n

Svojo unikatno pisavo na raznih straneh lahko tudi kupite; ena izmed njih je Myfonts<\/a>. Stran ponuja \u0161irok nabor pisav, cena pa variira glede na tip in \u0161tevilo stilov, ki jih pisava vsebuje. Kupiti je seveda treba razli\u010dico, namenjeno spletu.<\/p>\n

Tipografija velikokrat predstavlja kar 95 % va\u0161e spletne strani, zato je pomembno, da jo izberete premi\u0161ljeno in si zanjo vzamete dovolj \u010dasa; \u0161e bolje pa je, da izbiro prepustite oblikovalcu. Slednje imamo tudi pri nas, zato nam v primeru vpra\u0161anja kar hitro pi\u0161ite ali pa se oglasite na kavi<\/a>.<\/p>\n<\/div><\/section>\n\n","protected":false},"excerpt":{"rendered":"

Izbira pisave na spletni strani ima velik vpliv na uporabni\u0161ko izku\u0161njo na\u0161ega potencialnega kupca. Kako izbrati tisto, ki bo njegovim o\u010dem najbolj prijazna?<\/p>\n","protected":false},"author":1,"featured_media":17788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1030],"tags":[],"_links":{"self":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/18017"}],"collection":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/comments?post=18017"}],"version-history":[{"count":7,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/18017\/revisions"}],"predecessor-version":[{"id":31522,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/18017\/revisions\/31522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media\/17788"}],"wp:attachment":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media?parent=18017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/categories?post=18017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/tags?post=18017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}