Firma investuje do loga, farieb aj fotografií, potom pošle zákazníkovi ponuku v predvolenom písme textového editora. Ten istý deň vyjde inzerát v treťom písme, pretože grafik pracoval so šablónou. Značka pôsobí zakaždým inak a rozdiel si zákazník nepomenuje – len jej menej verí.
Font pritom vidí zákazník dlhšie ako ktorýkoľvek iný prvok identity. Logo je na materiáli raz, text zaplní zvyšok plochy. Keď prechádzame firemné materiály a dostaneme sa k typografii, opakujú sa tri nálezy: font bez zakúpenej licencie na web, chýbajúca slovenská diakritika v rezoch, ktoré nikto neotestoval, a text vo svetlosivej na bielej, ktorý sa na telefóne pri dennom svetle nedá prečítať. Prvý nález je právne riziko, druhý sa opravuje výmenou fontu vo všetkých materiáloch naraz. Tretí je najbanálnejší – a stojí za najväčším počtom neprečítaných ponúk.
Typografia značky je vopred určená sada fontov a pravidiel ich sadzby, ktorú firma používa vo všetkých materiáloch – od nadpisov na webe cez ponuky až po označenie prevádzky. Na rozdiel od bežnej sadzby sa nevyberá pre jeden projekt, ale na roky dopredu.
Práve preto je výber náročnejší, ako sa zdá: ten istý font musí obstáť v drobnom texte na telefóne aj vo veľkom formáte, v tlači aj na obrazovke. Prejdeme si, ako vybrať dvojicu fontov, čo pokrývajú licencie na fonty, kedy siahnuť po webfonte a kedy po systémovom fonte a ktoré parametre rozhodujú o čitateľnosti. Ako identitu udržať jednotnú naprieč kanálmi sme rozobrali v článku Vizuálna konzistencia značky.
Čo je typografia značky a čím sa líši od bežnej sadzby
Grafik pri jednorazovej zákazke vyberá font podľa témy. Pri ďalšej použije iný a je to v poriadku. Značka funguje opačne: rozhodnutie padne raz a platí, kým nepríde zmena identity. Preto sa font nevyberá podľa toho, čo sa páči, ale podľa toho, čo unesie. Ako to vyzerá, keď na to nikto nedozerá: obchodné oddelenie posiela ponuky v Calibri, lebo licencovaný font nemá na počítači nainštalovaný, marketing pracuje s druhým fontom zo šablóny a tlačiar s tretím, lebo mu nikto neposlal súbory. Zákazník to nepomenuje. Len má pocit, že každý materiál prišiel odinakiaľ.
Z toho vyplýva iný súbor kritérií. Rodina musí mať dosť rezov na to, aby sa dala postaviť hierarchia bez pomocných fontov. Musí obsahovať kompletnú diakritiku pre všetky jazyky, v ktorých komunikujete. A musí byť dostupná v licencii, ktorá pokryje počítač, web aj aplikácie. Estetika je až štvrté kritérium a v praxi býva najmenej sporné.
Terminologická poznámka, ktorá sa hodí pri komunikácii s dodávateľom: rodina písma je celok, napríklad Roboto. Rez je jej konkrétny variant, napríklad Roboto Bold. Font je súbor, ktorý si nainštalujete do počítača alebo nahráte na server – v bežnej reči sa font a písmo používajú zameniteľne a nie je to chyba. V pravidlách identity sa však určuje rodina a povolené rezy, nie jeden súbor. Typografia ako pojem zahŕňa celú prácu s písmom: výber rodín, rezov, veľkostí aj rozostupov.
Ako vybrať primárny a sekundárny font značky
Väčšina funkčných identít stojí na dvoch fontoch. Primárny nesie nadpisy a značkové prvky, sekundárny bežný text. Cieľom nie je efektný kontrast, ale jasné rozlíšenie úrovní informácie. Ak čitateľ na prvý pohľad nerozozná nadpis od textu, dvojica neplní úlohu.
Postup výberu fontov v štyroch krokoch
Najprv určite, čo má značka komunikovať a v akých formátoch. Potom vyberte sekundárny font, teda ten pre bežný text – je to náročnejšie rozhodnutie a určuje väčšinu plochy. K nemu vyberte primárny font s výraznejším charakterom. Nakoniec všetko otestujte v reálnych materiáloch, nie na vzorovej vete.
Bežná chyba je opačné poradie. Firma sa zamiluje do výrazného fontu pre nadpisy a k nemu dohľadá čokoľvek na text. Výsledok vyzerá dobre na jednej ukážke a rozpadne sa pri prvej dlhšej strane.
Ktorý typ písma sa hodí na čo
Nasledujúci prehľad je východiskový bod, nie predpis. Rozhoduje vždy konkrétna rodina a to, či sedí k ostatným prvkom identity.
| Typ písma | Ako pôsobí | Kde funguje najlepšie |
|---|---|---|
| Pätkové (serif) | Usadene, dôveryhodne, tradične | Nadpisy prémiových značiek, dlhé texty v tlači |
| Bezpätkové humanistické | Prístupne, zrozumiteľne | Bežný text na webe, rozhrania, formuláre |
| Bezpätkové geometrické | Presne, technicky, moderne | Nadpisy, značkové prvky, krátke texty |
| Slab serif (pätkové s hrubou pätkou) | Pevne, dôrazne | Nadpisy, priemyselné a stavebné odbory |
| Písankové a dekoratívne | Osobne, výnimočne | Jednotlivé akcenty, nikdy nie bežný text |
Konkrétne názvy pomôžu už pri prvom rozhovore s dizajnérom. Medzi humanistické bezpätkové patrí napríklad Open Sans alebo Source Sans, medzi geometrické Poppins či Montserrat, medzi pätkové vhodné na dlhý text Merriweather alebo Source Serif. Všetky sú dostupné pod otvorenou licenciou, takže si ich viete stiahnuť a otestovať na vlastnom texte skôr, než sa rozhodnete.
Praktické pravidlo pre dvojicu: kombinujte fonty s odlišnou stavbou, ale podobnou proporciou. Dva bezpätkové fonty s takmer rovnakou kresbou pôsobia ako chyba, nie ako zámer. Naopak, pätkový font v nadpise a humanistický bezpätkový v texte fungujú spoľahlivo.
Dvojica má skryté náklady, o ktorých sa pred podpisom nehovorí. Každý ďalší rez je ďalšia položka v licencii a ďalší súbor, ktorý si návštevník stiahne. Časť firiem sa preto vedome uspokojí s jednou rodinou, ktorá má dosť rezov na celú hierarchiu – vizuálne je to striedmejšie, prevádzkovo lacnejšie a nie je to chyba. Dva fonty dávajú zmysel vtedy, keď má značka niesť charakter aj v nadpise, nielen poriadok v texte.
Licencie na fonty a typografia značky: čo firma reálne získava
Nekupujete font, kupujete právo ho používať – a to v presne vymedzenom rozsahu. Je to najčastejší dôvod, prečo sa typografia značky rieši znovu po dvoch rokoch: firma zistí, že rez, ktorý má v tlačených materiáloch, nesmie použiť na webe.
| Typ licencie | Čo umožňuje | Ako sa spravidla spoplatňuje |
|---|---|---|
| Na počítač (desktop) | Sadzba v grafických programoch a dokumentoch | Podľa počtu pracovných miest |
| Webová | Vloženie súboru fontu na webstránku | Podľa počtu zobrazení stránok mesačne |
| Aplikačná | Použitie v mobilnej alebo desktopovej aplikácii | Podľa aplikácie alebo počtu inštalácií |
| Vložená (embedded) | Vloženie do dokumentu na distribúciu, napríklad do PDF | Samostatný dodatok k licencii |
| Otvorená (SIL OFL) | Komerčné použitie vrátane webu bez poplatku | Bezplatne, s podmienkou zachovania licencie |
Praktický dôsledok pre objednávateľa: držiteľom licencie má byť vaša firma, nie agentúra. Ak licenciu kúpi dodávateľ na seba, po skončení spolupráce stratíte právo používať vlastný font. Do preberacieho protokolu preto patrí doklad o licencii spolu so zdrojovými súbormi. Jednoduchšie to majú fonty pod otvorenou licenciou SIL OFL: nekupujete nič a nemusíte riešiť, kde ich smiete použiť. Platíte inak – po tej istej rodine siahli tisíce firiem a odlíšenie musíte postaviť na niečom inom.
Cenu licencie ženú nahor štyri položky: počet rezov, počet pracovných miest, mesačná návštevnosť webu a to, či sa font dostane aj do aplikácie alebo do dokumentu určeného na rozposielanie. Posledná položka prekvapí najčastejšie. Cenová ponuka odoslaná zákazníkovi je z pohľadu licencie distribuovaný dokument s vloženým fontom a časť predajcov na to má samostatný dodatok.
Kontrola je jednoduchá a stojí za to ju urobiť skôr, ako sa font dostane do pravidiel identity. Zistite, odkiaľ súbory pochádzajú, kto licenciu kúpil a na aký rozsah. Font stiahnutý z neznámeho zdroja je riziko, ktoré sa dá odstrániť za jedno popoludnie na začiatku projektu, ale nie po nasadení na stovky materiálov.
Webfonty verzus systémové fonty vo vizuálnej identite webu
Rozhodnutie o webfonte padá neskoro a väčšinou ho namiesto firmy urobí programátor. Pritom má priamy dopad na rýchlosť načítania aj na to, či bude web vyzerať rovnako pre všetkých.
| Kritérium | Webfont | Systémový font |
|---|---|---|
| Vernosť identity | Rovnaké písmo pre všetkých | Iné písmo podľa zariadenia |
| Vplyv na rýchlosť | Súbor navyše, treba ho optimalizovať | Žiadny, font je už v zariadení |
| Riziko posunu obsahu | Vyššie, treba riešiť náhradu | Žiadne |
| Licenčné náklady | Podľa rozsahu použitia | Žiadne |
| Vhodné pre | Značkové weby a nadpisy | Rozhrania, administrácie, obsahovo náročné weby |
V praxi sa osvedčuje kombinácia: webfont pre nadpisy, kde nesie charakter značky, a systémový font alebo verzia toho istého fontu s orezanou znakovou sadou pre bežný text. Rozdiel vo veľkosti načítaných dát býva zásadný, pretože každý ďalší rez znamená ďalší súbor.
Jedna vec sa pri webfontoch prehliada takmer vždy. Ak font načítavate priamo zo serverov Google Fonts, odchádza poskytovateľovi IP adresa každého návštevníka. Nemecký súd v takom postupe videl porušenie GDPR a od toho rozsudku sa v Európe fonty radšej ukladajú na vlastný server. Prakticky to znamená stiahnuť súbory, nahrať ich k webu a načítať z vlastnej domény. Vedľajší efekt je príjemný: odpadne spojenie na cudzí server, takže sa text objaví skôr.
Ako nasadiť font, aby nebrzdil web
Súbory obmedzte na rezy, ktoré naozaj používate. Formát woff2 je štandard a znamená najmenšiu veľkosť. Znakovú sadu orežte na jazyky, v ktorých komunikujete, ale nikdy nie na úkor diakritiky. Kľúčové súbory načítajte prednostne a nastavte zobrazovanie počas načítania tak, aby bol text čitateľný okamžite.
Pri troch a viacerých rezoch sa oplatí poobzerať sa po variabilnom fonte. Jeden súbor v ňom obsahuje celú škálu hrúbok a vyjde menší ako tri samostatné rezy. Pri dvoch rezoch to platí naopak – variabilný súbor nesie aj to, čo nikdy nepoužijete, a je väčší ako dva statické. Dá sa to overiť za desať minút porovnaním veľkosti súborov, no takmer nikto to neurobí.
Nesprávne nasadený font spoznáte tak, že návštevníkovi poskočí text pod prstom práve vo chvíli, keď chce klepnúť na tlačidlo. Odborne je to posun rozloženia, meria sa metrikou CLS. Obchodne je to stránka, ktorá pôsobí nedorobene, a zákazník, ktorý klikol inam, ako chcel. Súvislosti sme rozobrali v článku Core Web Vitals. Pri tvorbe webstránok preto typografiu riešime spolu s výkonom, nie až po spustení.
Čitateľnosť písma na obrazovke: parametre typografie, ktoré rozhodujú
Ukážka na veľkom monitore nepovie nič o tom, ako sa ten istý font číta na telefóne. Rozhodujú štyri parametre a všetky sa dajú overiť ešte pred rozhodnutím.
| Parameter | Odporúčané nastavenie | Čo sa stane pri podcenení |
|---|---|---|
| Veľkosť bežného textu | Minimálne 16 pixelov na mobile | Zákazník text zväčšuje alebo ho preskočí |
| Riadkovanie | Približne 1,5-násobok veľkosti písma | Riadky splývajú, text sa ťažko sleduje |
| Dĺžka riadka | Približne 50 až 75 znakov | Oko stráca začiatok nasledujúceho riadka |
| Kontrast textu a pozadia | Aspoň 4,5:1 podľa WCAG 2.1 pre bežný text | Text je nečitateľný pri slnku a pre slabozrakých |
Posledný parameter sa neriadi číslom: prestrkávanie, teda medzera medzi znakmi. Vo veľkých nadpisoch sa mierne uberá, aby písmená držali spolu, v drobnom texte a vo verzálkach naopak pridáva. Je to jediná položka zo zoznamu, ktorú dizajnér doladí okom – ostatné majú hranicu, ktorú viete odmerať aj bez neho.
Kontrast má oporu v norme. Odporúčania WCAG 2.1 od konsorcia W3C stanovujú pre bežný text minimálny pomer jasu 4,5:1 a pre veľký text 3:1. Svetlosivý text na bielom pozadí túto hranicu takmer nikdy nespĺňa, hoci v ukážke identity vyzerá elegantne.
Posledné kritérium je výška malých písmen bez horných a dolných dotiahnutí. Odborne sa jej hovorí x-výška a ten názov sa hodí poznať, keď o výbere hovoríte s dizajnérom. Rodiny s nízkou x-výškou pôsobia v tlači vzdušne, no pri drobnej veľkosti na displeji sa čítajú horšie. Ak má značka komunikovať prevažne digitálne, je to jedno z prvých kritérií pri výbere – a rieši sa spolu s návrhom rozhrania, nie oddelene.
Najčastejšie chyby pri výbere fontov značky
Tieto štyri chyby vidíme opakovane a všetky sa dajú odchytiť ešte pred zápisom do pravidiel identity. Prvá z nich je jediná, ktorá sa nedá vyriešiť nastavením: chýbajúca diakritika znamená iný font, a iný font znamená prekresliť všetko.
- Font bez slovenskej diakritiky. Rodina má stovky znakov, ale chýbajú jej ď, ľ, ĺ alebo ŕ. Chyba sa objaví až pri prvom texte a rieši sa výmenou fontu, teda prekreslením všetkých materiálov.
- Príliš málo rezov. Hierarchia postavená na dvoch hrúbkach nestačí na web ani na ponuky. Pri výbere overte, či rodina obsahuje aspoň bežný, polotučný a tučný rez vrátane kurzívy.
- Výber podľa ukážkovej vety. Krátky nadpis vyzerá dobre skoro v každom fonte. Testujte celý odsek, tabuľku s číslami a formulár.
- Font bez väzby na zvyšok identity. Geometrický font k organickému logotypu pôsobí, akoby sa stretli dve značky. Font sa vyberá spolu s logom a farbami, nie po nich.
Font je zároveň prvok, ktorý sa najčastejšie stráca pri odovzdaní. Do pravidiel identity preto patrí nielen názov rodiny, ale aj povolené rezy, presné veľkosti a riadkovanie pre jednotlivé úrovne, záložné fonty a odkaz na to, odkiaľ sa súbory sťahujú. Kompletnú štruktúru dokumentu rozoberáme v článku Brand manual: Čo obsahuje a ako ho správne používať.
Kedy výber typografie zveriť agentúre
Ak máte hotovú identitu a hľadáte len náhradu za jeden font, zvládnete to interne. Náročnejšie je to vtedy, keď font vzniká spolu so značkou, keď má fungovať vo viacerých jazykoch alebo keď firma prechádza na nový web a rieši výkon aj sadzbu naraz.
Prínos externého pohľadu je hlavne v tom, že vyradí možnosti skôr, ako sa do nich firma zamiluje. Overia sa licencie, diakritika, počet rezov a správanie fontu v drobnej veľkosti, a až potom sa rozhoduje o charaktere. Poradie je nudné, no ušetrí druhé kolo výberu o rok neskôr, keď sa zistí, že rez pre web sa musí dokúpiť alebo že font nemá kurzívu.
Koľko to trvá? Keď už máte logo a farby a hľadá sa k nim dvojica fontov, počítajte s jedným až dvoma týždňami vrátane testovania a vybavenia licencií. Ak typografia vzniká spolu s celou identitou, samostatný termín nedáva zmysel – rozhodnutie padne až s logom a uzatvárať ho skôr je zbytočné.
Pri projekte pre KOCR Severovýchod Slovenska sme font vyberali ako súčasť identity a testovali ho na formátoch od drobnej ikony po veľkoformátové nosiče. Ďalšie realizácie sú v našich referenciách, postup pri tvorbe značky popisuje článok Proces tvorby loga a širší kontext služby nájdete v sekcii grafický dizajn.
Časté otázky o typografii značky
Koľko písiem má mať firemná identita?
Dve. Primárne písmo pre nadpisy a značkové prvky, sekundárne pre bežný text. Tretie sa pridáva len na osobitný účel, napríklad na čísla v tabuľkách. Väčší počet písiem nezvyšuje výraznosť, len znásobuje počet rozhodnutí pri každom novom materiáli a komplikuje licencie.
Môžeme použiť bezplatné písma z Google Fonts?
Áno, sú licencované aj na komerčné použitie vrátane webu. Nevýhodou je rozšírenosť: rovnaké písmo používajú tisíce webov, takže samo osebe nevytvorí odlíšenie. Pre väčšinu firiem sú dostatočné, ak sa odlíšenie postaví na hierarchii, farbe a spôsobe sadzby.
Aký je rozdiel medzi počítačovou a webovou licenciou písma?
Počítačová licencia umožňuje sadzbu v grafických programoch a v dokumentoch. Webová licencia umožňuje vložiť súbor písma na webstránku a býva odstupňovaná podľa počtu zobrazení stránok mesačne. Sú to samostatné produkty a pre aplikácie sa kupuje ešte tretia licencia.
Ako otestujeme, či je písmo čitateľné na mobile?
Otvorte reálny text v reálnej veľkosti na telefóne, nie ukážku v grafickom programe. Sledujte výšku malých písmen, rozlíšiteľnosť dvojíc znakov ako I, l a 1, a či písmo obsahuje kompletnú slovenskú diakritiku vrátane znakov ď, ľ, ĺ a ŕ. Časť inak kvalitných písiem tieto znaky nemá.
Čo je záložné písmo a prečo naň dbať?
Záložné písmo je to, ktoré prehliadač zobrazí, kým sa webfont načíta alebo ak zlyhá. Ak má výrazne odlišné proporcie, po načítaní sa obsah preskupí a stránke sa zhorší metrika CLS. Riešením je vybrať systémové písmo s podobnou šírkou znakov a doladiť ho parametrami náhrady.
Kedy má zmysel zakúpiť platené písmo namiesto bezplatného?
Keď potrebujete rezy, ktoré bezplatné rodiny nemajú, keď staviate odlíšenie priamo na tvare písma alebo keď má značka fungovať vo viacerých jazykových sadách. Rozhodnutie je ekonomické: licencia je jednorazový alebo periodický náklad, prekresľovanie identity po dvoch rokoch je drahšie.
Typografia značky sa vyberá na roky, nie na jednu kampaň
Zhrnuté prakticky: vyberte dva fonty, začnite tým pre bežný text, overte diakritiku a rezy, kúpte licencie na svoje meno a otestujte sadzbu na telefóne v reálnom texte. Týchto päť krokov odfiltruje väčšinu problémov, ktoré sa inak riešia až prekresľovaním materiálov.
Rozhodnite sa raz a poriadne. Font zákazník vidí pri každom kontakte so značkou – v ponuke, na faktúre aj v pätke e-mailu. A zo všetkých prvkov identity sa mení najťažšie: výmena fontu nie je úprava, je to prekreslenie všetkého, kde je text.
Ak si nie ste istí, či existujúca sada fontov ešte slúži, začnite kontrolou licencií a čitateľnosti na telefóne. Obe zistenia spolu rozhodnú, či stačí doladiť sadzbu, alebo je na mieste výber nových fontov.
Riešite výber fontov pre novú značku alebo revíziu existujúcej typografie? Ozvite sa nám – prejdeme si rozsah, kanály a licencie a pripravíme ponuku na mieru.
