Zvládnutí Typografie – Srpnový highlight

V dnešní době neustále nového obsahu máme čím dál větší touhu po čistých a ničím nerušených stránkách s menším množstvím psaného obsahu a možností být více součástí dění. Jednou z hlavních priorit, která utváří identitu stránek, usnadňuje zpracování obsahu a může vyzdvihnout nebo zničit uživatelský prožitek se stává typografie.

Typografie hraje důležitou roli zda uživatelé zůstanou na stránkách nebo odejdou jinam. Pokusím se shrnout osvědčené postupy, které můžete použít ve svých projektech.

Zvládnutí typografie

1. Používejte nejmenší možný počet fontů

Pokud využíváme více jak 3 různé druhy písma zároveň stává se stránka nepřehlednou, bez výrazných pravidel pro čtenáře jak s textem pracovat.

Snažte se mít počet použitých fontů na minimum, optimálním počtem by měly být 2 různé typy písma, i jeden typ písma může být dostatečný.

Začněte vybráním hlavního písmo pro svůj obsah. Jedná se o důležitý krok, který dále ovlivňuje jaký vybrat typ nadpisu. Text obsahu je nejdůležitějším prvkem celého designu, uživatele provází celou stránkou/aplikací. Začátečníkům se doporučuje využívat jeden typ písma a naučit se používat více jeho řezů (tlouštěk písma).

Řezy písma

Snažte se o správné párování písma. Na internetu je mnoho inspirací pro správné párování. Jednou ze zajímavých stránek, která využívá strojového učení je stránka FontJoy. Dále stránka s ukázkami reálných projektů Typ.io. Poslední zajímavou stránkou je fontpair, která pomáhá párování typů písma na službě Google Fonts.

2. Vyberte správnou velikost písma

Malá velikost nutí čtenáře se více soustředit na čtení, výsledkem toho bude přeskakování v textu zejména na  malých obrazovkách jako jsou chytré telefony.

Text který je příliš velký, s sebou také může nést problémy, dojde k rozptylování a zaměření pozornosti směrem k sobě.

Velikost textu má velký dopad na čtení textu. Je dobré mít velikost písma alespoň 16px většina webů jde stejně dál a má alespoň 18px. Toto pravidlo nelze brát jako neměnnou volbu, záleží na okolnostech.

Další možností jak vybrat velikost textu je využitím modulárního poměru. Jedná se o matematické poměry, které pomáhají s nastavení přirozených a harmonických velkostí nadpisů. Vybere se základní velikost base a od ní se poměrově odvozují ostatní styly písma. Lze použít nástroje jako je ModularScale nebo GridLover.

Velikost písma

3. Zarovnejte text doleva

Toto pravidlo se liší podle zvyklostí země a kultury, západní země jsou zvyklý číst text ze shora dolů, zleva do prava. Zarovnáním textu do leva, je snazší držet očima řádek a jednoduše přejít na další bez velké námahy.

4. Omezte délku řádky

Při správně omezené délce řádky textu je mnohem snazší se orientovat i v náročnějším textu. Dlouhé řádky textu jsou bohužel na webových stránkách běžnou chybou (ukázkou je zde Wikipedia s velkou hustotou informace). Přijatelný počet znaků na řádek se v anglických literaturách udává na 60 znaků na řádek, včetně mezer. U menších zařízení je ideální počet znaků na řádek rozdílný a odhaduje se na 30-40 znaků.

porovnání délek textu (typografie)
Material Design – Typography

5. Mějte dostatečnou výšku řádku

Další z pravidel, které pomůže pro snazší čtení dlouhého textu, je správná výška mezi řádky. Dělá to čtenáři dojem, že text není příliš hustý a působí snáz na čtení. Řádka by měla být přibližně o 30% větší než je velikost znaku na řádce.

6. Mějte dostatečně kontrastní paletu barev textu.

Zde se nejčastěji naráží na problémy u chytrých telefonů při různých podmínkách osvětlení a odrazů. Zároveň je důležité upozornit, že je třeba dbát i na uživatele, kteří mají  vady zraku ( zejména více druhů barvosleposti). Je možné si zkontrolovat dostatečný kontrastní poměr pomocí nástrojů jako je WebAIM. Je možné přečíst si celé doporučení konzorcia W3C.

Shrnutí

Dodržením těchto postupů by se mělo docílit snazšího a zábavnějšího čtení pro vaše uživatele. V digitální éře je ovládání správné typografie nezbytnou schopností pro vytváření lepších produktů, zvýšení uživatelské spokojenosti a lepších konverzí. Jako každá schopnost vyžaduje trénink a cvičení k dosažení nejlepších výsledků. Více o navrhování s typografií se můžete dozvědět například v této sérii mailů od InVision.

Stránky které je dobré znát

Google Fonts – katalog výběru písem, které je možné zadarmo používat ve svých projektech.

FontSquirrel– vyhledávání a katalog zadarmo i placených použitelných typů písma. Obsahuje aplikaci na detekování písma z obrázků.

FontFace Ninja – doplněk prohlížečů k detekování písma z webových stránek.

SpeedFont – snadné vkládání webových fontů na stránky.

Invision typography resources – ohromné množství zdrojů

Inspirované článkem

Zajímavé odkazy

Předchozí Highlights

Pokud máte nějakou otázku nebo vlastní postřehy napište do komentářů nebo na Twitter @FMastil.

Přeji vám krásný týden. ✌️

Frank

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *