PIX UX: Typografie, aneb na písmu záleží | Pixman.cz
KONTAKT
Přejít na menu

PIX UX: Typografie, aneb na písmu záleží

PIX UX: Typografie, aneb na písmu záleží

Volba písma pro web či aplikaci se může zdát jako triviální téma, na kterém není co řešit. A je to pravda – pokud vyberete ten správný font.

Je písmo na vašich stránkách dobře čitelné? Pomáhá uživatelům v orientaci v obsahu? Nezpomaluje načítání webu? Možná jste měli pocit, že otázkami kolem typografie se při vývoji webu nemusíte moc zdržovat a prostě "tam dáte nějaké jednoduché moderní písmo". Je ale pár věcí, které by bylo dobré si předem rozmyslet.

Základní typy písma 

Písmo se dá rozlišovat podle mnoha parametrů, některé jsou optické, jiné technické. Na typologii písma se určitě dá postavit slušná vědecká kariéra, pro běžné účely stačí základní rozdělení na fonty patkové, bezpatkové a ručně psané.

Patková písma

Například Times New Roman. Patková písma jsou elegantní a konzervativní. Ve webdesignu se dnes objevují zřídka, mnohem častěji je najdete v tiskovinách. Názory na čitelnost se různí, podle některých designérů je patkové písmo hůř čitelné než bezpatkové, podle jiných jsou staletí knižní sazby patkovými písmy dostatečným důkazem, že se tyto fonty čtou dobře. Patková písma jsou vhodná pro blog, noviny, případně stránky institucí, které se profilují jako konzervativní nebo chtějí zvýraznit tradici a historii. Protože se nepoužívají moc často, mohou čtenáře zaujmout jako nadpisové písmo vašich stránek.

Bezpatková písma

Například Arial. Bezpatková písma jsou moderní a minimalistická. Přestože existují už víc než 200 let, v designu reprezentují moderní přístup, častokrát v kombinaci se zaoblenými tahy nebo netradičními tvary jednotlivých písmen. Vaše stránky pravděpodobně stojí na bezpatkových fontech, možná dokonce na jejich kombinaci. Jsou natolik univerzální, že mezi nimi najdete konzervativní i hravé varianty, tvary přísně geometrické i organické.

Ručně psaná písma

Například Lobster. Ručně psaná písma jsou originální a výrazná. Abych byl přesný, v sazbě se o ručně psaná písma nejedná, protože konkrétní písmena jsou na všech místech identická, což se sebelepšímu písaři nepodaří. Jde o fonty, které jsou navrženy tak, aby vypadaly jako ručně psané. Používají se výjimečně a zpravidla jen pro dostatečně velké nadpisy, čtou se totiž ze všech typů písma nejhůř. Na druhou stranu jsou ručně psané nápisy zajímavé a pro některá témata se vyloženě hodí: zábava, koníčky, neformální nebo slavnostní akce, případně produkty pro děti.

Velikost písma

Písmo musí být čitelné, proto je dobré minimální velikost otestovat v podmínkách, které nejsou ideální: na horším monitoru, na telefonu při jízdě v tramvaji, za chůze, nebo v časovém presu. Dnes je přístupnost nedílnou součástí webdesignu a typografie v ní hraje velkou roli. Testování se hodí i proto, že se jednotlivá písma přirozeně liší a velikost 14 bodů může být v jednom fontu čitelná, zatímco v jiném už ne.

Nadpisová písma jsou v tomto ještě náročnější, protože kromě minimální velikosti musí být v různých úrovních nadpisů dostatečně výrazná, aby stránka měla jasnou optickou hierarchii. V ideálním případě by měl návštěvník pochopit základní obsah a strukturu sdělení jen z nadpisů. Z toho důvodu často volím nadpisové písmo jiné, než to, které používám pro běžnou sazbu. Kontrasty pomáhají přehlednosti a zlepšují orientaci na stránce. Nadpisový font může vycházet z logotypu, přinejmenším v první nebo druhé úrovni (H1, H2). Tím dojde k přirozenému prolnutí značky s obsahem webu.

