Ako vybrať písmo pre viacjazyčný web, aby diakritika nikdy nechýbala

Prečo je výber písma pri viacjazyčnom webe problém

Každé písmo obsahuje len určitú sadu znakov, takzvaných glyfov. Mnohé dizajnové fonty pokrývajú najmä základnú latinku, teda anglickú abecedu. Slovenčina a čeština však potrebujú znaky ako ľ, ĺ, ŕ, ť, ď, ň alebo ů, ě, ř. Ak ich písmo nemá, prehliadač ich musí vziať z iného písma a text potom vyzerá nejednotne: jedno písmeno je iné ako zvyšok slova.

Ešte väčšia výzva prichádza, keď web potrebuje aj iné písmo, napríklad azbuku, alebo jazyky písané sprava doľava. Tam už nejde len o pár chýbajúcich znakov, ale o úplne inú sadu písmen a často aj o iný smer textu.

Dve cesty, ktoré nie sú ideálne

Samostatné písmo pre každý jazyk. Pre každý jazyk alebo smer textu nastavíte iné písmo. Funguje to, ale musíte presne vedieť, ktorý text je v ktorom jazyku, udržiavať viac pravidiel a pri zmiešanom obsahu (napríklad anglický názov v slovenskej vete) sa ľahko niečo prehliadne.

Jedno písmo pre všetko. Vyberiete jediné písmo, ktoré pokrýva všetky jazyky. Je to jednoduché, no výrazne to obmedzuje dizajn, pretože takých písiem nie je veľa a nie vždy sedia k značke.

Lepšie riešenie: záložné písma vo font-family

V CSS môžete vo vlastnosti font-family uviesť viac písiem za sebou. Prehliadač vyberá písmo po jednotlivých znakoch: ak prvé písmo znak nemá, skúsi druhé, potom ďalšie a nakoniec systémové písmo. Až keď znak nenájde nikde, zobrazí prázdny štvorček alebo iný rozbitý znak.

body {
  font-family: "Hlavne Pismo", "Zalozne Pismo", system-ui, sans-serif;
}

Hlavné písmo tak môže určovať charakter webu a záložné písma dopĺňajú znaky, ktoré mu chýbajú. Záložné písma sa oplatí vyberať tak, aby mali podobnú výšku písmen a hrúbku ťahov ako hlavné písmo, aby rozdiel nebol nápadný.

Výkon: čo sa sťahuje a čo nie

Písmo uvedené vo font-family, ktoré stránka v skutočnosti nepoužije, prehliadač nesťahuje. Záložné písmo sa načíta až vtedy, keď ho text naozaj potrebuje. Aj tak sa oplatí:

• vyberať písma s čo najširšou podporou znakov, aby záložné písma zasahovali čo najmenej,
• dať na koniec zoznamu systémové písmo, ktoré už je v zariadení a nič sa nesťahuje,
• počítať s rizikom FOUT (flash of unstyled text): text sa najprv zobrazí v záložnom písme a po načítaní webového fontu „preskočí“. Pri dobre zvolených záložných písmach je tento posun menej rušivý.

Checklist pred spustením viacjazyčného webu

• Otestujte každý jazyk webu na skutočnom texte, nie na anglickom vzore.
• Vyskúšajte všetky problematické znaky: ľ, ĺ, ŕ, ť, ď, ň, ô, ä, ů, ě, ř a veľké písmená s diakritikou.
• Skontrolujte nadpisy, tučný aj kurzívny rez, nielen bežný text. Jednotlivé rezy môžu mať rozdielnu sadu znakov.
• Overte, že písmo obsahuje potrebné jazykové sady (napríklad latin-ext pre stredoeurópske jazyky).
• Pozrite si web na pomalšom pripojení a sledujte, či text pri načítaní výrazne nepreskakuje.
• Skontrolujte tlačidlá, formuláre, menu a pätičku, kde sa diakritika ľahko prehliadne.

Otázky a odpovede

Prečo sa mi na webe zobrazujú písmená ako ľ alebo ť v inom písme?

Hlavné písmo tieto znaky neobsahuje, preto ich prehliadač zobrazí zo záložného alebo systémového písma.

Stačí vybrať jedno písmo pre všetky jazyky?

Môže to fungovať, ale obmedzí to výber dizajnu. Flexibilnejšie je hlavné písmo doplnené o vhodné záložné písma.

Spomalia záložné písma načítanie webu?

Prehliadač sťahuje len tie písma, ktoré text skutočne potrebuje. Systémové písmo na konci zoznamu sa nesťahuje vôbec.

Čo je FOUT?

Krátke zobrazenie textu v náhradnom písme, kým sa nenačíta webový font. Text potom môže mierne preskočiť.

Ako overím, či písmo podporuje slovenčinu a češtinu?

Otestujte na webe skutočný text so všetkými diakritickými znakmi vo všetkých použitých rezoch a skontrolujte, či písmo obsahuje rozšírenú latinku.

Ak chcete web, na ktorom diakritika vyzerá dobre vo všetkých jazykoch, pozrite si naše služby PeknéWeby.