Tipografija je tehnika i umetnost prikaza teksta na razumljiv i vidljiv način.
Sasvim je jasno da se tipografija pojavila sa prvim zapisanim rečima u istoriji, menjala se i napredovala, evoluirala tokom godina i vekova. U proteklih nekoliko godina, iz cele nauke, izdvojila se web tipografija kojom ćemo se mi baviti, barem jednim delom.
Za one koji žele dalju avanturu sa web tipografijom, preporučujem sledeću adresu: http://webtypography.net/, kao i ovaj zanimljiv članak A list apart magazina: http://www.alistapart.com/articles/on-web-typography/
Kao i za sve ostale elemente na stranicama, HTML stranica postavlja sadržaj, a CSS opisima utičemo na tipografiju u svim aspektima, što itekako može imati uticaj na stranice. Ukoliko je tekst pravilno postavljen, čitljiv, pregledan, sve će biti ok. Nasuprot tome, nečitljiv tekst će svakako oterati posetioca strane za nekoliko sekundi. Jer, ne zaboravite, iako su svi drugi elementi odlični, posetilac nije na satu zbog toga, već zbog sadržaja (teksta, eventualno slike…). Tipografija je pogotovo bitna na modernom webu, kada smo prevazišli period šljaštećih elemenata, napadnih animacija i sl, i kada se otvaraju nove mogućnosti koje su ranije bile nedostupne.
Logično je početi izborom samog fonta koji ćemo koristiti u datom kontekstu. Fontovi se uglavnom dele na neke osnovne kategorije:
- Serif – Ovi fontovi poseduju određene detalje na krajevima linija. Ti detalji se nazivaju serif, odatle i naziv. U klasičnoj tipografiji, smatra se da su serif fontovi čitljiviji od drugih u dugim pasusima i tekstovima. Nekad se koristi i termin Roman.Najčešći serif fontovi na webu su Times New Roman, Garamond i Times i td.
- Sans Serif – Reč sans je iz francuskog jezika i u prevodu znači „bez“ i već možemo pretpostaviti da ove fontove odlikuje odsustvo serif detalja. Ove fontove karakterišu prave, čiste i čvrste linije, bez previše detalja. Imaju čistiji i moderniji izgled.Najčešći sans-serif fontovi na webu su Arial, Tahoma, Verdana, Helvetica itd.
- Monospace – Ove fontove odlikuje osobina da svi karakteri zauzimaju isti horizontalni prostor. Za početak njihove primene se uglavnom smatra pojava kucaćih (pisaćih) mašina, kada su zbog tehnoloških ograničenja bili potrebni takvi fontovi. Kasnije su našli primenu na prvim računarima i terminalima i dalje se koriste u programiranju.Najčešći serif font na webu je Courier New (ili Courier).
Najčešće kategorije fontova
Pored pomenutih kategorija, postoje i mnoge druge, poput script fontova (imitiraju pisanje rukom), ali i podkategorije pomenutih, poput slab-serif fontova (koje odlikuju uglavnom pravougaoni serifi). Mi ćemo se zadržati na ranije pomenutim kategorijama jer su najčešći na webu.
Napomena: u govoru često koristimo reč font u nepravilnom kontekstu. Font je tačno određeni stil i veličina neke font familije. Na primer, Verdana 11pt bold je font, dok je Verdana font familija. Ipak, dalje u tekstu koristićemo termin font jer je odomaćen i prihvaćen u govoru.
Da bismo dalje u tekstu razumeli o čemu se govori, proći ćemo neke od osnovnih termina, a koji su preuzeti iz klasične tipografije:
- Osnovna linija (baseline) je zamišljena linija na kojoj „sede” slova.
- Središnja linija (median) je zamišljena linija koja određuje visinu (malih) slova.
- Visina fonta (x-height) je razmak između osnovne i središnje linije. Tradicionalno zavisi od malog slova X latiničnog alfabeta.
- Ascender je deo slova koji se izdiže iznad središnje linije.
- Descender je deo slova koji se spušta ispod osnovne linije.
Osnovni detalji tipografije
Čitljivost se ogleda u izboru fonta. Važno je da su slova, tj. određeni karakteri čitljivi i vizuelno razdvojeni. Sve su to aspekti koji zavise od samog fonta i njegovih karakteristika. Ali zato imamo mogućnost pravilnog izbora familije, kao i logičnog raspoređivanja na strani, što daje preglednost i lako razumevanje teksta, njegovog toka i slično.
Dužina reda takođe utiče na preglednost i uopšteno je mišljenje da bi pojedinačna linija teksta trebalo da bude između 45 i 75 karaktera, mada to nije pravilo i postoje odstupanja. Neki sajtovi i portali koji su uglavnom tekstualni imaju dužinu redova i do 100 karaktera, što je i dalje prihvatljivo. Ukoliko se tekst deli u kolone, onda bi trebalo ići sa manjim brojem karaktera. Ukoliko se koristi justify poravnanje, duži redovi se bolje ponašaju u browserima.
Visina reda ili Leading (Line height) označava razmak između dve osnovne linije teksta. Za web browsere je uobičajena, default vrednost od 1 em. Što u realnim uslovima za font veličine 16 px kreira line-height takođe od 16 px. Takav poredak je dosta nečitak, te se preporučuje minimalno 1.2 em ili veći. Primer: ako je veličina fonta 10 px, vrednost od 1.4 em za line height daće 14 px.
Tracking (letter spacing) je razmak između pojedinačnih karaktera u tekstu. Može biti i negativno. Trebalo bi biti oprezan sa nekim parovima slova, poput ft, rn, vv jer može doći do vizuelnog spajanja karaktera i nerazumevanja, nečitljivosti teksta.
Word spacing je razmak između reči u tekstu.
Osnovni detalji tipografije
Iako će ovo možda delovati čudno, ali na webu ne možemo koristiti bilo koji font. U nekim drugim medijima, na primer, kada kreiramo tekst u Wordu ili kada pravimo plakat u Adobe Illustratoru, imamo na raspolaganju čitav dijapazon fontova koje možemo koristiti. Kod web stranica je drugačija situacija, jer font zavisi od računara korisnika. Tačnije, mi ne ugrađujemo font u samu stranicu, već samo informaciju koji je font upotrebljen.
Na primer, ukoliko unesemo tekst i definišemo kroz CSS da se koristi Verdana font, browser korisnika će dobiti tekst i informaciju o fontu, među ostalim informacijama i stilovima. Tada browser prikazuje tekst, ali u fontu koji učitava sa računara korisnika. Ukoliko korisnik nema instaliran željeni font (Verdana, u našem primeru) biće prikazan default font, što je na Windows sistemima Times New Roman. Svakako je jasno da tako nešto nije mnogo poželjno i predstavlja veliko ograničenje. Povrh svega, različiti korisnici koriste različite sisteme, Windows, Mac, Linux, Android, iOS, Symbian i tako dalje, sa različitim instaliranim fontovima. Ukoliko bi tekstu na strani postavili npr. font Helvetica, browseri na Mac sistemima bi ga normalno prikazali (jer je to jedan od default Mac fontova), dok bi na Windowsu ili Linuxu nastao problem svima osim onima koji su sami instalirali Helveticu.
Dakle, šta onda činiti ako je to toliki problem? Postoje neki fontovi koji su zajednički za većinu sistema i možemo ih slobodno koristiti, mada nisu isti u potpunosti u Win i Mac okruženjima, tako da ih moramo duplo definisati (videćemo kasnije).
Sigurni fontovi (Win/Mac, ako se razlikuju) su Arial/Helvetica, Times New Roman/Times, Tahoma(Verdana)/Geneva, Courier New/Courier, Georgia, Comic Sans MS. Sa njima ste sigurni da će se tekst prikazati u fontu koji ste izabrali.
Ovo je prilično ograničavajuće i može biti frustrirajuće, ali ako analizirate sajtove na webu, videćete da je preko 90% njih koncipirano sa nekim od ovih fontova. Ranije su neki autori koristili specifične tehnike koje su omogućavale druge fontove, kao što su sIFR ili Cufón. Ipak, njihova upotreba nije preterano preporučljiva jer se baziraju na JavaScriptu, Flashu i drugim jezicima, što usporava učitavanje. Možemo reći da su ove tehnike više bile, kako se u narodu kaže, „pomoću štampa i kanapa”, ali su postavile osnovu za ono što je usledilo.
U poslednje vreme, sa pojavljivanjem @font-face opcije, stvari se polako menjaju i omogućeno nam je da koristimo praktično bilo koji font na stranicama (više na kraju jedinice). Ova opcija se već uveliko upotrebljava, ali zbog nedostatka jednog standarda (svaki browser tera svoju priču) i odsustva podrške u starijim browserima (IE), još nije zaživela u potpunosti.