Na typografii v UI nezáleží. Nebo ano?

Byly doby, kdy jsem míval problémy s výběrem správného písma. Pokaždé, když jsem začal navrhovat, jsem neustále měnil fonty, protože se mi zdály škaredé a neurovnané. Myslel jsem, že je chyba v daném písmu. Měl jsem chuť celý návrh hodit do koše. Něco bylo špatně a nevěděl jsem přesně co. Pak jsem si od jistého autora přečetl zajímavou myšlenku. Od té doby se na výběr fontů dívám jinak. Víte, co to bylo?

Myšlenkou se řídím dodnes. Zjednodušeně zní: „Na výběru písma nezáleží“. Vytrženo z kontextu.

Písmo totiž v návrhu webu nebo aplikace hraje velkou roli. Navazuje atmosféru a podporuje značku. Já mířím ale jinam. Neřeším otázku brandu nebo jakou emoci font vyvolá. Řeším to, abyste si mohli vybrat libovolný font a docílit toho, aby texty vypadaly vždy urovnaně a čitelně.

Už nevím, co to bylo za knihu nebo článek, kde jsem se o myšlence dozvěděl. Autor popisoval své studium typografie. Jeho učitel mu zadal za úkol vytvořit textový grafický návrh. Podmínkou bylo použít pouze jedno jediné písmo, které učitel vybral. Cílem tohoto cvičení bylo naučit se pracovat s písmem, které je dáno, a vytvořit ladný design pomocí typografických pravidel.

Jako designer máte v rukou typografické zbraně

Když nám písmo neladí a nezdá se nám, není často chyba v písmu, ale v nás. Když budete znát základní typografické principy a budete vědět kdy a jak je použít, získáte mnohem větší sebejistotu v navrhování textů.

Toto není lekce na detailní vysvětlení typografie, ale spíš vysvětlění toho, jak je pro návrh UI důležité některá pravidla typografie znát. Tedy aspoň ty, se kterými pracuje většina UI/UX designerů. Podívejme se na to, co všechno návrh textů ovlivňuje.

Velikost písma

Jasný. Na tom není co vysvětlovat. Podle situace jistě zvládnete rozhodnout, jak má daný text být velký.

Zajistěte uživateli dostatečnou velikost textů. Pokud je text příliš malý, přestává být čitelný, protože hrany písmen a mezery mezi nimi jsou hůře rozpoznatelné. Nenechte uživatele mžourat očima. Myslete i na starší uživatele. Na texty o velikosti pod 10 px zapomeňte. Osobně většinou nepoužívám velikost písma menší než 12 px.

Mnohem lépe se čtou větší texty. Ale pozor i přehnaně obrovské texty mohou zabrat více času k přečtení.

Výška řádku (line-height)

Na výšce řádku záleží hodně. Nejčastější chyba, kterou ať už na webech nebo i v příchozích emailech vidím, je špatně nastavené řádkování. To, jak jsou řádky od sebe daleko, rozhoduje, jak bude text čitelný. Pokud čtete ten stejný řádek textu stále dokola, zřejmě bude problém ve výšce řádku. Jakmile totiž dojdete na jeho konec, špatně se zorientujete a budete hledat, který řádek je následující. Řádkování je nastaveno na příliš nízkou hodnotu.

Pokud nemáte odhad, jak velkou výšku řádku nastavit, použijte obecné doporučení a vynásobte velikost textu hodnotou 1,5. Pokud máte například text o velikosti 16 px, nastavte jeho výšku řádku na 24 px.

Spíše se ale naučte výšku řádku u daného textu určit na míru. Je dobré se podívat, jak s výškou řádku pracují vaši kolegové. Dá se to naučit cvikem. Nesmí být moc velká a ani moc malá. Zkuste začít na menší hodnotě a postupně ji zvyšujte. Text si neustále čtete dokola po řádcích. Až bude pro vás nejpohodlnější, nejrychlejší a nejefektivnější daný text přečíst a budete se bez problému pohybovat z řádku na řádek, aniž byste se spletli, je to ta správná hodnota výšky řádku.

Pozor, nepřežeňte to, protože pak by řádky vypadaly jako samostatné jednotky místo jednoho bloku textu.

Při určování hodnoty výšky řádku se řiďte i těmito pravidly:

1) Pokud jsou řádky delší, udělejte větší řádkování

Když čteme dlouhý řádek a oči doputují k pravému okraji textu, jsme nuceni udělat velký skok na další řádek. Když řádkování zvětšíte, ulehčíte očím práci při hledání dalšího řádku.

Naopak u textů s kratšími řádky tak moc očima nepobíháme sem a tam a můžeme si dovolit řádkování udělat o něco menší.

2) Pokud je text velmi malý, udělejte řádkování větší

