Výber písma na webovú stránku výrazne ovplyvňuje nielen prvý dojem návštevníka vášho webu, ale aj celkovú čitateľnosť obsahu. Písmo je nositeľom informácií a zároveň dodáva vášmu webu osobnosť. Pozrieme sa na to, ako vybrať font na web, na čo si dať pozor a pridáme aj konkrétne tipy a zoznamy fontov (vrátane free fontov z Google Fonts), ktoré patria k obľúbeným.
Font na webe je funkčný prvok dizajnu, ktorý priamo ovplyvňuje správanie návštevníkov. A ako to pri dizajne býva, tak neexistujú žiadne jednoduché pravidlá, ako si najlepšie vybrať písmo. Avšak existuje mnoho osvedčených zásad, na ktoré sa spolu pozrieme a ktoré si môžete rýchlo osvojiť a uplatniť pri vhodnom výbere písma.
Obsah
1. Ako rozdeľujeme fonty?
2. Na čo si dať pozor pri výbere písma?
3. Kde začať s výberom fontu?
4. Koľko fontov kombinovať?
5. Akú zvoliť hrúbku fontu?
6. Odporúčané top fonty na webové stránky
7. Čo sú to Web Safe Fonts?
8. Základné chyby pri výbere fontov na web
Ako rozdeľujeme fonty?
Začneme trochou teórie. Aby ste si vedeli lepšie vybrať, pomôže poznať základné kategórie písiem. Minimálne pre to, aby ste vedeli, v akých kategóriách vhodný font hľadať. Fonty (písma) delíme podľa tvaru a štýlu na viacero skupín, známe sú najmä serif, sans serif, skiptové/kaligrafické a ozdobné. Každý typ písma má svoj charakter a hodí sa na iný účel.
Serif (pätkové písmo)
Serifové fonty spoznáte podľa malých “nožičiek” či lištičiek na okrajoch písmen. Pôsobia klasicky, nadčasovo a elegantne. Patrí sem napríklad Times New Roman, Georgia. Serif písmo sa tradične používa v tlači (knihy, noviny) a na webe často v nadpisoch alebo dlhších textoch, keď chcete evokovať serióznosť alebo tradičný štýl. Dôležité je dbať na čitateľnosť – na obrazovkách s nižším rozlíšením môžu byť drobné detaily serifov horšie viditeľné.
Sans Serif (bezpätkové písmo)
Sans serif fonty (bezpätkové) nemajú ozdobné zakončenia písmen. Vyzerajú moderne a čisto, preto sú veľmi obľúbené ako fonty na web. Typickými zástupcami sú Arial, Helvetica, ale aj obľúbené Google fonty ako Roboto či Open Sans. Bezpätkové písmo je všeobecne výborne čitateľné aj na obrazovke, hodí sa pre väčšinu webových projektov od firemných webstránok po aplikácie. Pôsobí minimalisticky a univerzálne – ak si nie ste istí, voľba sans-serif písma je väčšinou stávka na istotu.
Kaligrafické a ozdobné písmo
Do tejto kategórie patria skiptové (handwritten) fonty napodobňujúce ručne písané písmo, kaligrafiu alebo podpis, a tiež rôzne dekoratívne či ozdobné písma vytvorené pre efektný vzhľad. Tieto fonty majú výraznú osobitosť a používajú sa skôr na zvýraznenie – napríklad v logu. Príklady: populárny “rukopisný” font Lobster, elegantný kaligrafický Pacifico. Všetky ozdobné písma používajte naozaj rozvážne – vo väčších blokoch textu sú zle čitateľné a na webe by mali slúžiť len ako akcent, nie na celé odseky.
Ikonkové fonty
Dáme si ešte jednu historickú zastávku. V minulosti sa na zobrazovanie ikon na webe často používali ikonové fonty – teda fonty, ktoré namiesto písmen obsahovali symboly, ikony alebo piktogramy. Medzi najznámejšie patrili napríklad Font Awesome alebo Glyphicons. Tieto špecifické fonty sa dali ľahko škálovať, farebne meniť cez CSS a mali veľmi malý dátový objem. Namiesto viacerých obrázkových súborov si web načítal len jeden font súbor a jednotlivé ikony sa vkladali ako znaky, napríklad pomocou <i class=”icon-user”></i>. Aj keď sa s nimi ešte môžete stretnúť (najmä v starších projektoch), ikonové fonty už nie sú preferovaný spôsob zobrazovania ikon. Dnes ich nahrádza SVG (Scalable Vector Graphics) – teda vektorová grafika určená špeciálne pre web.
Na čo si dať pozor pri výbere písma?
Keď už máte predstavu o štýle písma, prichádzajú na rad praktické otázky. Výber fontu na web nie je len o estetike – treba myslieť aj na licenciu, podporu diakritiky či spomínanú čitateľnosť. Tu sú hlavné faktory, na ktoré by ste nemali zabudnúť:
Fonty zadarmo
Na internete nájdete tisíce voľne dostupných písiem. Mnohé free fonty sú kvalitné a pre web úplne dostačujúce. Najväčším zdrojom je Google Fonts, kde všetky fonty sú zadarmo aj pre komerčné použitie. Ďalšie stránky ponúkajúce fonty zadarmo (napríklad DaFont) často obsahujú aj fonty limitované licenciou. Dávajte si preto pozor, či je font voľný aj pre komerčné použitie, aby ste sa vyhli právnym problémom.
Platené fonty
Ak chcete niečo špecifickejšie alebo profesionálnejšie, môžete siahnuť po komerčných písmach od profesionálnych typografov. Platené fonty často ponúkajú jedinečný dizajn a širšiu podporu rôznych rezov či jazykov. Nevýhodou môže byť cena – licencie na kvalitné fonty môžu stáť desiatky až stovky eur. Samozrejme záleží od projektu pre ktorý font chcete, takže zvážte si pomer ceny a hodnoty – niekedy sa oplatí investovať do unikátneho fontu, inokedy úplne postačí bezplatná alternatíva.
Písmo s diakritikou
Pre slovenské (a české) weby je absolútne kľúčové, aby zvolené písmo obsahovalo slovenskú diakritiku. Ak vybraný font neobsahuje slovenské a české písmená (ľ, š, č, ť, ž atď.), na webe ho radšej vôbec nepoužívajte – text by s ním nevyzeral správne. Vždy si overte podporu SK/CZ diakritiky (na Google Fonts pomôže filter Latin Extended).
Čitateľnosť
Čitateľnosť je prvoradá – aj najkrajšie písmo je na nič, ak ho ľudia nevedia prečítať. Vyhýbajte sa preto príliš ozdobným alebo extrémne tenkým fontom na bežný text. Zabezpečte dostatočný kontrast textu s pozadím a vyskúšajte si, ako sa zvolený font číta na rôznych zariadeniach (mobil, tablet, PC).
Kde začať s výberom fontu?
Dnes existuje množstvo zdrojov, kde môžete prechádzať a skúšať fonty na web jednoducho online.
- Google Fonts – Už sme ho spomínali a určite patrí na prvé miesto. Ponúka stovky rôznych písiem zadarmo, ktoré môžete filtrovať podľa typu písma či jazyka (napr. len fonty s podporou slovenčiny). Pri každom fonte uvidíte náhľad a Google Fonts vám rovno poskytne kód na vloženie fontu do vašej webstránky.
- DaFont – Veľká a legendárna zbierka dekoratívnych a netradičných fontov. DaFont je výborný na inšpiráciu a sťahovanie fontov do grafík, no pozor – väčšina je určená len na osobné použitie. Ak chcete font z DaFont použiť na webe komerčne, skontrolujte, či pri ňom autor uvádza povolenie alebo licenciu.
- Ďalšou inšpiráciou môžu byť weby 1001fonts alebo FontSquirrel.
Koľko fontov kombinovať?
Vo všeobecnosti platí, že na jednu webstránku stačia dva rôzne písma (príp. tri, ale to je strop). Typicky sa jedno písmo používa na nadpisy a druhé na bežný text. Ak to preženiete s počtom fontov, web bude pôsobiť chaoticky a nejednotne.
Ako fonty kombinovať?
- Serif + sans-serif: Kombinácia pätkového a bezpätkového písma takmer vždy funguje. Kontrast tradičného a moderného štýlu vytvorí vizuálne atraktívny, no stále harmonický dojem..
- Jedna fontová rodina: Jednoduchou cestou je aj použiť rôzne rezy jedného fontu. Napríklad jedno písmo (napr. Inter) použijete v hrubšom reze na nadpisy a v normálnom reze na bežný text. Docielite tým kontrast, ale zachováte jednotný štýl.
- Vyhnite sa konfliktu: Nekombinujte písma, ktoré sú si príliš podobné. Dva takmer identické sans-serify vedľa seba budú skôr vyzerať ako chyba, než váš zámer. Fonty by sa mali buď jasne odlišovať, alebo byť z jednej rodiny – nič medzi tým.
Experimentovanie s párovaním fontov môže byť zábavné, ale držte sa zásady konzistentnosti. Tá vám zabezpečí, že hoci použijete dva fonty, dizajn bude pôsobiť jednoliato a profesionálne.
Akú zvoliť hrúbku fontu?
Na bežný text zvoľte štandardnú hrúbku písma (Regular) a na nadpisy hrubší rez (Bold). Príliš tenké písmo býva zle čitateľné v malých veľkostiach a extra hrubé rezy sa hodia len na krátke nápisy. Vo väčšine prípadov si vystačíte s dvoma rezmi – jedným na odstavce a druhým na titulky.
Inšpirujte sa pri výbere fontu inými webmi
Ak váhate, pozrite sa, aké fonty používajú iné weby – najmä vo vašom odbore alebo obľúbené dizajnové projekty. Všímajte si, aké písmo majú pre nadpisy a text, a zvážte, či by podobný štýl sedel aj vám. Keď narazíte na pekný font na cudzej stránke, pomôžu vám nástroje na jeho identifikáciu (napríklad rozšírenie Chrome prehliadača WhatFont). Získate tak názov písma a môžete zistiť, či je voľne dostupné alebo existuje podobná bezplatná alternatíva.
Nezabúdajte – inšpirujte sa, ale nekopírujte – font by mal stále sedieť k vašej vlastnej značke a vyjadrovať práve jej jedinečnosť.
Proporcionálne a neproporcionálne (monospace) písmo
Proporcionálne písmo je také, kde jednotlivé písmená zaberajú rôznu šírku podľa svojho tvaru – napríklad písmeno „i“ je užšie ako „m“. Väčšina bežne používaných webových fontov (napríklad Open Sans, Roboto) je proporcionálna, pretože takéto písmo pôsobí prirodzenejšie a je lepšie čitateľné v súvislom texte.
Naopak, monospace písmo (neproporcionálne) má všetky znaky rovnako široké, bez ohľadu na ich tvar. Typickými príkladmi sú fonty ako Courier New alebo Source Code Pro, ktoré sa často používajú v programovaní, kódoch alebo technickej dokumentácii, kde je dôležitá presná zarovnanosť znakov. Pre bežné webové texty sa monospace fonty neodporúčajú, ale môžu byť skvelým štýlovým prvkom napríklad pre bloky kódu alebo technické sekcie.
Odporúčané top fonty na webové stránky
Niekoľko vhodných fontov sme si už spomenuli, tu nájdete tipy na ďalšie – všetky dostupné ako free fonty cez Google Fonts:
Moderné geometrické sans-serif písmo vhodné na nadpisy a bannery; patrí medzi najpopulárnejšie webové fonty.
Univerzálny bezpätkový font s vynikajúcou čitateľnosťou – hodí sa na odstavce textu aj do používateľského rozhrania.
Neutrálne a veľmi dobre čitateľné písmo s priateľským vzhľadom, použiteľné pre akýkoľvek typ webu.
Elegantný moderný font s tenkými líniami, ideálny na veľké nadpisy a grafiku (na dlhé texty menej vhodný).
Moderný font navrhnutý pre maximálnu čitateľnosť na obrazovke; obľúbený najmä v digitálnych projektoch a aplikáciách.
Čo sú to Web Safe Fonts?
Web Safe Fonts sú písma, ktoré sú predinštalované na väčšine operačných systémov (Windows, macOS, Linux) a preto sa pri zobrazovaní webových stránok nemusia dodatočne načítavať z internetu. Ich výhodou je, že sa zobrazia správne a jednotne naprieč rôznymi zariadeniami a prehliadačmi bez rizika nekompatibility alebo oneskoreného načítania.
Použitie Web Safe Fonts je dôležité najmä tam, kde je potrebná rýchlosť, spoľahlivosť a maximálna kompatibilita – napríklad v základnom dizajne e-mailov, jednoduchých stránkach alebo ako záložné fonty (fallback fonts), ak by sa primárne písmo nepodarilo načítať.
Najznámejšie Web Safe Fonts:
- Arial – čisté sans-serif písmo, extrémne univerzálne
- Helvetica – veľmi podobné Arialu, preferované na macOS
- Times New Roman – klasický serif používaný najmä v tlači a tradičných dizajnoch
- Georgia – serifové písmo navrhnuté špeciálne pre lepšiu čitateľnosť na obrazovkách
- Verdana – veľmi čitateľné sans-serif písmo s väčšími medzerami medzi písmenami
- Trebuchet MS – moderný a svieži sans-serif vhodný na web
- Courier New – monospace písmo vhodné na zobrazovanie kódu alebo technických údajov
- Tahoma – sans-serif písmo s veľmi čistým a jednoduchým vzhľadom
- Impact – hrubé, dramatické písmo používané na nadpisy alebo zvýraznenie
- Comic Sans MS – uvoľnené, detské písmo (odporúčame používať veľmi opatrne)
Aj keď sú tieto fonty bezpečné na použitie, často pôsobia zastaraným dojmom v modernom webdizajne. Preto sa dnes skôr kombinujú s novšími fontami (napr. cez Google Fonts) alebo slúžia ako fallback riešenie.
Základné chyby pri výbere fontov na web
- Výber fontu bez podpory diakritiky – Ak font nepodporuje slovenské znaky, text bude vyzerať neúplne alebo chybne.
- Použitie príliš ozdobného písma na bežný text – Dekoratívne alebo kaligrafické fonty sú krásne, ale zle čitateľné vo väčších blokoch.
- Nekonzistentné kombinovanie viacerých fontov – Príliš veľa rôznych štýlov naraz pôsobí chaoticky a kazí profesionálny dojem.
- Nevhodný kontrast medzi písmom a pozadím – Slabý kontrast znižuje čitateľnosť a môže spraviť obsah neprístupným.
- Ignorovanie licenčných podmienok fontu – Použitie fontu bez platnej licencie na komerčné účely môže viesť k právnym problémom.
Záver
Dobre zvolené písmo dokáže výrazne pozdvihnúť váš web – zlepší vzhľad aj čitateľnosť obsahu. Pri výbere preto zohľadnite nielen štýl fontu, ale aj praktické veci ako licenciu, podporu jazykov a čitateľnosť. Nebojte sa vyskúšať viac možností a porovnať, ktorá typografia pôsobí najlepšie.
Držte sa odporúčaní z tohto článku a určite nájdete font (alebo ich kombináciu), ktorý vašej stránke sadne. Prajeme veľa šťastia pri tvorbe pôsobivej a funkčnej webovej typografie.
