Tipografija

Tipografija je tehnika i umetnost prikaza teksta na razumljiv i vidljiv način. Reč tipografija potiče od grčkih reči τύπος, što znači forma, i γραφή, što znači pisanje, dakle slobodan i grub prevod bi mogao biti forma pisanja. Tipografija se pojavila u antička vremena uporedo sa prvim pisanim tragovima, ali se početkom moderne tipografije smatra trenutak pojave prve štamparije Johana Gutenberga.

Mi se nećemo baviti tipografijom uopšteno, već samo web tipografijom, odnosno prikazom teksta na internetu. Ipak, ukoliko su Vam ovi opšti pojmovi nepoznati, preporučujem da pogledate vodič kroz tipografiju koji je pripremila kompanija Adobe. Može se besplatno preuzeti u PDF formatu na putanji: type_primer.pdf. Za pravilno razumevanje web potrebno je uopšteno poznavanje one klasične tipografije.

Uglavnom, kada se pomene tekst, većina ljudi pomisli na jednostavno pisanje i osnovno formatiranje, poput izbora fonta i poravnanja, eventualno bold/italic varijanti. Ipak, postoji mnogo aspekata na koje moramo obratiti pažnju oko uređivanja tekstova, pod uslovom da imamo pripremljen pravilno napisan i gramatički ispravan tekst.

Čitljivost se ogleda u izboru fonta (font-familije)¹. 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.

Apsolutne i relativne font vrednosti

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 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 odsustvo pređašnje, kao što ćemo videti na primerima.

Dostupne jedinice su:

• Apsolutne jedinice
      o in – inč (2.54mm)
      o pt – point, tipografska tačka (1 point je 1/72 inča)
      o pc – pika (1 pika je 12 pointa)
      o cm – centimetar
      o mm – milimetar
      o px – piksel (jednobojna, nedeljiva tačka na ekranu monitora/uređaja)
• Relativne jedinice
      o em – ems
      o % - procenat
      o ex – x-height

Apsolutne jedinice preuzete iz štampanih medija, kao što su in, pt, pc, cm i mm,  trebalo bi maksimalno izbegavati na internetu, osim u slučaju kada pripremamo poseban CSS za štampu. Jedinica Ex je relativna i zavisi od visine karaktera x u izabranom fontu, ponaša se slično kao em.

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. Aktuelna dimenzija samo zavisi 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 parent 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.

Prikazane em vrednosti

Važno je napomenuti da, po default vrednostima, svi tipografski elementi imaju svoje određene vrednosti. Kako smo pomenuli, osnovna vrednost za normalan tekst je 16 px, dok je na primer za h1, 2 em – što daje h1 veličinu od 32 px.

Neki od najčešće korišćenih elemenata i njihove default veličine

Ove default vrednosti, tj njihove veličine ne bi trebalo pamtiti. Odlika dobrih web dizajnera jeste da ništa ne prepuste slučaju i zato je uvek dobro definisati svoje vrednosti. Drugim rečima, ako definišemo dimenzije za h1-h6, za paragrafe i tako dalje, ne moramo brinuti o default podešavanju.

Dostupni fontovi

Na stranicama koje kreiramo ne možemo koristiti bilo koji font, odnosno font-familiju. Ovo možda deluje čudno i nelogično na prvi pogled. 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 njihova tipografija 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.

Sve ovo pomenuto je dovelo do toga da se koristi relativno mali broj fontova na internetu i pri tom se kroz CSS ne definiše samo jedan izbor, već niz fontova (engl. font stack). U tom slučaju, browser će ići redom i prikazati tekst u prvom fontu koji je dostupan. Pravilo je da se uvek završi generičkim izborom - serif ili sans-serif.

Predefinisani font-family nizovi

Na slici vidimo izbor od predefinisanih font nizova u DW-u prilikom podešavanja CSS opisa. Za sada ćemo govoriti samo o principu fontova, a kasnije ćemo se upoznati sa CSS-om detaljno. Na slici u listi vidimo da je prvi izbor Verdana, Geneva, sans-serif. Ukoliko postavimo takav izbor, browser će pokušati da prikaže tekst u Verdana fontu (Windows), ukoliko ga ne pronađe prelazi na font Geneva (Mac), a ako i njega ne pronađe na sistemu, izabraće prvi ne serifni font. Pošto su pomenuti fontovi skoro sigurno prisutni na svim sistemima, a pritom su vrlo slični, možemo reći da naš tekst po pitanju tipografije neće imati problema.

