U web tipografiji možemo koristiti bilo relativne ili apsolutne vrednosti kako bismo definisali veličinu karaktera, odnosno celog teksta. Sve ove jedinice se koriste za tipografiju, ali se neke mogu primeniti i na druge elemente, poput margina, dimenzija širine/visine i tako dalje.
Apsolutne vrednosti su tačno određene i u potpunosti ne zavise od drugih elemenata ni vrednosti.
Relativne vrednosti su zavisne od nasleđene vrednosti ili default vrednosti (u odsustvu pređašnje), kao što ćemo videti na primerima.
Dostupne jedinice su:
- Apsolutne jedinice
- in – inč (2.54mm)
- pt – point, tipografska tačka (1 point je 1/72 inča)
- pc – pika (1 pika je 12 pointa)
- cm – centimetar
- mm – milimetar
- px – piksel (jednobojna, nedeljiva tačka na ekranu monitora/uređaja)
- Relativne jedinice
- em – ems
- % – procenat
- ex – x-height
Apsolutne jedinice preuzete iz štampanih medija, kao što su in, pt, pc, cm i mm, trebalo bi maksimalno izbegavati na webu, osim u slučaju kada pripremamo poseban CSS za štampu.
Pomoću piksela (px) tačno i apsolutno određujemo veličinu. Ukoliko postavimo vrednost veličine na 12 px, uvek će biti 12 px. Realna dimenzija zavisi samo od rezolucije monitora i slično. Uz em vrednosti možda je najčešće korišćena jedinica.
Procentualna jednica em je dobila takav naziv pošto je ranije, u doba analogne štampe, zavisila od velikog slova M u fontu, jer je ono kreiralo kvadratnu formu i bilo isto za sve fotove u istoj veličini. Danas, u modernim digitalnim fontovima, em vrednost je procentualna vrednost fonta koji se koristi, drugim rečima, veličina se nasleđuje od roditeljskog elementa. To praktično znači da dobijenu veličinu množimo sa em vrednošću.
Najlakše je objasniti na primeru. Moderni browseri po default vrednosti dodeljuju veličinu od 16 px normalnom tekstu u <body> elementu (na celoj strani). Ukoliko bismo postavili veličinu na 1 em, veličina bi bila 16 px. Ukoliko bismo postavili veličinu na 2 em, veličina bi bila 16px*2em=32px. Razmotrićemo još jedan primer. Default vrednost je 16 px, kako smo rekli. Postavićemo jedan div i njegovom tekstu dodeliti veličinu od 3 em. Unutar njega ćemo postaviti još jedan div i na njemu veličinu od 0.5 em. Tada bismo dobili 16px*3em*0.5em=24px. Kao što možemo zaključiti, em vrednost zavisi direktno od parent, okružujućeg elementa.
Odnos veličina
Jedinica Ex je relativna i zavisi od visine karaktera x u izabranom fontu, ponaša se slično kao em, ali je treba izbegavati.
Upravljanje tipografijom kroz CSS
Izbor fonta (font-family)
Izbor fonta za prikaz teksta u nekom elementu vršimo postavljanjem svojstva font-family iza kojeg sledi vrednost u pogledu jednog ili više fontova (familija). Pogledajmo na primeru:
body {
font-family:Georgia;
}
U kôdu iznad definisali smo da cela strana (body element) bude prikazana u Georgia fontu. Ali ukoliko nismo sigurni da računar korisnika sadrži pomenuti font, možemo postaviti više vrednosti, odvojenih zarezom, tako će browser prvo pokušati da prikaže tekst u prvom, pa ako ne uspe, u drugom i tako dalje. Pogledajmo ovaj primer:
h1 {
font-family:Arial, Helvetica, sans-serif;
}
Kao što se na primeru iznad vidi, browser će pokušati da prikaže u Arial fontu tekst, ako ga ne pronađe na računaru, pokušaće Helveticu. Ako i taj font nije dostupan, izabraće bilo koji sans-serifni jer smo uneli generički naziv (takođe postoji i serif).
Ukoliko naziv fonta sadrži više od jedne reči, postavljamo vrednost pod navodnicima:
body {
font-family:”Times New Roman”, Times, Georgia, serif;
}
Izbor veličine teksta (font-size)
Font-size svojstvo nam omogućuje da izaberemo veličinu teksta, o kojoj smo već pričali. Preporuka je korišćenje px, em ili % vrednosti.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 1.3em;
}
Po default vrednostima, tekst na stranicama je veličine 16px (ne odnosi se na naslove – h tagove). Većina autora se odlučuje za jednu od dve varijante. Možemo postaviti osnovni font na 12px, a srazmerno povećati naslove. Ili ostaviti osnovni tekst na 16px što može biti preveliko na prvi pogled, ali kada se neko navikne, teško se vraća na sitnije vrednosti.
Primer mogućih veličina fontova
Težina fonta (font-weight)
Pomoću font-weight svojtva određujemo da li je font prikazan bold ili ne. Dostupne vrednosti su bold i normal.
.boldTekst {
font-weight:bold;
}
Možda se pitate zašto nam je potrebna vrednost normal. Može se desiti da nekom elementu postavimo bold, a onda unutar njega drugi element. Taj drug element će naslediti bold, i njemu onda možemo dodati font-weight:normal. Pored toga, naslovi (h tagovi) su po default vrednosti bold. Možda želimo da budu normal.
Font stil (font-style)
Ukoliko želimo da postavimo italic nad fontom, koristićemo svostvo font-style. Može imati vrednosti italic, oblique ili normal. Italic predstavlja italic verziju ugrađenu u font, dok je oblique samo iskošena verzija normalnog fonta. Ipak, praktično da i nema razlike na većini fontova. Situacija sa normal vrednošću je ista kao kod malopre pomenutog font-weight.
.citat {
font-style:italic;
}
Ukoliko ste koristili i koristite MS Word, onda ste verovatno navikli da posmatrate bold i italic kao srodne elemente, ali su u web tipografiji totalno nezavisni.
Velika i mala slova (text-transform)
Ukoliko želimo da prilikom prikaza utičemo na velika i mala slova, možemo koristiti text-transform i jednu od tri vrednosti: uppercase, lowercase i capitalize. Uppercase postavlja sva slova na velika, lowercase je suprotno, sva slova postaju mala, dok capitalize postavlja prvo veliko slovo svake reči.
h1 {
text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}
.potpis {
text-transform: capitalize;
}
Bitno je napomenuti da tekst u HTML dokumentu ostaje kakav jeste već da se menja samo prikaz korisniku. Ova opcija je korisna na primer kada niste sigurni kakav će tekst proslediti baza podataka, a želite da budete sigurni u prikaz.
Text-decoration
Svojstvo text-decoration koristimo da postavimo liniju ispod teksta (underline vrednost), liniju iznad teksta (overline vrednost), liniju kroz tekst (line-trought vrednost) ili da postavimo da tekst treperi (blink vrednost). Sve vrednosti su korisne osim poslednje, koju preporučujem da izbegavate maksimalno.
h1 {
text-decoration: underline;
}
Ovaj primer bi postavio liniju ispod naslova.
Česta upotreba ovog svojstva je kod stilizacije linkova. Naime, po default vrednostima, linkovi imaju liniju ispod teksta, a ako želimo da je uklonimo koristićemo ovu mogućnost. Pogledajmo primer:
a, a:link {
color: #e31b23;
text-decoration:none;
}
a:visited
{
color: #e31b23;
text-decoration:none;
}
a:hover
{
color: #555555;
text-decoration:underline;
}
Ovime smo postavili da normalni i posećeni linkovi nemaju liniju ispod, dok se ona pojavljuje samo prilikom prelaska mišem preko linka (hover stanje). Inače, u selektorima ovde su postavljene pseudo klase, koje ćemo upoznati kasnije.
Leading (line-height)
Visinu redova smo pomenuli u uvodnom delu ove jedinice. Ukratko, ukoliko povećavamo line-height svojstvo povećava se razmak između redova i obrnuto.
p {
line-height:1.4em;
}
U ovom primeru, vrednost je data u em jednicama, što je i preporuka, jer zavisi od veličine teksta i nije fiksna kao kada bismo koristili piksele.
Text-align
Horizontalno poravnanje teksta možemo postavljati pomoću ovog svojstva. Dostupne vrednosti za text-align su left, center, right i justify. Svima su, verujem, ove opcije poznate iz Worda i sličnih alata. Left i right će postaviti poravnanje po levoj, odnosno desnoj ivici okvira. Center će centrirati tekst, dok će justify poravnati tekst i po levoj i po desnoj ivici, pritom uticati na razmake. Primer:
#footer {
text-align: center;
}
Ovo svojstvo ne utiče samo na tekst, već i na sve inline elemente.
Vertical-align
Ovo svojstvo može biti zbunjujuće i pogrešno shvaćeno. Ono nije namenjeno za vertikalno poravnanje block elemenata, već za međusobno poravnanje inline elemenata na jednom redu, slično kao kod slika i njenog HTML atributa valign (u 7. jedinici).
.textGore {
vertical-align: text-top;
}
.textBaseline {
vertical-align: baseline;
}
Približan prikaz u browseru, ako je postavljena slika i tekst, bi izgledao:
Primer za dve vertical-align vrednosti
Moguće vrednosti su baseline, sub, super, top, text-top, middle, bottom, text-bottom.
Text-indent
Ovo svojstvo koristimo za uvlačenje tekst po horizontali. Uglavnom se postavlja u px ili em jedinicama.
.citat {
font-style:italic;
text-ident:40px;
}
Ono što je zanimljivo je da vrednost može biti negativna. Ukoliko,, na primer, postavimo vrednost na “-9999px” tekst će nestati iz browsera jer je pomeren za 9999 piksela levo.
Kerning (letter-spacing)
Ovo svojstvo definiše razmak između pojedinačnih karatera u tekstu. Preporuka je da se koristi em vrednost. Povećanje i smanjenje utiču na čitljivost.
p {
letter-spacing:0.4em;
}
Razmak između reči (word-spacing)
Slično kao prethodno svojstvo, samo što postavlja razmak između reči.
p {
letter-spacing:0.4em;
word-spacing:0.3em;
}
Font face[1]
U poslednje vreme, korišćenjem @font-face funkcionalnosti CSS3, možemo ugraditi neki specifičan font u naše stranice. Potrebno je da na određeni način pripremimo font fajlove (u više različitih formata) i da ga pravilno inicijalizujemo kroz CSS.
Ipak, pošto je sama sintaksta relativno komplikovana, kreirani su razni alati koji nam pomažu u tome. Na primer, sajt http://www.fontsquirrel.com/ može pripremiti fajlove i čak kreirati CSS kod za nas.
Inače, na kraju kursa, u jedinici koja se bavi CSS3 svojstvima, ćemo se vratiti na @font-face.
[1] Relativno nov način učitavanja nestandardnih fontova za naše stranice. Koristi CSS3.