{"id":724,"date":"2020-04-28T16:10:22","date_gmt":"2020-04-28T14:10:22","guid":{"rendered":"http:\/\/skolarbbos.net\/?p=724"},"modified":"2026-10-16T00:26:08","modified_gmt":"2026-10-15T22:26:08","slug":"tipografija","status":"publish","type":"post","link":"https:\/\/skolarbbos.net\/?p=724","title":{"rendered":"Tipografija"},"content":{"rendered":"<p>Tipografija je tehnika i umetnost prikaza teksta na razumljiv i vidljiv na\u010din.<\/p>\n<p>Sasvim je jasno da se tipografija pojavila sa prvim zapisanim re\u010dima u istoriji, menjala se i napredovala, evoluirala tokom godina i vekova. U proteklih nekoliko godina, iz cele nauke, izdvojila se <em>web tipografija<\/em> kojom \u0107emo se mi baviti, barem jednim delom.<\/p>\n<p>Za one koji \u017eele dalju avanturu sa web tipografijom, preporu\u010dujem slede\u0107u adresu: <a href=\"http:\/\/webtypography.net\/\">http:\/\/webtypography.net\/<\/a>, kao i ovaj zanimljiv \u010dlanak<em> A list apart<\/em> magazina: http:\/\/www.alistapart.com\/articles\/on-web-typography\/<\/p>\n<p>Kao i za sve ostale elemente na stranicama, HTML stranica postavlja sadr\u017eaj, a CSS opisima uti\u010demo na tipografiju u svim aspektima, \u0161to itekako mo\u017ee imati uticaj na stranice. Ukoliko je tekst pravilno postavljen, \u010ditljiv, pregledan, sve \u0107e biti ok. Nasuprot tome, ne\u010ditljiv tekst \u0107e svakako oterati posetioca strane za nekoliko sekundi. Jer, ne zaboravite, iako su svi drugi elementi odli\u010dni, posetilac nije na satu zbog toga, ve\u0107 zbog sadr\u017eaja (teksta, eventualno slike&#8230;). Tipografija je pogotovo bitna na modernom webu, kada smo prevazi\u0161li period \u0161lja\u0161te\u0107ih elemenata, napadnih animacija i sl, i kada se otvaraju nove mogu\u0107nosti koje su ranije bile nedostupne.<\/p>\n<p><a name=\"_Toc371714419\"><\/a><strong>Fontovi (font familije)<\/strong><\/p>\n<p>Logi\u010dno je po\u010deti izborom samog fonta koji \u0107emo koristiti u datom kontekstu. Fontovi se uglavnom dele na neke osnovne kategorije:<\/p>\n<ul>\n<li><strong>Serif<\/strong> \u2013 Ovi fontovi poseduju odre\u0111ene detalje na krajevima linija. Ti detalji se nazivaju serif, odatle i naziv. U klasi\u010dnoj tipografiji, smatra se da su serif fontovi \u010ditljiviji od drugih u dugim pasusima i tekstovima. Nekad se koristi i termin Roman.Naj\u010de\u0161\u0107i serif fontovi na webu su Times New Roman, Garamond i Times i td.<\/li>\n<li><strong>Sans Serif<\/strong> \u2013 Re\u010d sans je iz francuskog jezika i u prevodu zna\u010di \u201ebez\u201c i ve\u0107 mo\u017eemo pretpostaviti da ove fontove odlikuje odsustvo serif detalja. Ove fontove karakteri\u0161u prave, \u010diste i \u010dvrste linije, bez previ\u0161e detalja. Imaju \u010distiji i moderniji izgled.Naj\u010de\u0161\u0107i sans-serif fontovi na webu su Arial, Tahoma, Verdana, Helvetica itd.<\/li>\n<\/ul>\n<ul>\n<li><strong>Monospace<\/strong> \u2013 Ove fontove odlikuje osobina da svi karakteri zauzimaju isti horizontalni prostor. Za po\u010detak njihove primene se uglavnom smatra pojava kuca\u0107ih (pisa\u0107ih) ma\u0161ina, kada su zbog tehnolo\u0161kih ograni\u010denja bili potrebni takvi fontovi. Kasnije su na\u0161li primenu na prvim ra\u010dunarima i terminalima i dalje se koriste u programiranju.Naj\u010de\u0161\u0107i serif font na webu je Courier New (ili Courier).<\/li>\n<\/ul>\n<p><em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-726 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija181.jpg\" alt=\"tipografija181\" width=\"600\" height=\"250\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija181.jpg 600w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija181-300x125.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>Naj\u010de\u0161\u0107e kategorije fontova<\/em><\/p>\n<p>Pored pomenutih kategorija, postoje i mnoge druge, poput <strong>script<\/strong> fontova (imitiraju pisanje rukom), ali i podkategorije pomenutih, poput <strong>slab-serif<\/strong> fontova (koje odlikuju uglavnom pravougaoni serifi). Mi \u0107emo se zadr\u017eati na ranije pomenutim kategorijama jer su naj\u010de\u0161\u0107i na webu.<\/p>\n<p><strong>Napomena<\/strong>: u govoru \u010desto koristimo re\u010d font u nepravilnom kontekstu. Font je ta\u010dno odre\u0111eni stil i veli\u010dina neke font familije. Na primer, <strong>Verdana 11pt bold<\/strong> je <strong>font<\/strong>, dok je <strong>Verdana <em>font familija<\/em><\/strong>. Ipak, dalje u tekstu koristi\u0107emo termin font jer je odoma\u0107en i prihva\u0107en u govoru.<\/p>\n<p><a name=\"_Toc371714420\"><\/a><strong>Terminologija<\/strong><\/p>\n<p>Da bismo dalje u tekstu razumeli o \u010demu se govori, pro\u0107i \u0107emo neke od osnovnih termina, a koji su preuzeti iz klasi\u010dne tipografije:<\/p>\n<ul>\n<li><strong>Osnovna linija (baseline)<\/strong> je zami\u0161ljena linija na kojoj \u201esede\u201d slova.<\/li>\n<li><strong>Sredi\u0161nja linija (median)<\/strong> je zami\u0161ljena linija koja odre\u0111uje visinu (malih) slova.<\/li>\n<li><strong>Visina fonta (x-height)<\/strong> je razmak izme\u0111u osnovne i sredi\u0161nje linije. Tradicionalno zavisi od malog slova X latini\u010dnog alfabeta.<\/li>\n<li><strong>Ascender<\/strong> je deo slova koji se izdi\u017ee iznad sredi\u0161nje linije.<\/li>\n<li><strong>Descender<\/strong> je deo slova koji se spu\u0161ta ispod osnovne linije.<\/li>\n<\/ul>\n<p><em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-727 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija182.jpg\" alt=\"tipografija182\" width=\"600\" height=\"127\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija182.jpg 600w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija182-300x64.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>Osnovni detalji tipografije<\/em><\/p>\n<p><strong>\u010citljivost<\/strong> se ogleda u izboru fonta. Va\u017eno je da su slova, tj. odre\u0111eni karakteri \u010ditljivi i vizuelno razdvojeni. Sve su to aspekti koji zavise od samog fonta i njegovih karakteristika. Ali zato imamo mogu\u0107nost pravilnog izbora familije, kao i logi\u010dnog raspore\u0111ivanja na strani, \u0161to daje <strong>preglednost<\/strong> i lako razumevanje teksta, njegovog toka i sli\u010dno.<\/p>\n<p><strong>Du\u017eina reda<\/strong> tako\u0111e uti\u010de na preglednost i uop\u0161teno je mi\u0161ljenje da bi pojedina\u010dna linija teksta trebalo da bude izme\u0111u 45 i 75 karaktera, mada to nije pravilo i postoje odstupanja. Neki sajtovi i portali koji su uglavnom tekstualni imaju du\u017einu redova i do 100 karaktera, \u0161to je i dalje prihvatljivo. Ukoliko se tekst deli u kolone, onda bi trebalo i\u0107i sa manjim brojem karaktera. Ukoliko se koristi justify poravnanje, du\u017ei redovi se bolje pona\u0161aju u browserima.<\/p>\n<p>Visina reda ili <strong>Leading (Line height)<\/strong> ozna\u010dava razmak izme\u0111u dve osnovne linije teksta. Za web browsere je uobi\u010dajena, default vrednost od 1 em. \u0160to u realnim uslovima za font veli\u010dine 16 px kreira line-height tako\u0111e od 16 px. Takav poredak je dosta ne\u010ditak, te se preporu\u010duje minimalno 1.2 em ili ve\u0107i. Primer: ako je veli\u010dina fonta 10 px, vrednost od 1.4 em za line height da\u0107e 14 px.<\/p>\n<p><strong>Tracking (letter spacing)<\/strong> je razmak izme\u0111u pojedina\u010dnih karaktera u tekstu. Mo\u017ee biti i negativno. Trebalo bi biti oprezan sa nekim parovima slova, poput ft, rn, vv jer mo\u017ee do\u0107i do vizuelnog spajanja karaktera i nerazumevanja, ne\u010ditljivosti teksta.<\/p>\n<p><strong>Word spacing<\/strong> je razmak izme\u0111u re\u010di u tekstu.<\/p>\n<p><em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-728 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija183.jpg\" alt=\"tipografija183\" width=\"552\" height=\"173\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija183.jpg 552w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/tipografija183-300x94.jpg 300w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>Osnovni detalji tipografije<\/em><\/p>\n<p><a name=\"_Toc371714421\"><\/a><strong>Izbor fonta<\/strong><\/p>\n<p>Iako \u0107e ovo mo\u017eda delovati \u010dudno, ali <strong>na webu ne mo\u017eemo koristiti bilo koji font<\/strong>. U nekim drugim medijima, na primer, kada kreiramo tekst u Wordu ili kada pravimo plakat u Adobe Illustratoru, imamo na raspolaganju \u010ditav dijapazon fontova koje mo\u017eemo koristiti. Kod web stranica je druga\u010dija situacija, jer font zavisi od ra\u010dunara korisnika. Ta\u010dnije, <strong>mi ne ugra\u0111ujemo font u samu stranicu, ve\u0107 samo informaciju koji je font upotrebljen<\/strong>.<\/p>\n<p>Na primer, ukoliko unesemo tekst i defini\u0161emo kroz CSS da se koristi Verdana font, browser korisnika \u0107e dobiti tekst i informaciju o fontu, me\u0111u ostalim informacijama i stilovima. Tada browser prikazuje tekst, ali u fontu koji u\u010ditava sa ra\u010dunara korisnika. Ukoliko korisnik nema instaliran \u017eeljeni font (Verdana, u na\u0161em primeru) bi\u0107e prikazan default font, \u0161to je na Windows sistemima Times New Roman. Svakako je jasno da tako ne\u0161to nije mnogo po\u017eeljno i predstavlja veliko ograni\u010denje. Povrh svega, razli\u010diti korisnici koriste razli\u010dite sisteme, Windows, Mac, Linux, Android, iOS, Symbian i tako dalje, sa razli\u010ditim 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.<\/p>\n<p>Dakle, \u0161ta onda \u010diniti ako je to toliki problem? Postoje neki fontovi koji su zajedni\u010dki za ve\u0107inu sistema i mo\u017eemo ih slobodno koristiti, mada nisu isti u potpunosti u Win i Mac okru\u017eenjima, tako da ih moramo duplo definisati (vide\u0107emo kasnije).<\/p>\n<p>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 \u0107e se tekst prikazati u fontu koji ste izabrali.<\/p>\n<p>Ovo je prili\u010dno ograni\u010davaju\u0107e i mo\u017ee biti frustriraju\u0107e, ali ako analizirate sajtove na webu, vide\u0107ete da je preko 90% njih koncipirano sa nekim od ovih fontova. Ranije su neki autori koristili specifi\u010dne tehnike koje su omogu\u0107avale druge fontove, kao \u0161to su sIFR ili Cuf\u00f3n. Ipak, njihova upotreba nije preterano preporu\u010dljiva jer se baziraju na JavaScriptu, Flashu i drugim jezicima, \u0161to usporava u\u010ditavanje. Mo\u017eemo re\u0107i da su ove tehnike vi\u0161e bile, kako se u narodu ka\u017ee, \u201epomo\u0107u \u0161tampa i kanapa\u201d, ali su postavile osnovu za ono \u0161to je usledilo.<\/p>\n<p>U poslednje vreme, sa pojavljivanjem <em>@font-face<\/em> opcije, stvari se polako menjaju i omogu\u0107eno nam je da koristimo prakti\u010dno bilo koji font na stranicama (vi\u0161e na kraju jedinice). Ova opcija se ve\u0107 uveliko upotrebljava, ali zbog nedostatka jednog standarda (svaki browser tera svoju pri\u010du) i odsustva podr\u0161ke u starijim browserima (IE), jo\u0161 nije za\u017eivela u potpunosti.<\/p>\n","protected":false},"excerpt":{"rendered":"Tipografija je tehnika i umetnost prikaza teksta na razumljiv i vidljiv na\u010din.<a class=\"moretag\" href=\"https:\/\/skolarbbos.net\/?p=724\"> &lt;b&gt;[Nastavi sa \u010ditanjem...]&lt;\/b&gt;<\/a>","protected":false},"author":1,"featured_media":725,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=724"}],"version-history":[{"count":1,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/724\/revisions"}],"predecessor-version":[{"id":1256,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/724\/revisions\/1256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/media\/725"}],"wp:attachment":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}