Rychlost načítání stránek

Použité písmo bude mít v každém případě vliv na rychlost načítání vašich stránek. Když použijete jedno písmo a to bude navíc systémové, bude dopad nejmenší. Systémová písma tvoří omezenou sadu několika fontů, které máte nainstalované ve svém operačním systému a prohlížeč je tedy nemusí odnikud stahovat. Jsou to písma jako Arial, Times New Roman nebo Segoe UI. Tyto fonty ale slouží skutečně jako základ, je tedy skoro jisté, že vám grafik nabídne lépe navržená a zajímavější písma. Naštěstí existují technická řešení, která omezují dopad na rychlost načítání na minimum i u fontů, které nejsou systémové. Na tom se buď domluvte s programátorem, nebo si vyberte dodavatele, který na to bude myslet za vás. Třeba Pixmany :-)

Licence

Bohužel neexistuje žádný obecný návod, jak rozlišovat licence jednotlivých fontů. Každý designér nebo studio toto téma řeší po svém – mají různé formulace licenčního ujednání a různé podmínky použití. Cena se může lišit i podle toho, zda hledáte písmo čistě pro použití na webu, nebo s ním chcete sázet i propagační materiály, případně logotyp. Existují výjimečná písma, která se vyplatí si pořídit, protože vyjadřují vaši značku a odliší ji od konkurence. U fontů s volnou licencí počítejte s tím, že je používají miliony dalších stránek.

Kde hledat?

Špatně zvolené písmo může vašim stránkám zavařit, proto doporučuji čerpat z důvěryhodných zdrojů a používat prověřená a profesionálně navržená písma. Skvělým zdrojem je Google Fonts. Pokud máte předplacené aplikací od Adobe, můžete využít rozsáhlou databázi Adobe Fonts. Zárukou kvality jsou také autorská písma profesionálních typografů nebo designérských studií, řada z nich kromě vlastních fontů nabízí i úpravu cizích písem, typicky přidání diakritiky nebo rozšíření znakové sady.

Na internetu ale najdete mnoho amatérských písem, která jsou často velmi odvážná a originální, v praxi ale mohou být špatně čitelná nebo nemusí obsahovat některé důležité znaky. Pokud vás nějaké podobné písmo zaujme, nechte si ho nejdřív prověřit svým designerem, abyste po implementaci na nový web nebyli nepříjemně překvapeni.

Na závěr

Výběr písma je někdy citlivá záležitost, jindy návrh projde na první dobrou. Je dobré si už na začátku říct, co od fontu očekáváte a jak výraznou roli má na webu hrát. Lidé se často soustředí na ikony nebo fotky a písmu nepřikládají takovou váhu. Přitom texty zabírají na stránce velkou část prostoru, s nimi návštěvník stráví nejvíc času a z nich bude čerpat většinu informací. Nakonec je to možná právě písmo, na čem záleží nejvíc.

  

Autorský článek:

 

Honza Mikulec
UI / UX designer

Jsem hlasem vašich zákazníků a udělám všechno pro to, aby se jim váš web nebo aplikace dobře používaly. Pomůžu vám projekt vymyslet, připravím jeho architekturu a když budete chtít, tak vám ho i nakreslím. Jsem zastánce Design Thinking metodiky, která se mi v praxi mnohokrát osvědčila jak u malých úkolů, tak u projektů skutečně složitých a komplexních. Jako designer tíhnu k minimalismu, ale pokud váš zákazník očekává diskotéku, zvládnu i to. Určitě.

Další Honzovy PIX UX články můžete prozkoumat na těchto odkazech níže:

PIX UX: Když za vás mluví zákazník aneb social proof

PIX UX: Responzivní a ještě responzivnější stránky

PIX UX: Spuštěním to nekončí

PIX UX: Psychologie barev

PIX UX: Jak voní informace

PIX UX: Přístupnost webu jako příležitost

PIX UX: Temné UX

PIX UX: Persony

 

Zaujal vás článek? Hledáte nejvhodnější písmo? Honza je tu pro Vás a rád poradí.

Napište nám!