2025-07-02 · Redakcia Baduno · 8 blog.readMin · Blog a znalosti
Webové písma pre 24 jazykov: Výber písma, podmnožiny, výkon
Písmo, ktoré pokrýva nemčinu, gréčtinu, maltčinu a arabčinu? Existuje zriedka – a ak áno, je ťažké. Stratégie pre rýchlu a krásnu viacjazyčnosť.
Problém pokrytia
Latinka so všetkými diakritickými znamienkami EÚ, gréčtina, cyrilika, plus arabské písmo: Len málo rodín písma pokrýva všetko dobre. Pragmatickým riešením sú páry písma – jedna rodina pre latinku/gréčtinu/cyriliku plus špecializované RTL písmo, vzájomne zladené v sivej hodnote a výške.
Subsetting výrazne šetrí
Plné Unicode fonty vážia stovky kilobajtov. Podmnožiny pre jednotlivé systémy písma – načítané len tam, kde sú potrebné – to redukujú na zlomky: RTL verzia načíta RTL písmo, nemecká nie.
Načítanie bez skákania
font-display:swap zobrazí text okamžite so systémovým písmom a potom vymení – proti rozskokom layoutu pomáhajú metricky kompatibilné fallbacky a size-adjust. Vlastný hosting namiesto cudzieho CDN: rýchlejšie a ochrannejšie voči údajom.
Typografia podľa písmového systému
Arabské písmo potrebuje väčšiu výšku riadku a často o jeden bod väčšiu veľkosť; medzery medzi kapitálkami fungujú len v latinke. Dizajnový systém, ktorý pozná takéto pravidlá pre každý systém písma, vytvorí z 24 jazykov jedno rozloženie – namiesto 25 kompromisov.
Variabilné písma: Flexibilita s prekážkami
Variabilné písma sľubujú znížený počet súborov tým, že viacero rezov (tučné, kurzíva atď.) je zlúčených do jedného súboru. Pre viacjazyčné stránky s 24 jazykmi je to lákavé: namiesto 24 × 4 = 96 statických súborov len 24 variabilných? No pozor: Variabilné písma so širokým jazykovým rozsahom (latinka, gréčtina, cyrilika, arabčina) sú zriedkavé a často veľké. Subsetting je navyše zložitejší, pretože variačné osi ovplyvňujú znakovú sadu. Subsetovaný variabilný font môže v závislosti od nastavenia osí vyžadovať rôzne glyfy, takže musíte buď udržiavať všetky subzostavy, alebo ich dynamicky generovať. Praktické je použitie variabilných písiem pre jednu rodinu písiem (napr. latinka + gréčtina) a statických písiem pre druhú (napr. arabčina), aby sa kontrolovala veľkosť súborov. Načítajte variabilné písma pomocou font-weight: 100 900 a font-stretch: 75% 125% namiesto jednotlivých rezov – ale otestujte zobrazenie vo všetkých jazykoch a prehliadačoch, pretože variabilné písma pri subsettingu a rastrování niekedy prinášajú neočakávané výsledky.
Licenčne vyhovujúce používanie písiem v 24 jazykoch
Právna stránka je často podceňovaná. Licencia na písmo zvyčajne platí pre určitý počet zobrazení webovej stránky alebo pre jednu doménu; pri 24 jazykových variantoch môžete v závislosti od licencie naraziť na limity. Niektorí poskytovatelia výslovne zakazujú subsetting alebo vkladanie do dynamického obsahu. Dbajte na to, aby licencia pokrývala všetky jazyky – najmä špeciálne znaky ako turecké İ, rumunské Ș alebo maltské Ħ sa často považujú za rozšírenú znakovú sadu a nie sú vždy súčasťou štandardného balíka. Pre projekty v EÚ sa odporúča neobmedzená (Unlimited) alebo podniková (Enterprise) licencia, ktorá povoľuje aj subsetting a používanie na viacerých doménach. Skontrolujte tiež platnosť licencie pre použitú technológiu písma (napr. WOFF2). Nástroj na poradenstvo v oblasti licencií (napr. od Fontstand) môže pomôcť predísť konfliktom – zaznamenajte licenčné podmienky pre každý font vo svojom styleguide, aby neboli potrebné dodatočné úpravy.
Súťaž formátov: WOFF2, subsetované variabilné písma a Unicode-Range
Výber formátu súboru ovplyvňuje čas načítania a kompatibilitu. WOFF2 je dnes štandardom a ponúka približne 30-50% lepšiu kompresiu ako WOFF. Ak používate variabilné písma, skontrolujte, či váš cieľový prehliadač podporuje WOFF2 s variabilnými osami (v súčasnosti všetky moderné prehliadače). Pre staršie prehliadače (IE11) musíte pripraviť statické WOFF súbory ako fallback. Účinný trik: Použite Unicode-Range v @font-face na načítanie len skutočne potrebnej znakovej sady – podobne ako subsetting, ale riadený na strane servera. Skombinujte to s font-display: swap; optimalizáciu načítania môžete podporiť pomocou preload pre kritické varianty písma (napr. základné písmo pre latinku). Príklad z praxe: Pre nemeckú stránku načítate iba subset latinka+umlauty (cca 30 KB), pre grécku stránku subset latinka+gréčtina (cca 50 KB), pre arabskú stránku subset latinka+arabčina (cca 80 KB). Takto aj pri 24 jazykoch zostanú celkové sťahované dáta na návštevníka pod 100 KB údajov o písme.
Písmo, ktoré pokrýva nemčinu, gréčtinu, maltčinu a arabčinu? Existuje zriedka – a ak áno, je ťažké. Stratégie pre rýchlu a krásnu viacjazyčnosť.
Automatizovaná kontrola kvality zobrazenia písma
Aby v žiadnej z 24 jazykových mutácií nechýbali glyfy alebo nepôsobili roztrúsene, mali by ste do svojej CI/CD pipeline začleniť automatizované testy. Nástroje ako FontProof, Wakamai Fondue alebo Python skript fontdiff porovnávajú rendrované snímky každej jazykovej verzie s referenčnou snímkou. Alebo môžete použiť Puppeteer na otvorenie každej stránky, načítanie písma a kontrolu medzier (pomocou CSS vlastnosti font-family: …; font-unicode-range). Systematickejšie: extrahujte všetky Unicode codepointy nachádzajúce sa v HTML pre každú jazykovú verziu a porovnajte ich s glyfmi prítomnými v subete. Ak chýba znak, build je prerušený alebo je vydané varovanie. Tieto testy by mali kontrolovať aj čitateľnosť ligatúr alebo alternatívnych znakov (napr. arabské iniciálové formy). Zahrňte tiež kontrolu výkonnostného rozpočtu: veľkosť písma na jazyk nesmie prekročiť určitý prah. Takto zabezpečíte, že viacjazyčnosť nepôjde na úkor času načítania.
Subsetting podporovaný umelou inteligenciou: Efektivita vďaka automatizácii so zabezpečením kvality
Ručné spravovanie subsetovania pre 24 jazykov je náročné a náchylné na chyby. Moderné buildovacie nástroje ako glyphhanger alebo HarfBuzz dokážu automaticky generovať subnastavenia na základe skutočných znakov vyskytujúcich sa v obsahu. Ešte efektívnejší je proces, ak použijete modely umelej inteligencie, ktoré predpovedajú potrebné bloky Unicode z jazykových verzií. Neurónová sieť trénovaná na viacjazyčných webových stránkach dokáže s vysokou presnosťou určiť, ktoré glyfy sú pre daný jazyk potrebné – od základných latinských znakov cez cyrilské doplnky až po arabské ligatúry. Automaticky vygenerovaný subset je potom podrobený manuálnej kontrole rodeným hovorcom, aby sa zabezpečilo, že nechýbajú žiadne zriedkavé, ale dôležité znaky (napr. historické citácie, špeciálne znaky v názvoch firiem). Táto kombinácia zrýchlenia pomocou umelej inteligencie a ľudskej kontroly skracuje tvorbu subsetov z dní na hodiny pri zachovaní rovnako vysokej kvality. Integrujte skript do svojho CI/CD pipeline, aby sa pri každej aktualizácii obsahu subnastavenia automaticky regenerovali a testovali. Tak zabezpečíte, že súbory písma sú vždy aktuálne bez negatívneho vplyvu na výkon načítania.
Jazykovo špecifické stratégie fallback pre konzistentnú typografiu
Aj pri optimálnom subsetovaní sa môže stať, že sa súbor písma nenačíta – či už kvôli sieťovej chybe, nekompatibilite prehliadača alebo licenčným obmedzeniam. Vtedy nastupuje fallback zásobník. Pre 24 jazykov nestačí globálny font-stack: systémové písmo, ktoré vyzerá dobre pre nemčinu, môže byť nevhodné pre arabčinu. Preto definujte samostatné fallback stacky pre každú jazykovú verziu, prispôsobené typickým systémovým písmam cieľového regiónu. Použite na to CSS funkciu @font-face s unicode-range, aby ste pre každú rodinu písma načítali iba znaky, ktoré sú skutočne potrebné. Pre arabskú verziu by ste mohli ako fallback uviesť 'Traditional Arabic' alebo 'Tahoma', pre grécku 'GFS Didot' alebo 'Times New Roman'. Dbajte na metrickú kompatibilitu: pomocou size-adjust a ascent-override prispôsobte fallbackové písmo vizuálne primárnemu písmu, čím minimalizujete skoky v rozložení. Otestujte tieto fallbacky vo všetkých jazykoch pomocou automatizovaného porovnávania snímok obrazovky, aby ste sa uistili, že čitateľnosť zostáva zachovaná aj v prípade chyby. Tak predídete prekvapeniam a zabezpečíte konzistentnú používateľskú skúsenosť vo všetkých jazykových variantoch.
Optimalizácia na strane servera: Self-Hosting, caching a stratégie CDN
Doručovanie webových písiem prostredníctvom externých služieb ako Google Fonts alebo Adobe Fonts je pohodlné, ale prináša nevýhody pre viacjazyčné projekty: Po prvé, pri 24 jazykových variantoch musíte často odosielať viacero požiadaviek na rôzne servery, čo zvyšuje čas načítania. Po druhé, nepoznáte stratégiu ukladania do vyrovnávacej pamäte poskytovateľa a nemáte kontrolu nad výpadkami ani ochranou údajov. Preto odporúčame self-hosting všetkých súborov písma na vlastnom serveri alebo vyhradenom CDN. Vďaka self-hostiNGU môžete subnastavenia písma presne prispôsobiť svojim jazykovým verziám a pomocou HTTP/2 Server Push alebo Preload-Hints priorizovať kritické písma. Okrem toho môžete ukladanie do vyrovnávacej pamäte riadiť pomocou hlavičiek Cache-Control tak, aby sa písma načítali pre všetkých návštevníkov danej jazykovej verzie iba raz. CDN s okrajovými servermi v blízkosti vašich používateľov skracuje latenciu. Pre 24 jazykov s rôznymi cieľovými regiónmi je CDN nevyhnutné: používatelia vo Fínsku načítajú fínsky subset písma z blízkeho okrajového uzla, používatelia na Malte rovnako. Dôležité: Nastavte pre každú jazykovú verziu vlastné pravidlo ukladania do vyrovnávacej pamäte, aby sa napríklad nemecký subsetový súbor uchovával v pamäti s dlhou platnosťou (napr. jeden rok), zatiaľ čo pri aktualizáciách písma zneplatníte vyrovnávaciu pamäť zmenou názvu súboru (fingerprinting). Tak zabezpečíte, že písma sa doručujú rýchlo a sú vždy aktuálne, bez toho aby používatelia museli čakať na aktualizácie.
Dostupnosť a čitateľnosť: Výber písma pre všetky skupiny používateľov
Viacjazyčnosť neznamená len správne zobrazovať znaky, ale aj to, že písmo je dobre čitateľné pre všetkých používateľov – bez ohľadu na zrakové schopnosti, veľkosť obrazovky alebo zariadenie. Pri výbere písma preto dbajte na dostatočnú rozlíšiteľnosť písmen, najmä pri podobných znakoch ako 'rn' vs. 'm' alebo '0' vs. 'O'. Pre latinské písma sa hodia bezpätkové fonty s veľkou x-výškou a otvorenými tvarmi; pre arabské písma sú dôležité fonty s jasnými spojeniami a dostatočným vnútorným priestorom. Zabezpečte, aby písmo pri zväčšení na 200 % nebolo rozstrapatené a aby sa nezmenili medzery medzi znakmi. V CSS použite font-size-adjust: from-font alebo nastavte explicitné záložné písma s podobnými proporciami, aby ste predišli skokom v rozložení pri zoomovaní. Ďalším aspektom je úroveň kontrastu: písmo na pozadí by malo spĺňať minimálne WCAG-AA (4,5:1), pri malom písme radšej AAA (7:1). Pre 24 jazykov to znamená: otestujte každú jazykovú verziu pomocou kontrolóra kontrastu, pretože niektoré písma pri určitých hrúbkach alebo kurzíve strácajú kontrast. Aj dĺžka riadkov a riadkovanie by sa mali prispôsobiť jazyku – arabské texty často potrebujú väčšiu výšku riadkov ako latinské. Zahrňte tieto testy do svojej automatizovanej kontroly kvality (pozri časť 4), aby ste zaistili, že všetci používatelia – vrátane starších alebo so zrakovým postihnutím – budú môcť vaše obsahy optimálne vnímať.
blog.faqT
Môžem používať Google Fonts pre viacjazyčné stránky EÚ?
Technicky áno, ale z hľadiska ochrany údajov problematické, pretože Google zaznamenáva IP adresy návštevníkov. Pre stránky v EÚ sa odporúča samostatne hostované písmo. Okrem toho Google Fonts ponúkajú len obmedzený výber viacjazyčných písiem; možno budete musieť kombinovať viac rodín, čo zvyšuje záťaž pri načítavaní.
Ako skontrolujem, či moje písmo pokrýva všetky potrebné glyfy?
Použite nástroje ako GlyphChecker alebo Unicode-Range-Test od Wakamai Fondue. Zadajte znaky cieľových jazykov (napr. turecké İ, rumunské Ș). Alternatívne parsujte systém na správu obsahu a extrahujte všetky Unicode body kódu na jazykovú stránku, aby ste ich porovnali s písmom. Takto objavíte medzery pred spustením.
