Tipografija
Fontovi za latinicu: č, ć, đ, š i ž bez iznenađenja
Font za srpsku latinicu mora da ima č, ć, đ, š i ž, a ta slova su u proširenoj latinici, u podskupu koji se zove latin-ext, a ne u osnovnoj. Od 103 Google fonta sa ćirilicom koje sam proverio, nemaju ih Alice, Prata i Neucha, a Philosopher nema č i ć; svi ostali imaju svih deset slova, malih i velikih. Na sajtu kvačice češće nestanu zbog načina na koji se font učitava nego zbog samog fonta.
Provera za 30 sekundi
Na strani fonta na Google Fonts-u upišite u polje za probu teksta rečenicu u kojoj su sva slova abecede:
Fijuče vetar u šiblju, ledi pasaže i kuće iza njih i gunđa u odžacima.
Zatim istu rečenicu velikim slovima, zbog Č, Ć, Đ, Š i Ž. Ako neko slovo izgleda tanje, deblje, više ili prosto drugačije od suseda, font ga nema i pregledač ga je uzeo iz drugog fonta.
Na sopstvenom sajtu isto proverite u Chrome-u: desni klik na reč sa kvačicom, pa Inspect, kartica Computed i na dnu odeljak Rendered Fonts. Tamo piše kojim fontom je nacrtano koliko slova. Ako se pored vašeg fonta pojavi Arial ili Times New Roman, deo slova ne dolazi iz vašeg fonta.
Fontovi sa latinicom i ćirilicom
Firma koja piše i latinicom i ćirilicom treba font koji ima oba pisma, da naslov na ćirilici i naslov na latinici izgledaju kao delovi istog sajta. Svih 40 fontova koje preporučujem na strani Fontovi za ćirilicu ima svih deset slova sa kvačicama i sva srpska ćirilična slova. Za početak:
- tekst: Source Sans 3, Open Sans, Noto Sans, Roboto, Inter;
- serif za duže čitanje: Source Serif 4, Lora, Merriweather, Noto Serif;
- naslovi: Montserrat, Cormorant Garamond, Spectral, Ysabeau;
- kod: Cascadia Code, Roboto Mono, Ubuntu Mono.
Ako sajt danas piše samo latinicom, a ćirilica bi mogla da zatreba, font sa oba pisma štedi kasniju promenu fonta na celom sajtu.
Popularni fontovi sa kvačicama, ali bez ćirilice
Poppins, DM Sans, Work Sans, Outfit, Plus Jakarta Sans, Space Grotesk, Fraunces, Barlow, Figtree, Sora, Urbanist, Lexend i Karla nemaju ćirilicu, a po podacima Google Fonts-a imaju proširenu latinicu. U samim fajlovima to nisam proveravao, pa pre upotrebe uradite probu sa rečenicom iznad.
Za sajt koji piše samo latinicom sasvim su u redu. Na sajtu Denis Market 97 naslovi su u Fraunces-u, fontu bez ćirilice, a tekst u Manrope-u. Ceo spisak popularnih fontova bez ćirilice je na strani Fontovi za ćirilicu.
Pisana latinica
Od rukopisnih fontova koje sam proverio, svih deset slova sa kvačicama imaju Playpen Sans, Great Vibes, Lobster, Caveat i Pacifico. Na strani o ćirilici Caveat i Pacifico su među zamkama, zbog ruskih oblika u ćirilici, ali to se tiče samo ćirilice: latinicu pišu ispravno.
Playpen Sans je napravljen posle istraživanja o tome kako se uči pisanje i ima sedam varijanti svakog slova koje se same smenjuju, pa tekst deluje kao pravi rukopis. Great Vibes i Lobster su za kratke natpise, ne za tekst.
Zašto kvačice nestanu na sajtu: četiri greške iz prakse
Font sa svim slovima nije dovoljan. Na sajtu se font deli na delove koji se učitavaju posebno, i tu nastaje većina grešaka. Ove četiri sam našao i ispravio na sajtovima iz svog portfolija.
Font isečen bez naših slova
Na sajtu Klimatronik 016 Poppins je bio učitan sa sopstvenog servera, ali isečen na 217 znakova, i u tom isečku nije bilo č, ć, š, ž i đ. Ni opseg znakova prijavljen pregledaču ih nije obuhvatao, pa je sva naša slova, na celom sajtu, crtao Arial. Reč „čišćenje“ mesecima je bila pola Poppins, pola Arial, a to niko nije prijavio: oko primeti da nešto štrči, ali ne ume da kaže šta.
Popravka je bila novo sečenje iz punog fajla, sa izričito navedenim slovima koja moraju da ostanu. Pravilo: kad font sečete na podskup, č, ć, đ, š i ž, mala i velika, navedite ručno i posle sečenja proverite rečenicu sa svim slovima.
Proširena latinica stigne prekasno
Na sajtu Zlaja 2015 deo fonta sa kvačicama nije bio unapred učitan, a font je bio podešen tako da ga strana ne čeka. Pri prvoj poseti, sa praznim kešom, slova č, š, ž, ć i đ padala su na sistemski font: u naslovu „Električar“ jedno slovo bilo je krupnije i tamnije od ostalih. Pri svakoj sledećoj poseti sve je izgledalo ispravno, pa je greška preživela mesecima. Rešena je unapred učitanim podskupom sa kvačicama, na sve 22 strane.
Isti razlog stoji iza pravila na sajtu Denis Market 97: č, ć, š, ž i đ su u proširenom delu fonta, pa unapred učitavanje za tekst u Manrope-u pokriva oba dela. Inače bi se ceo tekst jednom prekrojio kad stigne pravi font.
Animacija koja seče kvačice
Na sajtu Medica Centar naslovi su se otkrivali reč po reč, kroz omotač sa overflow: hidden visok tačno jedan red. Sve što izlazi iznad i ispod reda bilo je odsečeno: produžeci slova i kvačice na š, ć i đ, na svakom takvom naslovu. Na srpskom se to vidi odmah, a u konzoli nema nikakve greške. Maska je izbačena i reč se sada otkriva prozirnošću i malim pomerajem.
Pravilo: animacija koja krije tekst iza ivice mora da ostavi mesta iznad i ispod reda, ili da tekst otkriva prozirnošću.
Rezervni font širi od pravog
Dok se pravi font ne učita, pregledač tekst crta rezervnim. Na sajtu Trubači Stars rezervni font bio je širi od pravog, a tri dugmeta u prvom ekranu bila su na samoj granici prelamanja: red od 866 piksela u prostoru od oko 860. Dugmad su padala u drugi red, prvi ekran je rastao, pa se sve vraćalo kad stigne font.
Rešenje je izmereno, ne pogođeno. Rezervnom fontu smanjena je veličina (size-adjust: 95%), sve deklaracije fontova dobile su font-display: optional, a pravilo glasi da rezervni font sme da bude uži od pravog, nikad širi. Pomeranje sadržaja na naslovnoj strani na telefonu palo je sa 0,188 na 0.
Na sajtu Tehnički Pregled Stanković 964 rezervni font drugih proporcija prelamao je naslove. Zadate su mu mere pravog, pa zamena više ne pomera nijedan red.
Kako ja učitavam fontove
Iz tih grešaka ostao je ovaj postupak:
- Sa istog servera kao sajt. Fontove učitavam sa sajta, ne sa Google-ovog servera, kao na sajtovima Denis Market 97 i La Sylphide. Pregledač tako ne šalje zahteve tuđem serveru, a ja tačno znam koji je fajl na sajtu.
- Latinica i proširena latinica uvek, ćirilica kad treba. Kod La Sylphide fontovi su isečeni na tri podskupa, da ruska verzija ima svoja slova, a srpska ne preuzima ćirilicu koja joj ne treba.
- Kvačice na prvom ekranu stižu odmah. Kad naslov ili tekst na prvom ekranu ima slova sa kvačicama, unapred učitavam i deo fonta sa njima, kao na sajtovima Zlaja 2015 i Denis Market 97.
- Rezervni font po meri pravog. Rezervni font dobija mere pravog, uži nikad širi, pa zamena ne pomera tekst.
- Provera sa praznim kešom. Popravku prihvatam tek posle posete kao prvi posetilac, na telefonu i na računaru, jer se greške sa fontom često vide samo pri prvoj poseti.
Pravilo za rezervni font u CSS-u izgleda otprilike ovako; procenat se meri za svaki par fontova, a 95% je vrednost sa sajta Trubači Stars:
@font-face {
font-family: "Rezervni";
src: local("Arial");
size-adjust: 95%;
}
body {
font-family: "Pravi Font", "Rezervni", sans-serif;
}
Ako se na vašem sajtu kvačice vide drugim fontom ili tekst skače pri učitavanju, pošaljite upit sa adresom sajta.
Česta pitanja
Kako da znam da li font ima č, ć, đ, š i ž?
Na strani fonta upišite u polje za probu rečenicu Fijuče vetar u šiblju, ledi pasaže i kuće iza njih i gunđa u odžacima, pa istu rečenicu velikim slovima. Ako neko slovo izgleda drugačije od ostalih, tanje, deblje ili više, font ga nema i pregledač ga je uzeo iz drugog fonta. Na sajtovima sa fontovima traži se i podrška za proširenu latinicu (Latin Extended, latin-ext).
Zašto se slova sa kvačicama na mom sajtu vide drugim fontom?
Najčešće zato što deo fonta sa tim slovima nije na sajtu ili stiže prekasno. Ako je font isečen bez njih, pregledač ih crta sistemskim fontom, kao što je Arial crtao naša slova na sajtu Klimatronik 016. Ako deo sa kvačicama nije unapred učitan, a strana ga ne čeka, greška se vidi samo pri prvoj poseti, kao na sajtu Zlaja 2015.
Šta je latin-ext?
To je ime dela fonta, podskupa, sa proširenom latinicom, u kome su i č, ć, đ, š i ž. Google Fonts i paketi @fontsource dele fontove na podskupove, na primer latin, latin-ext i cyrillic, a pregledač preuzima samo one koji su strani potrebni. Srpskom sajtu na latinici trebaju latin i latin-ext.
Da li Poppins ima srpska slova?
Latinicu sa č, ć, đ, š i ž ima, po podacima Google Fonts-a, ali ćirilicu nema. Ako Poppins sečete na podskup za svoj sajt, proverite da su kvačice ostale: na sajtu Klimatronik 016 isečak ih nije imao, pa je naša slova crtao Arial.
Gde da nađem pisanu latinicu?
Na Google Fonts-u, besplatno. Od fontova koje sam proverio, č, ć, đ, š i ž imaju rukopisni Playpen Sans, Great Vibes, Lobster, Caveat i Pacifico. Playpen Sans liči na običan rukopis, a Great Vibes na krasopis, pa je bolji za kratke natpise nego za tekst.