Font: jasná a konzistentní typografie v aplikaci
Publikováno · Aktualizováno
Font ovlivňuje čitelnost, hierarchii, vizuální identitu, výkon a lokalizaci aplikace. Tento průvodce vysvětluje, jak vytvořit konzistentní typografický systém, vybrat vhodné písmo, nastavit škálu a rozestupy, řešit responsive a vícejazyčný text, optimalizovat načítání a testovat s reálným obsahem.
Nejprve definujte typografický systém
Nejprve definujte role textu: název stránky, nadpis sekce, běžný text, label, tlačítko, tabulka, chyba, caption, číslo a metadata. Každá role má mít jasnou hierarchii a znovupoužitelný styl. Pokud si každá obrazovka vytváří vlastní velikosti a váhy, rozhraní ztrácí rytmus a údržba je složitější. Malá dokumentovaná sada stylů dává designerům i builderům společný systém.
Oddělte hierarchii od dekorace. Nadpis má působit důležitě díky velikosti, váze, rozestupu a poloze, ne proto, že každá stránka používá jiné písmo. Definujte tokeny pro body, small, label, subtitle, section, page title a display. Globální změny pak lze provádět bezpečně a accessibility nebo redesign nevyžaduje ruční úpravu každé komponenty.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Vybírejte písmo podle jeho role
Vybírejte písmo podle skutečných podmínek čtení. Marketingový headline může mít více charakteru než hustá tabulka, formulář nebo dlouhá dokumentace. Pro body text potřebujete jasné tvary znaků, čitelnou interpunkci, vhodné váhy, srozumitelná čísla a stabilní rendering v malých velikostech. Testujte skutečný obsah rozhraní, ne jen velké ukázkové nadpisy.
Omezte počet rodin. Jedna rodina s dostatečným množstvím vah často pokryje celý produkt; druhá může sloužit display nadpisům. Každá další rodina zvyšuje vizuální složitost, počet souborů a údržbu. Pokud je nutný brand font, určete, kde se používá a kde je vhodnější robustní fallback.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Vytvořte konzistentní typografickou škálu
Vytvořte typografickou škálu místo nezávislých velikostí pro každou obrazovku. Začněte pohodlným body textem, definujte menší podpůrné texty a poté úrovně nadpisů. Důležité jsou vztahy. Příliš mnoho podobných velikostí oslabí hierarchii, příliš velké skoky způsobí vizuální hluk. Ke každé úrovni přiřaďte váhu a line-height.
Velikost nefunguje sama. Hierarchii ovlivňuje také váha, line-height, letter-spacing, barva a velikost písmen. Label může být menší, ale výraznější. Velký nadpis často potřebuje těsnější line-height, zatímco odstavec více prostoru. Tabulkové číslice pomáhají zarovnání čísel. Tato pravidla dokumentujte.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Kontrolujte rozestupy a délku řádku
Délka řádku výrazně ovlivňuje čitelnost. Příliš široké řádky ztěžují návrat na začátek dalšího řádku, příliš úzké sloupce způsobují mnoho zalomení. Pro delší obsah nastavte praktickou maximální šířku. line-height volte podle písma, velikosti a scriptu, ne jako jednu univerzální hodnotu.
Sledujte také vertikální rytmus mezi nadpisy, odstavci, seznamy a formulářovými poli. Prostor nad nadpisem často odděluje silněji než prostor pod ním. Používejte spacing tokeny namísto náhodných margins. Při změně font size nebo line-height znovu ověřte okolní spacing.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Navrhněte responsive typografii
Responsive typografie nemá vytvářet nový systém pro každé zařízení. Velké display nadpisy se mohou na mobilu zmenšit, zatímco body text zůstane v pohodlném rozsahu. Používejte breakpointy nebo fluid sizing s minimem a maximem. Testujte skutečné dlouhé nadpisy, protože wrapping mění výšku a rovnováhu celé sekce.
Prověřte tlačítka, tabs, labels, navigaci a tabulky v úzkém layoutu. Rozhodněte, zda se text může zalomit, zkrátit, scrollovat nebo změnit layout. Testujte browser zoom a větší systémový text. Rozhraní, které funguje pouze při výchozím zoomu, není dostatečně robustní.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Správně podporujte více jazyků
Vícejazyčný produkt musí ověřit skutečnou znakovou podporu. Písmo vhodné pro latinku může postrádat arabštinu, českou diakritiku nebo jiné scripty a vyvolat neočekávaný fallback. Ten může změnit šířku, výšku a váhu. Testujte reálné překlady, protože tlačítka a nadpisy mohou být výrazně delší než anglické placeholdery.
Right-to-left scripty vyžadují zvláštní pozornost k směru, zarovnání, interpunkci, číslům a smíšenému textu. Nepřenášejte letter-spacing a line-height slepě z latinky. Pokud různé scripty používají různé rodiny, vybírejte podobné metriky, aby změna jazyka nezpůsobovala velké posuny.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Optimalizujte načítání a fallback
Načítejte jen skutečně používané váhy a styly. Každý další font soubor zvyšuje velikost stránky. Používejte moderní formáty a opatrně se subsettingem, aby nezmizely znaky potřebné pro podporované jazyky. Cílem je rychle zobrazit text a omezit layout shift po načtení custom písma.
Definujte čitelný fallback stack s podobnými proporcemi. Testujte pomalou síť, blokované requesty a první návštěvu bez cache. Self-hosting přináší kontrolu, ale také odpovědnost za soubory, caching, licence a aktualizace. Rozhodnutí stavte na měření.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Typografii testujte a udržujte
Testujte typografii s reálným produkčním obsahem: dlouhé názvy, formuláře, tabulky, chyby, empty states, čísla, překlady a obsah uživatelů. Hledejte clipping, překrytí, přílišné zalamování, slabý kontrast a nekonzistentní váhy. Čistá demo stránka neukáže nepředvídatelnost produkce.
Udržujte typografickou referenci s rodinami, vahami, velikostmi, line-height, letter-spacing, použitím, fallbacky a strategií načítání. Před přidáním nového stylu zkontrolujte, zda nestačí existující. Při změně rodiny porovnejte metriky a wrapping na více obrazovkách před globálním nasazením.
Testujte také uživatelský obsah, například jména, adresy, komentáře a importovaná data. Může být mnohem delší než ukázky v designu. Každá komponenta potřebuje definované overflow chování. Zkoušejte dlouhá slova, velká čísla, řetězce bez mezer a smíšenou interpunkci, zejména v tabulkách, kartách, badges a mobilních headerech.
Accessibility není pouze kontrast. Testujte zoom, větší systémový text a nastavení prohlížeče měnící fonty. Význam nesmí záviset jen na váze nebo barvě. Hierarchie musí zůstat srozumitelná i tehdy, když se custom font nenačte a použije se fallback.
Testujte také uživatelský obsah, například jména, adresy, komentáře a importovaná data. Může být mnohem delší než ukázky v designu. Každá komponenta potřebuje definované overflow chování. Zkoušejte dlouhá slova, velká čísla, řetězce bez mezer a smíšenou interpunkci, zejména v tabulkách, kartách, badges a mobilních headerech.
Accessibility není pouze kontrast. Testujte zoom, větší systémový text a nastavení prohlížeče měnící fonty. Význam nesmí záviset jen na váze nebo barvě. Hierarchie musí zůstat srozumitelná i tehdy, když se custom font nenačte a použije se fallback.
Testujte také uživatelský obsah, například jména, adresy, komentáře a importovaná data. Může být mnohem delší než ukázky v designu. Každá komponenta potřebuje definované overflow chování. Zkoušejte dlouhá slova, velká čísla, řetězce bez mezer a smíšenou interpunkci, zejména v tabulkách, kartách, badges a mobilních headerech.
Accessibility není pouze kontrast. Testujte zoom, větší systémový text a nastavení prohlížeče měnící fonty. Význam nesmí záviset jen na váze nebo barvě. Hierarchie musí zůstat srozumitelná i tehdy, když se custom font nenačte a použije se fallback.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Otázky
Kolik font rodin používat?
Často stačí jedna hlavní rodina a případně druhá pro display nadpisy.
Co je důležité pro body text?
Jasné tvary, pohodlná velikost, line-height, délka řádku, podpora jazyků a stabilní rendering.
Načítat všechny váhy?
Ne, pouze skutečně používané váhy a styly a otestovat fallback.
Jak testovat vícejazyčnost?
Používejte skutečné překlady a ověřte znaky, směr, wrapping, line-height a fallback.