U nastavku su date dve tabele, sa najčešće instaliranim fontovima na Windows i Mac sistemima i procentom zastupljenosti kod korisnika računara. Na primer, vidimo da se na Windows sistemima Georgia font pojavljuje u 98.55% slučajeva, što je siguran izbor. Sa druge strane, Constantia se pojavljuje samo u 53.81% slučajeva. Možemo kombinovati više fontova kako bismo se osigurali. Na primer, možemo postaviti: Constantia, Palatino, Georgia, serif. 

 Statistika instaliranih fontova -  Izvor: A Way Back, http://www.awayback.com/

Listu fontova, odnosno font nizova u DW-u možemo korigovati i izmeniti po svojim potrebama. Vodite samo računa da ne unesete neke fontove koji su retki i nedostupni. Česta greška početnika je da pronađu na internetu font koji se njima sviđa, preuzmu ga, instaliraju, definišu na sajtu i to objave. Kod njih će stranica izgledati kako treba, jer imaju instaliran font, ali na većini drugih računara će nastati problem – nedostaje font.

Listu font nizova (font stack) definišemo u dijalogu Format > Font > Edit font list. Isti dijalog možemo pozvati i direktno prilikom izbora, kao poslednja opcija.

Podešavanje liste font nizova

@font-face

Iako davno zamišljena kao opcija, tek u poslednje vreme postaje aktuelna mogućnost embedovanja fontova. To praktično znači da možemo uz sajt, spakovati i potreban font, koji browser učitava i koristi po potrebi. Iako jednostavno zvuči, stvari se komplikuju oko standarda i različitih browsera. Trenutno postoji više varijanti:

• TTF – funkcioniše na većini browsera osim na Internet Exploreru i iPhone-u.
• EOT – samo na Internet Exploreru.
• WOFF – nov, kompresovan format, koji tek uzima maha.
• SVG – samo na iPhone/iPad sistemima.

Zbog svega toga, postoji više alata koji nam olakšavaju implementaciju, poput popularnog www.fontsquirrel.com sajta.

Liste

Kada kažemo liste, uglavnom mislimo na jednostavno, vizuelno odvajanje sadržaja u smislene celine. To je svakako tačno, ali liste u HTML-u mogu biti mnogo više. Lista može poslužiti da odvojimo određene celine, radi grupisanja više linkova u celinu, radi dodeljivanja prioriteta određenim elementima i tako dalje.

Same liste i ne moraju izgledati kao što ih možda zamišljamo, već mogu imati potpuno drugačiji izgled, pri čemu korisnik i ne primećuje da je sadržaj strukturiran pomoću liste. Na primer, veliki broj navigacija (osnovnih menija) na sajtovima danas je kreiran pomoću lista, koje su stilizovane poput dropdown menija i sl.

Standardna primena liste - sajt IT Akademije (www.it-akademija.com)

Upotreba liste za kreiranje navigacije - sajt Srednje IT škole (www.iths.edu.rs)

U prvom primeru na slici vidimo jednu standardnu primenu liste, i to neuređene liste, gde je pomoću bulleta strukturiran tekst u smislene celine, pojedinačne stavke. Takav prikaz je u toj funkciji pregledniji od običnog teksta.

U drugom primeru vidimo navigaciju sajta koja je takođe realizovana pomoću neuređene liste, ali koja je drastično izmenjena u vizuelnom smislu, korišćenjem CSS. Same stavke su poređane horizontalno, jedna pored druge i lista sadrži i ugnježdene stavke koje se otvaraju vertikalno, na prelazak mišem.

Vrste listi

Postoje tri osnovna tipa listi koje možemo koristiti u DW, odnosno u HTML dokumentu:

• uređene (engl. ordered) liste. Označavaju se kao ol
• neuređene (engl. unordered) liste. Označavaju se kao ul
• definicione (engl. definition) liste. Označavaju se kao dl

Unordered liste (ul) su liste čije se stavke označavaju raznim elementima - kvadrat, krug, crta i tako dalje. Malopre su pomenuti bulleti.

Ordered liste (ol) su liste čije se stavke označavaju nekim tipom rednih elemenata. Najčešće brojevima, rimskim brojevima, slovima alfabete i tako dalje.

Definition liste (dl) su liste čije se stavke sastoje iz dva dela, teksta i definicije. Korisne su za kreiranje lista pitanja i odgovora, jer su uvek sastavljene iz parova.

Struktura lista

Uređene i neuređene liste

ul i ol liste imaju veoma sličnu, praktično istu strukturu. Počinju i završavaju se tagom liste - <ul>...</ul>, odnosno <ol>...</ol>. Unutar osnovnog taga liste, nalaze se <li> tagovi koji odvajaju stavke.

Struktura neuređene liste izgleda ovako:

Neuređena - unordered lista - kod i prikaz na stranici

Kao što smo napomenuli, počinjemo ul tagom, postavljamo stavke u vidu li tagova i zatvaramo ul tag. Suktura uređene liste je praktično ista, osim što je osnovni tag ol:

Uređena - ordered lista - kod i prikaz na stranici

Pošto imaju istu strukturu, kada bismo samo promenili ul u ol (ili obrnuto) na početku i kraju liste (tag), možemo konvertovati tip liste.

Ranije smo napomenuli, a sada ćemo ponoviti da je veoma važno kako pišemo kod. Ukoliko liste sređujemo kroz dizajn prikaz, DW će se brinuti o tome, ali ukoliko sami menjamo u code prikazu, moramo voditi računa da sve tagove zatvorimo i da ih ne ukrštamo. I jedan pogrešan karakter može načiniti haos na strani u prikazu.

Postoje takozvane ugnježdene liste, koje za razliku od prethodnih primera imaju više nivoa stavki. To najlakše možemo primetiti na sledećem primeru:

Lista sa ugnježdenom listom - kod i prikaz na stranici

U primeru, ako posmatramo prikaz na stranici (Design prikazu) možemo uočiti prvi nivo stavki, dok jedna stavka (Beograd) ima svoje ugnježdene stavke. Najlakši način da kreiramo podnivo jeste da za početak unesemo stavke u jednom nivou, kao da su deo osnovne liste. Potom selektujemo željene stavke i izaberemo ikonicu za uvlačenje reda iz Properties panela:

Ako želimo da neku od stavki vratimo u gornji nivo, jednostavno ćemo selektovati i izabrati ikonicu pored. Lista može imati praktično neograničen broj nivoa.

Ako pogledamo u kod liste, videćemo da je DW u dobroj meri promenio strukturu. DW praktično kreira potpuno novu listu, sa ul tagom i smešta je u okviru jedne stavke koja je nadređena. Dakle, kompletna, nova lista se nalazi sada između li stavke nadređene liste.

Važno je zapamtiti da ne smemo zatvoriti li nadređene stavke sve dok ne završimo samu ugnježdenu listu.

Isti je princip i za ol.

Definicione liste

Definicione liste se nešto ređe koriste od malo prepomenutih, ali isto tako mogu biti vrlo korisne. Najčešća upotreba može biti kod najčešće postavljenih pitanja i sl.

Važno je zapamtiti da se stavke sastoje uvek iz dva dela, koja su predstavljena tagovima dt i dd, a sama lista je označena tagom dl.

Definiciona lista (dl) - kod i prikaz na stranici

Kada želimo da kreiramo ovaj tip liste, primetićemo da se ne nalazi dugme na Properties panelu kojim možemo brzo kreirati listu, kao kod ul i ol. Da bismo kreirali definicionu listu potrebno je da selektujemo određene paragrafe koje želimo i iz padajućeg menija izabrati Format > List > Definition list. Pri tom, obavezno je selektovati paran broj paragrafa, jer kao što je rečeno, ovaj tip listi sadrži stavke iz dva dela.

¹ 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. 

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

Ime Nick Email Title Sigurnosni kod

CommentText

• Tipografija i liste 1

• Tipografija i liste 2

• Tipografija i liste 3