{"id":34692,"date":"2025-06-06T09:30:00","date_gmt":"2025-06-06T07:30:00","guid":{"rendered":"https:\/\/www.websupport.sk\/blog\/?p=34692"},"modified":"2025-06-04T16:32:09","modified_gmt":"2025-06-04T14:32:09","slug":"fonty-na-web","status":"publish","type":"post","link":"https:\/\/www.websupport.sk\/blog\/2025\/06\/fonty-na-web\/","title":{"rendered":"Ako vybra\u0165 vhodn\u00fd font (p\u00edsmo) pre v\u00e1\u0161 web? (+ zoznamy fontov)"},"content":{"rendered":"Doba \u010d\u00edtania:<\/b><\/span> 10<\/span> min.<\/span><\/span>\n

V\u00fdber p\u00edsma na webov\u00fa str\u00e1nku v\u00fdrazne ovplyv\u0148uje nielen prv\u00fd dojem n\u00e1v\u0161tevn\u00edka v\u00e1\u0161ho webu, ale aj celkov\u00fa \u010ditate\u013enos\u0165<\/strong> obsahu. P\u00edsmo je nosite\u013eom inform\u00e1ci\u00ed a z\u00e1rove\u0148 dod\u00e1va v\u00e1\u0161mu webu osobnos\u0165<\/strong>. Pozrieme sa na to, ako vybra\u0165 font na web<\/strong>, na \u010do si da\u0165 pozor a prid\u00e1me aj konkr\u00e9tne tipy a zoznamy fontov<\/strong> (vr\u00e1tane free fontov<\/em> z Google Fonts), ktor\u00e9 patria k ob\u013e\u00faben\u00fdm.<\/p>\n\n\n\n

Font na webe je funk\u010dn\u00fd prvok dizajnu<\/strong>, ktor\u00fd priamo ovplyv\u0148uje spr\u00e1vanie n\u00e1v\u0161tevn\u00edkov. A ako to pri dizajne b\u00fdva, tak neexistuj\u00fa \u017eiadne jednoduch\u00e9 pravidl\u00e1, ako si najlep\u0161ie vybra\u0165 p\u00edsmo. Av\u0161ak existuje mnoho osved\u010den\u00fdch z\u00e1sad, na ktor\u00e9 sa spolu pozrieme a ktor\u00e9 si m\u00f4\u017eete r\u00fdchlo osvoji\u0165 a uplatni\u0165 pri vhodnom v\u00fdbere p\u00edsma.

Obsah<\/strong>
1. Ako rozde\u013eujeme fonty?<\/a>
2. Na \u010do si da\u0165 pozor pri v\u00fdbere p\u00edsma?<\/a>
3. Kde za\u010da\u0165 s v\u00fdberom fontu?<\/a>
4. Ko\u013eko fontov kombinova\u0165?<\/a>
5. Ak\u00fa zvoli\u0165 hr\u00fabku fontu?<\/a>
6. Odpor\u00fa\u010dan\u00e9 top fonty na webov\u00e9 str\u00e1nky<\/a>
7. \u010co s\u00fa to Web Safe Fonts? <\/a>
8. Z\u00e1kladn\u00e9 chyby pri v\u00fdbere fontov na web<\/a><\/p>\n\n\n\n

Ako rozde\u013eujeme fonty?<\/h2>\n\n\n\n

Za\u010dneme trochou te\u00f3rie. Aby ste si vedeli lep\u0161ie vybra\u0165, pom\u00f4\u017ee pozna\u0165 z\u00e1kladn\u00e9 kateg\u00f3rie p\u00edsiem<\/a>. Minim\u00e1lne pre to, aby ste vedeli, v ak\u00fdch kateg\u00f3ri\u00e1ch vhodn\u00fd font h\u013eada\u0165. Fonty (p\u00edsma) del\u00edme pod\u013ea tvaru a \u0161t\u00fdlu na viacero skup\u00edn, zn\u00e1me s\u00fa najm\u00e4 serif<\/strong>, sans serif<\/strong>, skiptov\u00e9\/kaligrafick\u00e9<\/strong> a ozdobn\u00e9<\/strong>. Ka\u017ed\u00fd typ p\u00edsma<\/strong> m\u00e1 svoj charakter a hod\u00ed sa na in\u00fd \u00fa\u010del.<\/p>\n\n\n\n

Serif (p\u00e4tkov\u00e9 p\u00edsmo)<\/strong><\/h3>\n\n\n\n

Serifov\u00e9 fonty spozn\u00e1te pod\u013ea mal\u00fdch \u201cno\u017ei\u010diek\u201d \u010di li\u0161ti\u010diek na okrajoch p\u00edsmen. P\u00f4sobia klasicky, nad\u010dasovo a elegantne. Patr\u00ed sem napr\u00edklad Times New Roman<\/strong>, Georgia<\/strong>. Serif p\u00edsmo sa tradi\u010dne pou\u017e\u00edva v tla\u010di (knihy, noviny) a na webe \u010dasto v nadpisoch alebo dlh\u0161\u00edch textoch, ke\u010f chcete evokova\u0165 seri\u00f3znos\u0165 alebo tradi\u010dn\u00fd<\/strong> \u0161t\u00fdl. D\u00f4le\u017eit\u00e9 je dba\u0165 na \u010ditate\u013enos\u0165<\/strong> \u2013 na obrazovk\u00e1ch s ni\u017e\u0161\u00edm rozl\u00ed\u0161en\u00edm m\u00f4\u017eu by\u0165 drobn\u00e9 detaily serifov hor\u0161ie vidite\u013en\u00e9.<\/p>\n\n\n\n

Sans Serif (bezp\u00e4tkov\u00e9 p\u00edsmo)<\/strong><\/h3>\n\n\n\n

Sans serif fonty (bezp\u00e4tkov\u00e9) nemaj\u00fa ozdobn\u00e9 zakon\u010denia p\u00edsmen. Vyzeraj\u00fa moderne a \u010disto<\/strong>, preto s\u00fa ve\u013emi ob\u013e\u00faben\u00e9 ako fonty na web<\/strong>. Typick\u00fdmi z\u00e1stupcami s\u00fa Arial<\/strong>, Helvetica<\/strong>, ale aj ob\u013e\u00faben\u00e9 Google fonty<\/strong> ako Roboto<\/strong> \u010di Open Sans<\/strong>. Bezp\u00e4tkov\u00e9 p\u00edsmo je v\u0161eobecne v\u00fdborne \u010ditate\u013en\u00e9 aj na obrazovke, hod\u00ed sa pre v\u00e4\u010d\u0161inu webov\u00fdch projektov od firemn\u00fdch webstr\u00e1nok po aplik\u00e1cie. P\u00f4sob\u00ed minimalisticky a univerz\u00e1lne \u2013 ak si nie ste ist\u00ed, vo\u013eba sans-serif p\u00edsma je v\u00e4\u010d\u0161inou st\u00e1vka na istotu<\/strong>.<\/p>\n\n\n\n

Kaligrafick\u00e9 a ozdobn\u00e9 p\u00edsmo<\/strong><\/h3>\n\n\n\n

Do tejto kateg\u00f3rie patria skiptov\u00e9 (handwritten)<\/strong> fonty napodob\u0148uj\u00face ru\u010dne p\u00edsan\u00e9 p\u00edsmo, kaligrafiu alebo podpis, a tie\u017e r\u00f4zne dekorat\u00edvne<\/strong> \u010di ozdobn\u00e9 p\u00edsma<\/strong> vytvoren\u00e9 pre efektn\u00fd vzh\u013ead. Tieto fonty maj\u00fa v\u00fdrazn\u00fa osobitos\u0165<\/strong> a pou\u017e\u00edvaj\u00fa sa sk\u00f4r na zv\u00fdraznenie \u2013 napr\u00edklad v logu. Pr\u00edklady: popul\u00e1rny \u201crukopisn\u00fd\u201d font Lobster<\/strong>, elegantn\u00fd kaligrafick\u00fd Pacifico<\/strong>. V\u0161etky ozdobn\u00e9 p\u00edsma pou\u017e\u00edvajte naozaj rozv\u00e1\u017ene<\/strong> \u2013 vo v\u00e4\u010d\u0161\u00edch blokoch textu s\u00fa zle \u010ditate\u013en\u00e9 a na webe by mali sl\u00fa\u017ei\u0165 len ako akcent, nie na cel\u00e9 odseky.<\/p>\n\n\n\n

Ikonkov\u00e9 fonty<\/strong><\/h3>\n\n\n\n

D\u00e1me si e\u0161te jednu historick\u00fa zast\u00e1vku. V minulosti sa na zobrazovanie ikon na webe \u010dasto pou\u017e\u00edvali ikonov\u00e9 fonty \u2013 teda fonty, ktor\u00e9 namiesto p\u00edsmen obsahovali symboly, ikony alebo piktogramy. Medzi najzn\u00e1mej\u0161ie patrili napr\u00edklad Font Awesome<\/strong> alebo Glyphicons<\/strong>. Tieto \u0161pecifick\u00e9 fonty sa dali \u013eahko \u0161k\u00e1lova\u0165, farebne meni\u0165 cez CSS a mali ve\u013emi mal\u00fd d\u00e1tov\u00fd objem. Namiesto viacer\u00fdch obr\u00e1zkov\u00fdch s\u00faborov si web na\u010d\u00edtal len jeden font s\u00fabor a jednotliv\u00e9 ikony sa vkladali ako znaky, napr\u00edklad pomocou <i class=“icon-user“><\/i>. Aj ke\u010f sa s nimi e\u0161te m\u00f4\u017eete stretn\u00fa\u0165 (najm\u00e4 v star\u0161\u00edch projektoch), ikonov\u00e9 fonty u\u017e nie s\u00fa preferovan\u00fd sp\u00f4sob zobrazovania ikon. Dnes ich nahr\u00e1dza SVG (Scalable Vector Graphics) \u2013 teda vektorov\u00e1 grafika ur\u010den\u00e1 \u0161peci\u00e1lne pre web.<\/p>\n\n\n\n

Na \u010do si da\u0165 pozor pri v\u00fdbere p\u00edsma?<\/h2>\n\n\n\n

Ke\u010f u\u017e m\u00e1te predstavu o \u0161t\u00fdle p\u00edsma, prich\u00e1dzaj\u00fa na rad praktick\u00e9 ot\u00e1zky. V\u00fdber fontu na web nie je len o estetike \u2013 treba myslie\u0165 aj na licenciu<\/strong>, podporu diakritiky<\/strong> \u010di spom\u00ednan\u00fa \u010ditate\u013enos\u0165<\/strong>. Tu s\u00fa hlavn\u00e9 faktory, na ktor\u00e9 by ste nemali zabudn\u00fa\u0165:<\/p>\n\n\n\n

Fonty zadarmo<\/strong><\/h3>\n\n\n\n

Na internete n\u00e1jdete tis\u00edce vo\u013ene dostupn\u00fdch p\u00edsiem. Mnoh\u00e9 free fonty<\/em> s\u00fa kvalitn\u00e9 a pre web \u00faplne dosta\u010duj\u00face. Najv\u00e4\u010d\u0161\u00edm zdrojom je Google Fonts<\/strong><\/a>, kde v\u0161etky fonty s\u00fa zadarmo aj pre komer\u010dn\u00e9 pou\u017eitie. \u010eal\u0161ie str\u00e1nky pon\u00fakaj\u00face fonty zadarmo<\/strong> (napr\u00edklad DaFont<\/strong><\/a>) \u010dasto obsahuj\u00fa aj fonty limitovan\u00e9 licenciou. D\u00e1vajte si preto pozor<\/em>, \u010di je font vo\u013en\u00fd aj pre komer\u010dn\u00e9 pou\u017eitie, aby ste sa vyhli pr\u00e1vnym probl\u00e9mom.<\/p>\n\n\n\n

Platen\u00e9 fonty<\/strong><\/h3>\n\n\n\n

Ak chcete nie\u010do \u0161pecifickej\u0161ie alebo profesion\u00e1lnej\u0161ie, m\u00f4\u017eete siahnu\u0165 po komer\u010dn\u00fdch p\u00edsmach od profesion\u00e1lnych typografov. Platen\u00e9 fonty<\/strong> \u010dasto pon\u00fakaj\u00fa jedine\u010dn\u00fd dizajn a \u0161ir\u0161iu podporu r\u00f4znych rezov \u010di jazykov. Nev\u00fdhodou m\u00f4\u017ee by\u0165 cena \u2013 licencie na kvalitn\u00e9 fonty m\u00f4\u017eu st\u00e1\u0165 desiatky a\u017e stovky eur. Samozrejme z\u00e1le\u017e\u00ed od projektu pre ktor\u00fd font chcete, tak\u017ee zv\u00e1\u017ete si  pomer ceny a hodnoty<\/em> \u2013 niekedy sa oplat\u00ed investova\u0165 do unik\u00e1tneho fontu, inokedy \u00faplne posta\u010d\u00ed bezplatn\u00e1 alternat\u00edva.<\/p>\n\n\n\n

P\u00edsmo s diakritikou<\/strong><\/h3>\n\n\n\n

Pre slovensk\u00e9 (a \u010desk\u00e9) weby je absol\u00fatne k\u013e\u00fa\u010dov\u00e9, aby zvolen\u00e9 p\u00edsmo obsahovalo slovensk\u00fa diakritiku<\/strong>. Ak vybran\u00fd font neobsahuje slovensk\u00e9 a \u010desk\u00e9 p\u00edsmen\u00e1 (\u013e, \u0161, \u010d, \u0165, \u017e at\u010f.), na webe ho rad\u0161ej v\u00f4bec nepou\u017e\u00edvajte \u2013 text by s n\u00edm nevyzeral spr\u00e1vne. V\u017edy si overte podporu SK\/CZ diakritiky<\/em> (na Google Fonts pom\u00f4\u017ee filter Latin Extended<\/em>).<\/p>\n\n\n\n

\u010citate\u013enos\u0165<\/strong><\/h3>\n\n\n\n

\u010citate\u013enos\u0165 je prvorad\u00e1<\/strong> \u2013 aj najkraj\u0161ie p\u00edsmo je na ni\u010d, ak ho \u013eudia nevedia pre\u010d\u00edta\u0165. Vyh\u00fdbajte sa preto pr\u00edli\u0161 ozdobn\u00fdm alebo extr\u00e9mne tenk\u00fdm fontom na be\u017en\u00fd text. Zabezpe\u010dte dostato\u010dn\u00fd kontrast textu s pozad\u00edm a vysk\u00fa\u0161ajte si, ako sa zvolen\u00fd font \u010d\u00edta na r\u00f4znych zariadeniach (mobil, tablet, PC).<\/p>\n\n\n\n

Kde za\u010da\u0165 s v\u00fdberom fontu?<\/h2>\n\n\n\n

Dnes existuje mno\u017estvo zdrojov, kde m\u00f4\u017eete prech\u00e1dza\u0165 a sk\u00fa\u0161a\u0165 fonty na web<\/strong> jednoducho online.<\/p>\n\n\n\n