cz
cz
Zpět

Typografie u mobilních webů

Design | Mobil | Web - 21st Březen 2016
Napsal/a Ondřej Kohel

Práce s písmem obecně patří mezi největší výzvu, se kterou si musí grafik umět poradit. Dobře provedená typorafie udělá váš web pro uživatele mnohem přitažlivějším, a proto bychom měli vždy mít na paměti několik zásadních bodů.

Čitelnost

Na slovech záleží. Jestliže se uživatel nedozví snadnou cestou naše sdělení, typografie nefunguje. Příliš veliké písmo bude čtenáře rozptylovat, malý text zase může přehlédnout nebo ho považovat za nedůležitý.
Volíme snadno rozpoznatelné, obvykle bezserifové písmo, kurzívě se snažíme vyhnout, nemusela by se dobře zobrazovat. Pro maximální čitelnost se snažme zbytečně nekombinovat více stylů zarovnání.
Jestliže se na desktopových webech snažíme mít okolo 70-ti znaků znaků na řádek, u mobilních webů by jsme měli počet snížit na polovinu.

 

mobilní web

mobilní web

Kontrast

Lidé dnes sledují svoje smartphony prakticky všude, za různých světelných podmínek, proto by jsme  měli zvolit vhodný kontrast jednotlivých prvků.  Zkuste začít designovat web v černé a bílé/ bílé pro maximální kontrast a pak teprve přidávejte barvy, ovšem pořád v souladu s tímto vzorem.

mobilní web

Funkčnost

Zatímco většina textu na desktopových webech je designovaná na pouhé kliknutí a linkování na další stránku, mobilní typografie často plní více funkcí. Text může například začít vytáčet hovor, jiný může obsahovat link a další nám umožní koupit určitý produkt. Proto vždy designujeme tak, aby bylo uživateli hned zřejmé, jakou funkci plní. Textové boxy musí být dostatečně veliké a vzdálené od jiných, aby v jednu chvíli mohla proběhnout jen jedna akce.  Rozhodně tyto věci neřešíme zoomem.
Jakákoliv jiná konfigurace by mohla být matoucí.

 

Důležitá rada závěrem

Testujte, testujte a znovu testujte. Získáte tak představu jak bude web vypadat na různých zařízeních a můžete se tak vyvarovat spousty chyb.

mobilní web joke

Nevíte si rady s vaším mobilním webem? Ozvěte se nám, rádi se na to s vámi podíváme.

Profilový obrázek
Napsal/a
Ondřej Kohel
Podobné příspěvky
propagace proof of concept
Propagace MVP a Proof of Concept
Design | Proof of Concept | Start-upy - 2nd Říjen 2021
Napsal/a Tým Pixelfield
Prioritizace pro startupy krok za krokem: PriX metoda pro plánování releasů
Design | Mobil | Web - 3rd Duben 2020
Napsal/a Tým Pixelfield