Typografická stupnice pro design webů a aplikací + generátor

Typografická nebo také modulární stupnice hraje klíčovou roli v návrhu webů a aplikací. Jedná se o základní prvek, který ovlivňuje čitelnost textů, estetiku a celkový dojem uživatelů. Při správném použití může typografická stupnice vylepšit uživatelskou zkušenost (UX) a zlepšit komunikaci.

Co je to typografická (modulární) stupnice?

Modulární stupnice je obecnější název pro stupnice, které obecně využijete pro určování velikostí. Ať už pro texty a vzdálenosti prvků v rozložení, tak i pro nastavení gridu (mřížky).

Typografická stupnice je zaměřená na písmo. Jde o předem nastavenou řadu velikostí textů, která přináší do návrhu vizuální harmonii a rytmus. Podobně jako noty v hudební stupnici.

Typografická stupnice se používá pro definování textových stylů, jako jsou odstavce (P), nadpisy (H1, H2, H3, H4, H5, H6), popisky apod. Díky ní dosáhnete v digitálním produktu vizuálního souladu a zaručíte jasnou informační hierarchii.

Typografická stupnice je pomůcka a vodítko pro to, abyste nemuseli velikosti textů volit ručně a od oka. K ulehčení vytvoření stupnice použijte typografickou kalkulačku (generátor).

Výhody použití typografické stupnice

• Získáte vizuální harmonii a konzistenci v typografii napříč projektem.
• Zbavíte se chaotických kousků textů, ustálíte velikosti a nastavíte hranice.
• Zlepšíte informační hierarchii, uděláte texty a nadpisy přehlednější a rozlišitelnější.

Jak vzniká typografická stupnice?

Každá velikost ze stupnice se váže na předchozí hodnotu. To znamená, že každá následující hodnota vzniká vynásobením té předchozí určitým velikostním poměrem.

Vždy začínáte volbou základní (výchozí) velikosti textu, který zastupuje největší část obsahu webu nebo aplikace (běžný/odstavcový text). Další velikosti pak použijte třeba pro nadpisy.

Stupnici můžete tvořit oběma směry. Dělením základní velikosti poměrem získáte menší hodnoty.

Základní velikost textu

Je to velikost textu, která bude pro projekt výchozí a používá se nejčastěji pro odstavcový text. Často to bývá 16 px, ale může to být libovolná hodnota. To, jestli to bude 15, 16, 18 nebo 20 px, určují vlastnosti vybraného písma, jeho čitelnost a zaměření webu nebo aplikace.

Velikostní poměr

Zvolte si vlastní libovolný poměr, kterého se držte, nebo si vyberte jeden z ověřených a zaběhnutých poměrů, které pochází z hudby, geometrie a historie a které velmi dobře fungují. Za jejich hodnotu se skrývá kousek matematiky, což pro nás není důležité a stačí vědět o těchto nejpoužívanějších stupnicích:

• 1.067 – Minor Second
• 1.125 – Major Second
• 1.200 – Minor Third
• 1.250 – Major Third
• 1.333 – Perfect Fourth
• 1.414 – Augmented Fourth
• 1.500 – Perfect Fifth
• 1.618 – Golden Ratio

Jak zvolit správnou typografickou stupnici?

Typy stupnic

Každá stupnice slouží ke specifickým účelům. Je na designérovi, aby zvolil takovou, která splní jeho designové požadavky. Aby dosáhl optimálních výsledků, může použít i více stupnic. V rámci jednoho kontextu však musí velikosti textů vybírat pouze z jedné stupnice.

Při volbě stupnice zvažte faktory jako vlastnosti písma, velikosti obrazovky, typ zařízení a kontext použití.

Vysoce kontrastní stupnice

Stupnice, kde rozdíly mezi velikostmi textů jsou znatelné a velké. Např. škály tvořené poměry 1.414, 1.500 nebo 1.618 (zlatý řez). Kontrastní stupnice se hodí pro velké obrazovky. Uplatní se při návrhu marketingových webů, přistávacích stránek (landing page) nebo artových webů.

Středně kontrastní stupnice

Nejuniverzálnější stupnice, které se hodí pro nejvíce účelů. Rozdíly mezi velikostmi jsou tak akorát velké. Patří sem škály tvořené poměry 1.200, 1.250 nebo 1.333. Stupnice využijete při návrhu běžných webů nebo aplikací, u kterých chcete, aby nejen zaujmuly, ale také plnily funkci.

Málo kontrastní stupnice

Stupnice, které se hodí pro uživatelská rozhraní, která zobrazují větší objem textových dat. Cílem je šetřit místo a na malý prostor vměstnat co nejvíce obsahu. Jsou funkční, avšak už tolik nezaujmou oko a hierarchie informací není tak výrazná. Patří sem škály vytvořené poměry 1.067 nebo 1.125. Hodí se pro aplikace, informační systémy a tam, kde se pracuje s daty. Použít ji můžete pro malé obrazovky a mobilní zařízení.

Použití stupnic v rámci responzivního řešení

Pro návrh uživatelského rozhraní můžete využít jednu, ale i více stupnic. Pro velké obrazovky můžete přichystat stupnici s kontrastním poměrem např. 1.618, ale na mobilu texty zmenšíte podle méně kontrastní stupnice např. 1.200. Texty a slova nadpisů se tak snadněji vejdou na obrazovku a nebudou zabírat tolik prostoru. Dle potřeb můžete použít i více stupnic (třeba pro tablet).

Další tipy pro používání typografické stupnice:

• Snažte se, když vytvoříte typografickou stupnici, abyste všechny velikosti v designu používali. Pokud určité velikosti ze stupnice na stránce chybí, může to být znatelné a celková harmonie se potlačí.
• Vypočítané hodnoty libovolně zaokrouhlete na celé pixely nahoru, dolů nebo k nejbližší hodnotě. Tyto hodnoty libovolně upravte dle svých potřeb, abyste dosáhli co největší vizuální harmonie a abyste zároveň splnili požadavky parametrů písma, nastavení mřížky a celého rozložení uživatelského rozhraní.
• Když je stupnice málo kontrastní, pro zlepšení vizuální hierarchie použijte tučné řezy. U velkých kontrastů si naopak vystačíte klidně se stejným řezem.
• Pokud používáte třeba 2 písma v projektu, postavte 2 texty v každém písmu vedle sebe a porovnejte je v základní velikosti. Pokud má jedno písmo základní velikost např. 16 px, druhé se vedle něj (v té stejné velikosti) může zdát opticky menší. Proto pro toto písmo zvolte větší základní velikost a vytvořte typografickou stupnici zvlášť.