Jak vybrat písmo pro vícejazyčný web, aby diakritika nikdy nechyběla

Proč je výběr písma u vícejazyčného webu problém

Každé písmo obsahuje jen určitou sadu znaků, takzvaných glyfů. Mnoho designových fontů pokrývá hlavně základní latinku, tedy anglickou abecedu. Čeština a slovenština však potřebují znaky jako ů, ě, ř nebo ľ, ĺ, ŕ, ť, ď, ň. Pokud je písmo nemá, prohlížeč je musí vzít z jiného písma a text pak vypadá nejednotně: jedno písmeno se liší od zbytku slova.

Ještě větší výzva přichází, když web potřebuje i jiné písmo, například azbuku, nebo jazyky psané zprava doleva. Tam už nejde jen o pár chybějících znaků, ale o úplně jinou sadu písmen a často i o jiný směr textu.

Dvě cesty, které nejsou ideální

Samostatné písmo pro každý jazyk. Pro každý jazyk nebo směr textu nastavíte jiné písmo. Funguje to, ale musíte přesně vědět, který text je v jakém jazyce, udržovat více pravidel a u smíšeného obsahu (například anglický název v české větě) se snadno něco přehlédne.

Jedno písmo pro všechno. Vyberete jediné písmo, které pokrývá všechny jazyky. Je to jednoduché, ale výrazně to omezuje design, protože takových písem není mnoho a ne vždy sedí ke značce.

Lepší řešení: záložní písma ve font-family

V CSS můžete ve vlastnosti font-family uvést více písem za sebou. Prohlížeč vybírá písmo po jednotlivých znacích: pokud první písmo znak nemá, zkusí druhé, pak další a nakonec systémové písmo. Teprve když znak nenajde nikde, zobrazí prázdný čtvereček nebo jiný rozbitý znak.

body {
  font-family: "Hlavni Pismo", "Zalozni Pismo", system-ui, sans-serif;
}

Hlavní písmo tak může určovat charakter webu a záložní písma doplňují znaky, které mu chybí. Záložní písma se vyplatí vybírat tak, aby měla podobnou výšku písmen a tloušťku tahů jako hlavní písmo, aby rozdíl nebyl nápadný.

Výkon: co se stahuje a co ne

Písmo uvedené ve font-family, které stránka ve skutečnosti nepoužije, prohlížeč nestahuje. Záložní písmo se načte až tehdy, když ho text opravdu potřebuje. I tak se vyplatí:

• vybírat písma s co nejširší podporou znaků, aby záložní písma zasahovala co nejméně,
• dát na konec seznamu systémové písmo, které už v zařízení je a nic se nestahuje,
• počítat s rizikem FOUT (flash of unstyled text): text se nejprve zobrazí v záložním písmu a po načtení webového fontu „poskočí“. U dobře zvolených záložních písem je tento posun méně rušivý.

Checklist před spuštěním vícejazyčného webu

• Otestujte každý jazyk webu na skutečném textu, ne na anglickém vzoru.
• Vyzkoušejte všechny problematické znaky: ů, ě, ř, ľ, ĺ, ŕ, ť, ď, ň, ô, ä a velká písmena s diakritikou.
• Zkontrolujte nadpisy, tučný i kurzívní řez, nejen běžný text. Jednotlivé řezy mohou mít rozdílnou sadu znaků.
• Ověřte, že písmo obsahuje potřebné jazykové sady (například latin-ext pro středoevropské jazyky).
• Prohlédněte si web na pomalejším připojení a sledujte, zda text při načítání výrazně neposkakuje.
• Zkontrolujte tlačítka, formuláře, menu a patičku, kde se diakritika snadno přehlédne.

Otázky a odpovědi

Proč se mi na webu zobrazují písmena jako ř nebo ů v jiném písmu?

Hlavní písmo tyto znaky neobsahuje, proto je prohlížeč zobrazí ze záložního nebo systémového písma.

Stačí vybrat jedno písmo pro všechny jazyky?

Může to fungovat, ale omezí to výběr designu. Flexibilnější je hlavní písmo doplněné o vhodná záložní písma.

Zpomalí záložní písma načítání webu?

Prohlížeč stahuje jen ta písma, která text skutečně potřebuje. Systémové písmo na konci seznamu se nestahuje vůbec.

Co je FOUT?

Krátké zobrazení textu v náhradním písmu, než se načte webový font. Text pak může mírně poskočit.

Jak ověřím, zda písmo podporuje češtinu a slovenštinu?

Otestujte na webu skutečný text se všemi diakritickými znaky ve všech použitých řezech a zkontrolujte, zda písmo obsahuje rozšířenou latinku.

Pokud chcete web, na kterém diakritika vypadá dobře ve všech jazycích, podívejte se na naše služby PeknéWeby.