Tloušťka čar: Kdy použít 1px, 2px nebo 3px

Proč záleží na tloušťce čáry

Mnoho návrhářů se na tloušťku čáry zapomene podívat. Myslí si, že to není až tak důležité. Ale to se mýlí. Tloušťka čáry ovlivňuje čitelnost, rozpoznatelnost a celkový dojem z ikony víc, než si myslíte.

Když používáte příliš tenkou čáru — třeba 0,5px — ikona zmizí na displeji. Když je příliš tlustá — 4px a víc — přestane vypadat elegantně a bude připomínat blob. Musíte najít ten správný bod uprostřed.

Tady se to stává zajímavým. Není to jen volba čísla. Tloušťka čáry závisí na několika faktorech — na velikosti ikony, na typu displeje, na kontextu, kde se ikona používá. Musíte myslet na to, jak budou vaše ikony vypadat v různých situacích.

1px — pro webové interface a malé displeje

1px čára se hodí pro malé ikony na webech. Řekli bychom, že pro ikony od 16px do 24px je 1px ideální volba. Vypadá elegantně, není to příliš tenké a přesto si zachová detail.

Problém je ale na mobilech. Když se podíváte na ikonu 1px na mobilu v rozlišení 1440p, tak to bude trvat věky, než si uvědomíte, že tam něco je. Proto se v mobilních aplikacích 1px téměř nepoužívá.

Kde ji ale vidíte často? V UI framework Google Material. Jejich ikony jsou tenké, elegantní a v nástrojích na webu vypadají profesionálně. Je to proto, že ty ikony jsou téměř vždy v prostředí s dostatečným kontrastem.

2px — zlatá střední cesta

2px je nejčastěji používaná tloušťka. A máte důvod — prostě funguje. Je to kompromis, který vyhovuje skoro všem situacím.

2px čára se hodí pro ikony od 20px do 48px. Vypadá moderně, je čitelná na různých displejích a na mobilech to není problém. Když vidíte iOS ikony nebo Material Design 2, velká část jich používá právě 2px.

Proč? Protože 2px je dostatečně vidět a zároveň to není příliš agresivní. Ikona s 2px čárou vypadá spolehlivě. Není to příliš lehké ani příliš těžké.

Pokud si nejste jistí, kterou tloušťku zvolit, začněte s 2px. Téměř vždycky to vyjde.

3px — pro větší ikony a tiskové materiály

3px se používá pro větší ikony — od 48px výš. Když máte ikonu 64px nebo 80px, tak 2px by začínala vypadat příliš tenká. Tady přichází na řadu 3px.

Tisknuté materiály? I tam se 3px hodí. Když tiskujete ikony na plakáty, na obaly, na tričko — tady potřebujete trochu více hmoty. Tisk není jako pixel na displeji. Rozmazávání se chová jinak.

Ale pozor — když budete mít ikonu 32px a dáte jí 3px čáru, bude vypadat jako kapka. Tloušťka a velikost musí být v poměru. To je důležité zapamatovat si.

Jak to testovat v praxi

Teorie je krásná, ale v praxi? Musíte si to vyzkoušet. Když máte ikonu, kterou chcete designovat, nakreslete si ji s různými tloušťkami — s 1px, 2px a 3px. Pak si ji zobrazte na různých displejích. Mobilní telefon, tablet, monitor, tiskárna.

Jak to vypadá v 16px? A jak v 48px? Zkuste ji na bílém pozadí a na tmavém. Zkuste ji na aplikaci a na webu. Rozdíly vám budou jasné hned.

Jeden trik — když máte pochybnosti, zvolte si tloušťku, kterou vidíte u konkurentů. Když Apple používá 2px pro svoje systémové ikony, není to náhoda. Je to proto, že 2px funguje na všech jejich zařízeních a všech velikostech.

Závěr — není to jen číslo

Tloušťka čáry není jen technická specifikace. Je to rozhodnutí, které ovlivňuje to, jak se vaše ikony budou cítit. Zda budou vypadat elegantně či robustně, moderně či klasicky, jednoduše či komplexně.

Pamatujte si: 1px pro malé ikony a webové interface, 2px pro všechno ostatní a 3px pro velké ikony a tisk. Ale nejdůležitější je vyzkoušet si to a vidět, co vám sedí.

Když budete stavět svůj vlastní systém ikon, nespěchejte s výběrem. Udělejte si test a sejděte si čas. Tloušťka čáry je základní prvek, který vám zůstane v systému navěky.