Typografie je způsob, jakým šablona pracuje s písmem, velikostí a váhou textu. Dobrá volba zlepšuje čitelnost dříve, než přidáte jediný efekt.
Co se naučíte
- Vybrat písmo pro běžný text a nadpisy.
- Rozlišit systémové, Google a vlastní font-family.
- Nastavit střídmou velikost a váhu.
- Pochopit síťovou závislost Google Fonts.
Tři zdroje písma
Systémové písmo používá fonty běžně dostupné v zařízení návštěvníka. Načítá se rychle a nemá externí síťovou závislost, vzhled se však může mezi systémy mírně lišit. Google Fonts nabízí rozsáhlejší katalog, ale vyžaduje dostupnou službu, serverové nastavení a při zobrazení výsledné šablony také síťové načtení fontu.
Vlastní font-family je textový CSS seznam rodin. Editor tím sám nenahraje licencovaný fontový soubor. Pokud rodina na cílovém webu není skutečně dostupná, prohlížeč přejde na náhradní písmo ze seznamu.
Nastavení čitelné typografie
- V globálních stylech vyberte nejprve písmo pro běžný text. Pro první web je bezpečná čitelná sans-serif rodina.
- Pro nadpisy zvolte stejné písmo s jinou vahou, nebo jednu střídmou doplňkovou rodinu.
- Nastavte základní velikost textu, výšku řádku a váhu. Nehodnoťte jen velký nadpis, ale také delší odstavec.
- U rozpoznaného Google fontu počítejte s tím, že export nyní načítá pevnou sadu vah 400, 500, 600 a 700. Menší výběr v editoru síťový balík nezmenší.
- Zkontrolujte znaky, číslice, tlačítka, menu a formulářovou ukázku. Ne každý font působí dobře ve všech jazycích.
- Přepněte mobilní náhled a ověřte, zda se nadpisy nezalamují po jednom slově.
Co se stane při nedostupnosti služby
Katalog Google Fonts závisí na síti. Pokud není dostupný, editor nabídne pevný náhradní seznam fontů. Pro plný náhled může aplikace fontové soubory dočasně cachovat přes stejný původ. Export však Google fontový soubor nepřibalí; výsledná šablona používá vzdálený stylesheet.
Proto vždy zadejte rozumný fallback, například Arial, sans-serif. Zvažte také soukromí, rychlost a pravidla cílového webu. Pro projekt, který nesmí kontaktovat externí fontovou službu, volte systémovou sadu nebo font připravený na cílovém webu jinou povolenou cestou.
Méně bývá více
Jedna rodina pro text a případně druhá pro nadpisy obvykle stačí. Každá další rodina zvyšuje vizuální chaos i nároky na načítání.
Test s reálným textem s diakritikou
Do ukázky vložte nadpis s diakritikou, delší odstavec, čísla a krátký text tlačítka. Sledujte znaky č, ř, ž i kombinaci velkých a malých písmen. Některé dekorativní fonty vypadají dobře v anglickém sloganu, ale některé znaky nebo delší slova jsou v nich obtížně čitelné.
Velikost posuzujte také na telefonu. Nadpis může mít menší responsivní hodnotu, zatímco běžný text by neměl být zbytečně drobný. Po instalaci zkontrolujte rychlost načtení a okamžik před stažením externího fontu: fallback by neměl způsobit úplně jiné zalomení stránky.