V případě, že pracujete s malými texty, písmena jsou pro oči prťavá. Hůře je přeostřujeme a špatně rozeznáváme řádky. Proto je dobré řádkování zvětšit.

Naopak podobně u velkých textů (např. nadpisů), kde písmena lehce rozeznáme, si můžeme dovolit řádkování udělat menší.

Prostrkání písmen

Prostrkání písmen (v CSS vlastnost letter-spacing) se používá tehdy, je-li text špatně čitelný. Neexistuje konkrétní číslo, na které ho nastavit. Lepší je nechat prostrkání písmen na nule než ho naslepo měnit. Já si text vždy oddálím a snažím se ho přečíst z dálky. Pokud s tím mám problém, prostrkání písmen zvětším.

Podstatné je prostrkání velkých písmen nepřehnat. Pokud bude prostrkání písmen moc velké, text nebude jednotný a akorát ho roztříštíme přijdeme o jeho čitelnost.

Někdy je dobré prostrkání písmen zmenšit v situacích, kdy potřebujete ušetřit místo. Například v nějakém blogu u nadpisů článků, které bývají kolikrát dlouhé. Nesmíte tím ale pokazit jejich čitelnost.

Určitě jste hodněkrát viděli i „okrasný“ text ve verzálkách (velká písmena). U těch je dobré prostrkání písmen zvětšit. Narozdíl od malých písmen, která jsou více vizuálně odlišná a lépe se opticky oddělují, jsou velká písmena stejně vysoká a více podobná. Proto mezi nimi musíme udělat více prostoru pro lepší odlišení.

Vždy by se podle mě prostrkání písmen mělo použít pouze odůvodněně. Vždy se zamyslete, zda to má smysl a zda to zlepší čitelnost textu.

Řez písma

Pomocí řezu písma jste schopni nejen zvýrazňovat texty, ale také zlepšit jejich čitelnost například na pozadích, kde není text příliš vidět. Pokud jde malý text špatně vidět, stačí udělat písmo tučnější. Pokud bude ale malé písmo tučnější, zvažte i větší prostrkání písmen. Písmena se totiž opticky přiblíží a text by se hůře četl.

Barva písma

Barvou písma odlišujeme texty ať už kvůli vizuální nebo hierarchické stránce. Barvou můžeme texty utlumit nebo naopak zvýraznit.

Čtěte si text stále dokola a kriticky hodnoťte, zda je čtení pohodlné. Kdy je čas zbystřit a zaměřit se na barvu textu?

• Když vás bolí oči, protože text moc svítí.
• Když stále přeostřujete kvůli velkým barevným šokům.
• Když je text příliš světlý a mžouráte a není vám to pohodlné.
  

Počet znaků na řádek

Další častou chybou na webech nebo v aplikacích je délka jednoho řádku textu. Náročné je, když musíte číst dlouhé řádky textu, musíte otáčet hlavu a složitě se vracet na následující řádek. Dlouhé řádky textu se nejen špatně čtou, ale vypadají amatérsky.‍

Doporučuje se dodržovat délka řádku do cca 75 znaků (včetně písmen, mezer, interpunkce).

Pokud je šířka vašeho webu větší, neznamená to, že musíte celou šíři využít. Stačí jen omezit délku textů. V CSS jde o vlastnost max-width.

Zarovnání textu

Se zarovnáním textů by se nemělo bezhlavě experimentovat. Existují 4 možnosti, jak texty zarovnávat.

Zarovnání doleva

Nejčastější a nejpřirozenější zarovnání textu, kterým většinou začínáme a kterým nic nezkazíme. Text je dobře čitelný, protože máme začátky řádků pěkně srovnané a nemusíme hledat jejich začátky.

Zarovnání doprava

Použijte pro estetické účely. Na toto zarovnání pozor. Použijte ho uvědoměle. Vzhledem k tomu, že začátky řádků jsou neuspořádáné, snižuje se čitelnost. Hledat místo, kde začíná řádek není moc pohodlné. Zarovnání doprava se hodí spíše pro krátké texty s menším počtem řádků. Použít ho můžete i pro zarovnání čísel. Ta se v tomto případě lépe porovnávají.

Zarovnání na střed

Podobná situace jako u zarovnání doprava. Použijte pro nadpisy nebo texty, které mají do cca 3 řádků. Pokud bude řádků více, opět nastává problém s hledáním začátku dalšího řádku. V těchto případech je lepší sáhnout po obyčejném zarovnání doleva.

Zarovnání do bloku

Na webech či v aplikacích se moc nevyužívá. Jde o formát hodící se spíše do tiskovin. Pokud ho budete chtít z nějakého důvodu použít, je lepší, když použijete zalomení slov s pomlčkami, jinak by v textech začly mezi slovy vznikat nepěkné mezery.

Velká písmena (verzálky)

