nav line

Typografia v responsive designe

Základom návrhu každého webu je vytvoriť pre užívateľov čo najjednoduchší prístup k obsahu. Základnými parametrami prístupnosti a čitateľnosti textu sú dostatočný kontrast oproti pozadiu a hlavne veľkosť písma. Práve nej sa teraz budeme venovať.

Pri návrhu responzívneho webu musíme brať ohľad na to, že súčasné zariadenia majú rôznu hustotu zobrazovacích bodov. Teda už neplatí, že ak navrhujem web, spoľahnem sa, že každý monitor má 72ppi (bodov na palec). Výrobcovia sa snažia dostať do zariadení stále väčšie rozlíšenie bez nárastu rozmerov displeja, a tak je dnes už bežné, že na mobiloch alebo tabletoch nájdeme 300, 400 a dokonca už aj 500ppi.

V praxi sa to prejavuje tak, že ak nastavím veľkosť fontu 36 bodov, bude mať na monitore výšku pekných 1,2 centimetr, ale na mobile s 360ppi len okolo 2,5 milimetra. V takomto prípade je dosť náročné hovoriť o rovnakom užívateľskom zážitku a je nutné písmo prispôsobiť veľkosti zariadenia. Toto sú tri spôsoby optimalizácie obsahu:

Presná veľkosť pre každý viewport

Prvý a relatívne jednoduchý spôsob ako nastaviť veľkosť textu, je definovať ju v presných bodoch pre každý viewport. Pri rozumnom nastavení vieme pomocou 4 viewportov obsiahnuť všetky hlavné veľkosti displejov, takže hlavnou výhodou tohoto spôsobu je jeho relatívna rýchlosť.

„Best practices“ pre čo najlepšie čitateľný text je, že počet znakov na riadok by sa mal pohybovať v rozmedzí 45 až 75 znakov. Pre mobily sa všeobecne odporúča hlavnému textu nenastavovať veľkosť menšiu ako 16 bodov, pre tablet 14 bodov. Ak si rovnaký obsah zobrazíte na desktope, tabletoch a mobiloch s rôznou hustotou bodov a položíte ich displeje vedľa seba, text by mal mať vizuálne na všetkých zariadeniach približne rovnakú veľkosť.

Relatívne jednotky

Nastaviť textu presnú veľkosť je síce rýchle, ale v praxi sa objavujú prípady, keď toto riešenie nie je najvhodnejšie. Ak si stanovíme viewport napríklad na 360 až 768 bodov, získame rozsah 408 bodov, do ktorého spadá pomerne široká škála displejov a na všetkých bude veľkosť písma rovnaká, čo môže byť problematické. Statické jednotky písma navyše pri použití v responzívnom webe, plnom relatívnych veľkostí, môžu pôsobiť trochu nepatrične. Riešenie tohto problému nie je nijak jednoduché, ak nechceme definovať 6 alebo 7 rôznych viewportov. Na rozdiel od iných objektov na stránke sa nedá textu povedať: prispôsob svoju veľkosť šírke okna.

To sa v blízkej budúcnosti pravdepodobne zmení. Výrobcovia prehliadačov prichádzajú s novými relatívnymi jednotkami ako rem, vw alebo vh. Takéto jednotky by výrazne pomohli optimalizovať veľkosť textu pri väčších viewportoch. Problémom je, že každá z jednotiek funguje len na niektorých prehliadačoch, takže sú globálne nepoužiteľné.

V praxi sa používa pseudorelatívna jednotka em. Určuje veľkosť znakov pomocou dedenia od nadradeného objektu. Text s výškou 3em bude trojnásobne väčší než je nastavenie veľkosti textu pre celú stránku. Jednotka takto umožňuje nastaviť si pomery veľkosti textov oproti základnej hodnote a pre každý viewport upraviť len túto základnú hodnotu. To môže výrazne uľahčiť kódovanie webu, aj keď získate zase jednu veľkosť písma pre celý viewport, podobne ako pri prvom spôsobe.

Dynamický rozsah textu

Zaujímavosťou je metóda, ktorá úplne nerieši veľkosť textu a pre jej nastavenie používa jednu z dvoch predchádzajúcich variant. Zaoberá sa optimalizáciou textového obsahu ako takého.

Mladý anglický kreativec Frankie Roberto vytvoril demo, kde ukazuje ako môže vyzerať responzívny text. Toto riešenie vychádza z myšlienky, že čím je menšie rozlíšenie zariadenia, tým je na ňom menej zobrazeného obsahu. Pre každý menší viewport teda časť obsahu skryje, alebo pri prístupe mobile-first - pri každom väčšom viewporte časť obsahu pridá. Jeho experimentom sa inšpirovali ďalší dizajnéri, začali sa viac venovať tejto metóde a názory na ňu sa dosť rozchádzajú. Podľa mňa toto, tak trochu adaptívne riešenie, môže byť pre niektoré weby a niektoré obsahy výborné.

Môžeme namietať, že tento spôsob ide proti prvotnej myšlienke RWD, poskytnúť užívateľovi na všetkých zariadeniach rovnaký obsah a rovnaký zážitok, ale ako som písal v článku RWD - Na zariadení nezáleží , stále väčšiu úlohu pri poskytovaní webového zážitku zohráva kontext. Ak zistíte, že návštevníci vášho webu na mobiloch dlhé texty nečítajú, ale na desktopoch áno, tak im pre mobily proste ponúknite texty kratšie. Hlavné je, aby z vášho webu užívateľ pochopil myšlienku, ktorú mu chcete predať.

Ktorý spôsob použiť?

Prvé dva spôsoby v procese prípravy webu pravdepodobne používate. Grafik musí na náhľadoch definovať veľkosť textu presne v bodoch. Máloktorý kóder dnes bude pripravovať responzívny web bez použitia jednotiek em alebo %, ktoré fungujú veľmi podobne.

Situáciu si môžete zjednodušiť mobile-first prístupom. Viete, aký máte na mobile obsah a aký má byť veľký. Či sa už rozhodnete, že pre tablety a desktopy obsah pridáte a text zmenšíte, alebo nie, môžete si byť istí, že pre užívateľov bude lepšie čitateľný veľký text na monitore, ako malý text na mobile.

Ohodnoťte článek

Typografia v responsive designe

Související články

Vyhledávání na blogu

Webová integrace

Webová integrace jako nová oblast pro business „velkých" webových agentur.

o webové integraci

Profily blogujících