2025-07-02 · Uredništvo Baduno · 7 blog.readMin · Blog & Znanje
Web fontovi za 24 jezika: Odabir fonta, subsetting, performanse
Font koji nosi njemački, grčki, malteški i arapski? Rijetko postoji – a ako postoji, težak je. Strategije za brzu, lijepu višejezičnost.
Problem pokrivenosti
Latinica sa svim EU dijakritičkim znakovima, grčki, ćirilica, uz arapsko pismo: Rijetko koja obitelj fontova sve dobro pokriva. Pragmatično rješenje su parovi fontova – jedna obitelj za latinicu/grčki/ćirilicu plus specijalizirani RTL font, usklađeni u sivom tonu i visini.
Podskupovi štede značajno
Potpuni Unicode fontovi teže stotine kilobajta. Podskupovi po sustavu pisma – učitani samo tamo gdje su potrebni – smanjuju to na djeliće: RTL verzija učitava RTL font, njemačka ne.
Učitavanje bez skokova
font-display:swap odmah prikazuje tekst sa sistemskim fontom, a zatim zamjenjuje – protiv skokova rasporeda pomažu metrički kompatibilni fallbackovi i size-adjust. Samostalno hostirano umjesto s vanjskog CDN-a: brže i privrženije privatnosti.
Tipografija po pismu
Arapsko pismo zahtijeva veću visinu retka i često jedan bod veći stupanj; razmaci velikih slova funkcioniraju samo u latinici. Dizajnerski sustav koji poznaje takva pravila po sustavu pisma od 24 jezika stvara jedan izgled – umjesto 25 kompromisa.
Varijabilni fontovi: Fleksibilnost s preprekama
Varijabilni fontovi obećavaju smanjeni broj datoteka objedinjavanjem više rezova (podebljani, kurziv itd.) u jednu datoteku. Za višejezične stranice s 24 jezika to je primamljivo: umjesto 24 × 4 = 96 statičkih datoteka samo 24 varijabilne? No, oprez: varijabilni fontovi sa širokim jezičnim rasponom (latinica, grčki, ćirilica, arapski) rijetki su i često veliki. Podskupivanje (subsetting) postaje složenije jer osi varijacije utječu na skup znakova. Podskupljeni varijabilni font može zahtijevati različite glifove ovisno o izražaju osi, tako da morate ili držati sve podskupove ili ih dinamički generirati. Praktično je koristiti varijabilne fontove za jednu obitelj pisma (npr. latinica + grčki) i statičke fontove za drugu (npr. arapski) kako biste kontrolirali veličinu datoteke. Učitajte varijabilne fontove pomoću font-weight: 100 900 i font-stretch: 75% 125% umjesto pojedinačnih rezova – ali testirajte prikaz na svim jezicima i preglednicima, jer varijabilni fontovi ponekad daju neočekivane rezultate pri podskupivanju i rasterizaciji.
Korištenje fontova u skladu s licencom na 24 jezika
Pravna strana često se podcjenjuje. Licenca za font obično vrijedi za određeni broj pregleda web stranice ili za domenu; s 24 jezične varijante možete naići na ograničenja ovisno o licenci. Neki pružatelji izričito zabranjuju podskupivanje ili ugrađivanje u dinamički sadržaj. Pazite da licenca pokriva sve jezike – posebno posebni znakovi poput turskog İ, rumunjskog Ș ili malteškog Ħ često se smatraju proširenim skupom znakova i nisu uvijek uključeni u standardni paket. Za EU projekte preporučuje se Unlimited ili Enterprise licenca koja dopušta podskupivanje i korištenje na više domena. Također provjerite valjanost licence fonta za tehnologiju koju koristite (npr. WOFF2). Alat za savjetovanje o licencama (npr. Fontstand) može pomoći u izbjegavanju sukoba – zabilježite uvjete licence za svaki font u svom stilskom vodiču kako ne bi bilo potrebe za doradama.
Natjecanje formata: WOFF2, podskupljeni varijabilni fontovi i Unicode-Range
Izbor formata datoteke utječe na vrijeme učitavanja i kompatibilnost. WOFF2 je danas standard i nudi oko 30-50% bolju kompresiju od WOFF-a. Ako koristite varijabilne fontove, provjerite podržava li vaš ciljani preglednik WOFF2 s varijabilnim osima (trenutačno svi moderni preglednici). Za starije preglednike (IE11) morate imati statičke WOFF datoteke kao rezervu. Učinkovit trik: koristite Unicode-Range u @font-face za učitavanje samo stvarno potrebnog skupa znakova – slično podskupivanju, ali upravljano na strani poslužitelja. Kombinirajte to s font-display: swap; optimizaciju učitavanja možete podržati putem preload za kritične varijante fontova (npr. osnovni font za latinicu). Primjer iz prakse: za njemačku stranicu učitajte samo podskup latinice i umlauta (oko 30 KB), za grčku stranicu podskup latinice i grčkog (oko 50 KB), za arapsku stranicu podskup latinice i arapskog (oko 80 KB). Tako čak i s 24 jezika ukupna preuzimanja po posjetitelju ostaju ispod 100 KB podataka o fontovima.
Font koji nosi njemački, grčki, malteški i arapski? Rijetko postoji – a ako postoji, težak je. Strategije za brzu, lijepu višejezičnost.
Automatizirano osiguranje kvalitete prikaza fontova
Kako u svim 24 jezične varijante ne bi nedostajali glifovi ili djelovali isprekidano, trebali biste ugraditi automatizirane testove u svoj CI/CD cjevovod. Alati poput FontProof, Wakamai Fondue ili Python skripte fontdiff uspoređuju renderirane snimke zaslona svake jezične verzije s referentnom snimkom. Ili koristite Puppeteer za otvaranje svake stranice, učitavanje fonta i provjeru praznina (putem CSS svojstva font-family: …; font-unicode-range). Još sustavnije: izdvojite sve Unicode kodne točke koje se pojavljuju u HTML-u po jezičnoj verziji i uskladite ih s glifovima prisutnim u podskupu. Ako nedostaje znak, izgradnja se prekida ili se izdaje upozorenje. Ti bi testovi trebali provjeravati i čitljivost ligatura ili alternativnih znakova (npr. arapski inicijalni oblici). Također integrirajte provjeru proračuna performansi: veličina fonta po jeziku ne smije premašiti određeni prag. Time osiguravate da višejezičnost ne ide nauštrb vremena učitavanja.
Podskupovi potpomognuti umjetnom inteligencijom: učinkovitost kroz automatizaciju uz osiguranje kvalitete
Ručno upravljanje podskupovima za 24 jezika je zahtjevno i sklono pogreškama. Suvremeni alati za izradu poput glyphhanger ili HarfBuzz mogu automatski generirati podskupove na temelju stvarnih znakova koji se pojavljuju u sadržaju. Proces postaje još učinkovitiji korištenjem AI modela koji predviđaju potrebne Unicode blokove iz jezičnih verzija. Neuronska mreža, trenirana na višejezičnim web stranicama, može s visokom točnošću odrediti koji su glifovi potrebni za određeni jezik – od osnovnih latiničnih znakova preko ćiriličnih dodataka do arapskih ligatura. Automatski generirani podskup zatim prolazi ručnu provjeru od strane izvornog govornika kako bi se osiguralo da nijedan rijedak, ali važan znak (npr. povijesni citati, posebni znakovi u nazivima tvrtki) nije izostavljen. Ova kombinacija ubrzanja umjetnom inteligencijom i ljudske kontrole smanjuje izradu podskupova s dana na sate uz zadržavanje visoke kvalitete. Integrirajte skriptu u svoj CI/CD lanac tako da se pri svakom ažuriranju sadržaja podskupovi automatski ponovno generiraju i testiraju. Na taj način osiguravate da su datoteke fontova uvijek ažurne, bez utjecaja na performanse učitavanja.
Jezično specifične strategije rezervnih fontova za konzistentnu tipografiju
Čak i uz optimalno podskupivanje, može se dogoditi da se datoteka fonta ne učita – bilo zbog mrežne pogreške, nekompatibilnosti preglednika ili ograničenja licence. Tada stupa na snagu stog rezervnih fontova. Za 24 jezika jedan globalni stog fontova nije dovoljan: sistemski font koji dobro izgleda na njemačkom može biti neprikladan za arapski. Stoga definirajte zasebne stogove rezervnih fontova po jezičnoj verziji, prilagođene tipičnim sistemskim fontovima ciljne regije. Koristite CSS funkciju @font-face s unicode-range kako biste za svaku obitelj fontova učitavali samo znakove koji su stvarno potrebni. Za arapsku verziju možete navesti 'Traditional Arabic' ili 'Tahoma' kao rezervni font, za grčku 'GFS Didot' ili 'Times New Roman'. Pazite na metričku kompatibilnost: pomoću size-adjust i ascent-override vizualno prilagodite rezervni font primarnom fontu kako biste minimizirali skokove u rasporedu. Testirajte ove rezervne fontove na svim jezicima automatiziranom usporedbom snimaka zaslona kako biste osigurali čitljivost čak i u slučaju pogreške. Na taj način izbjegavate iznenađenja i osiguravate dosljedno korisničko iskustvo na svim jezičnim varijantama.
Optimizacija na strani poslužitelja: samostalno hostiranje, predmemoriranje i CDN strategije
Isporuka webfontova putem vanjskih servisa poput Google Fonts ili Adobe Fonts je praktična, ali donosi nedostatke za višejezične projekte: Prvo, kod 24 jezične varijante često morate slati više zahtjeva različitim poslužiteljima, što povećava vrijeme učitavanja. Drugo, ne poznajete strategiju predmemoriranja davatelja usluge i nemate kontrolu nad zastojima ili privatnošću podataka. Stoga preporučujemo samostalno hostiranje svih datoteka fontova na vlastitom poslužitelju ili namjenskom CDN-u. Samostalnim hostiranjem možete precizno prilagoditi podskupove fontova svojim jezičnim verzijama i prioritizirati kritične fontove pomoću HTTP/2 Server Push ili Preload-Hints. Također, predmemoriranje se može kontrolirati putem Cache-Control zaglavlja tako da se fontovi samo jednom učitavaju za sve posjetitelje određene jezične verzije. CDN s rubnim poslužiteljima blizu vaših korisnika smanjuje latenciju. Za 24 jezika s različitim ciljnim regijama, CDN je ključan: korisnici u Finskoj učitavaju finski podskup fonta s obližnjeg rubnog čvora, korisnici na Malti odgovarajuće. Važno: postavite zasebno pravilo predmemoriranja za svaku jezičnu verziju, tako da se npr. njemačka datoteka podskupa predmemorira s dugim rokom trajanja (npr. godinu dana), dok kod ažuriranja fontova poništavate predmemoriju promjenom naziva datoteke (fingerprinting). Na taj način osiguravate brzu isporuku fontova i njihovu stalnu ažurnost, bez čekanja korisnika na ažuriranja.
Pristupačnost i čitljivost: odabir fonta za sve skupine korisnika
Višejezičnost ne znači samo ispravno prikazivanje znakova, već i da je font čitljiv za sve korisnike – neovisno o vidnoj sposobnosti, veličini zaslona ili uređaju. Stoga pri odabiru fonta pazite na dovoljnu razlučivost slova, posebno kod sličnih znakova poput 'rn' naspram 'm' ili '0' naspram 'O'. Za latinična pisma prikladni su bezserifni fontovi s velikom x-visinom i otvorenim oblicima; za arapska pisma važni su fontovi s jasnim vezama i dovoljnim unutarnjim prostorom. Osigurajte da se font pri povećanju na 200% ne raspada ili da se razmaci između znakova ne mijenjaju. Koristite u CSS-u font-size-adjust: from-font ili postavite eksplicitne zamjenske fontove sličnih proporcija kako biste izbjegli skokove rasporeda pri zumiranju. Drugi aspekt je razina kontrasta: tekst na pozadini treba zadovoljavati najmanje WCAG-AA (4,5:1), a za sitniji tekst bolje AAA (7:1). Za 24 jezika to znači: testirajte svaku jezičnu verziju s provjerom kontrasta jer neki fontovi pri određenim debljinama ili kurzivu gube kontrast. Također, duljina reda i razmak redaka trebaju se prilagoditi jeziku – arapski tekstovi često zahtijevaju veću visinu reda od latiničnih. Uključite ove testove u svoju automatiziranu kontrolu kvalitete (vidi odjeljak 4) kako biste osigurali da svi korisnici – uključujući starije ili slabovidne – mogu optimalno percipirati vaš sadržaj.
blog.faqT
Mogu li koristiti Google Fonts za višejezične EU stranice?
Tehnički da, ali problematično iz perspektive zaštite podataka jer Google bilježi IP adrese posjetitelja. Za EU stranice preporučuje se samostalno hostirani font. Osim toga, Google Fonts nudi ograničen izbor višejezičnih pisama; možda ćete morati kombinirati više obitelji, što povećava opterećenje učitavanja.
Kako provjeriti pokriva li moj font sve potrebne glifove?
Koristite alate poput GlyphChecker ili Unicode-Range testa iz Wakamai Fondue. Unesite znakove svojih ciljnih jezika (npr. turski İ, rumunjski Ș). Alternativno, parsirajte svoj sustav za upravljanje sadržajem i izdvojite sve Unicode kodne točke po jezičnoj stranici kako biste ih usporedili s fontom. Tako otkrivate praznine prije objave.