Jednou z chyb je „zvýraznění“ textu zvětšením všech písmen. Pro běžný dlouhý text to nikdy nepoužívejte, protože velká písmena se špatně rozlišují a hůře čtou.

Velká písmena se ovšem hodí na velmi krátké popisky/texty/nadpisy, které chcete vizuálně odlišit nebo ozvláštnit. Nezapomeňte ale zvětšit prostrkání písmen pro lepší čitelnost.

Důležitá je kombinace typografických zbraní

Přehled toho, s čím byste se měli naučit pracovat máte za sebou. Teď už jen do boje. Vaším úkolem je vhodně nakombinovat a nastavit typografické vlastnosti a principy tak, aby jakýkoli text v libovolném fontu vypadal čitelně, přehledně a profesionálně.

Text upravujte postupně podle priority typografických zbraní

Při navrhování textu není dobré měnit jeho vlastnosti na přeskáčku a zkoušet co a jak bude vypadat. Běžte na to systematicky.

1) Nachystejte si reálný obsah

Proč je lepší mít při grafickém návrhu UI již reálné texty? „Lorem ipsum“ je fajn, ale… V momentě, kdy například nasadíte reálný text v češtině, zjistíte, že se text chová jinak. Obsahuje navíc spojky, předložky a jinak se zalamuje.

Dále je reálný obsah dobrý k tomu, že víte přesně, jak bude dlouhý a na kolik řádků vyjde. Až podle toho upravujte další parametry jako velikost textu, řádkování, maximální šířku textového bloku, apod.

2) Vyberte velikost textu

Nejprve si řekněte, o jaký text se v rámci UI jedná. Jak moc je důležitý z hlediska významu obsahu? Jde o nadpis? Úvodní text? Méně důležitý vysvětlovací text? Rozhodněte se, jak bude text velký a kolik zabere v rozhraní místa.

3) Omezte délku řádků

Dále určete, jak bude textový blok široký. Pohlídejte si, aby řádky textu nebyly příliš dlouhé (do cca 75 znaků).

4) Nastavte řádkování

Na základě velikosti textu a délky řádků definujte hodnotu řádkování (mezery mezi řádky).

5) Rozhodněte, jak bude text zarovnán

Podle toho, jakou má mít text funkci a toho, kolik má řádků, rozhodněte, jakým způsobem ho zarovnáte (doleva, doprava, na střed nebo do bloku).

6) Vizuálně zhodnoťte text a definujte barvu, řez písma a prostrkání písmen

Mezi texty a dalšími prvky UI je potřeba vytvořit vizuální balanc. Vhled textů uživatelského rozhraní musí být pro oči co nejpříjemnější. Toho můžete docílit kombinací vhodné barvy textu a řezu písma.

Pokud například chcete získat opticky tmavší text, tak mu buď nastavíte tmavší barvu nebo použijete tučnější řez písma. Případně obojí. Opačně to je se světlováním textu.

V momentě, kdy máte vybraný odstín barvy textu a vhodný řez písma, zkontrolujte, jestli je text čitelný i z dálky a zda není potřeba zvětšit či zmenšit prostrkání písmen nebo doladit velikost řádkování.

Vyberte si vhodný font

Víte, proč se s některými fonty pracuje lépe a jsou hezčí? Protože jsou jednoduše lépe navržené. Proto se za ně platí drahé licence. Jsou uzpůsobeny tak, aby se do práce s nimi nemuselo příliš zasahovat.

Pro běžný základní text na web nebo aplikaci doporučuji vybrat takový font, který obsahuje dostatečné množství řezů (třeba více jak 5). Značí to, že se fontu designeři věnovali a dali si na něm záležet.

Nakonec když na to dojde, je úplně jedno, jaký font si vyberete. Důležité je, jak s ním naložíte.

UI udělejte přístupné pro všechny

Pohlídejte si kontrast mezi barvou textu a pozadím. Položte si otázky, zda je text dostatečně viditelný na pozadí.

Myslete na to, v jakém kontrastu a barvách uvidí vaše rozhraní lidé se zrakovým postižením. Proto svůj návrh otestujte v nějakém vhodném nástroji.

Pokud si chcete zkontrolovat třeba kontrast textů, můžete zkusit tento nástroj.

Jestli používáte pro návrh UI program Sketch, možný by vás mohl zajímat tento článek s odkazem na výborný plugin, který kontroluje kontrast a simuluje poruchy zraku.

Návrhu textů ve vašem UI se opravdu věnujte

Texty na webu nebo v aplikaci jsou hodně důležité, proto je dobré na ně klást důraz. Většinou totiž tvoří hlavní obsah. Uživatelé často tento obsah jen skenují. Skáčou řádek po řádku, odstavec po odstavci tam a zpět. Vy jim to musíte usnadnit. Pokud se jim obsah bude špatně číst, přijdete o ně. Proto myslete na to, aby vaše texty vypadaly co nejlépe.