Tipografija za web: Koje ključne stvari bi trebalo da znate?

Ključne stvari koje treba da znate o tipografiji za web

Kako da dizajnirate tekst na svom sajtu i zašto je to uopšte bitno?

Ogromna količina informacija na webu je u tekstualnoj formi. Da li je to 60, 70, 80 ili 90 procenata, zaista nije bitno. Ono što je važno je da Internet bez teksta ne postoji, jer je tekst glavno sredstvo komunikacije.

Uzevši tu činjenicu u obzir, nameće se nepisano pravilo da mi dizajneri treba da znamo kako da oblikujemo tekstualnu formu i zato se u ovom članku bavim ključnim stvarima kada je u pitanju tipografija za web.

Večita zabuna – font ili typeface?

Da razjasnimo odmah na početku: font je deo skupa koji se zove typeface.

Helvetica je typeface. Arial je typeface. Roboto je typeface. Međutim, Helvetica Bold, Arial Italic, Roboto Extra Bold su fontovi (stilovi) u okviru typeface-a Helvetica, Arial i Roboto, koje drugačije zovemo font familija.

Ljudi koji se bave dizajniranjem typeface-a, možda će vas pogledati popreko ako kažete nešto tipa hej, možeš li da mi preporučiš neki cool font? Međutim, većini ljudi to stvarno nije naročito bitno – razumeće vas kada kažete i jedno i drugo i, iskreno, ja najčešće kažem font, pogotovo kada razgovaram sa prijateljima koji nisu u svetu dizajna ili klijentima koji se prvi put susreću sa sličnim terminima.

Nemojte time biti opterećeni. Bilo da kažete font ili typeface, ono što nas najviše interesuje je zapravo tipografija!

Tipografija – šta je to i zašto je bitno?

Šta je to čime možeš da dizajniraš, da ne upotrebiš ni jednu fotografiju, ilustraciju, ni jednu ikonicu ili boju, a da postigneš wow efekat? Odgovor je – tipografija.

Tipografija je doslovno umetnost, ali i nauka vizuelnog predstavljanja tekstualnog sadržaja tako da on bude čitaocu čitak i dopadljiv. Pozicioniranje, kompozicija, kontrast, balans, ritam, izbor fontova su samo neki od metoda kojima se služimo u tipografskom procesu.

Bilo na webu, u štampanim novinama, knjizi ili na spejs-šatlu, tipografija je primarno sredstvo koje mi dizajneri koristimo da prenesemo poruku. Kada se primeni kreativno i smisleno, tipografija može biti izuzetno moćno sredstvo komunikacije. Dobra tipografija doprinosi čitljivosti i definiše jasnu hijerarhiju informacija kroz osmišljenu kompoziciju i strukturu, tako da čitaocu bude očigledno šta je više, a šta manje bitno.

Kada pričamo o topografiji za web, najčešće mislimo na to kako je tekst na nekom sajtu prikazan. Sajt bez teksta je praktično nezamisliv i tekst je sastavni deo svakog sajta kog negde ga ima u većoj, a negde u manjoj meri.

Sadržaj i dizajn su ono što čini karakter jednog web sajta. Kao dizajner, u najvećem broju slučajeva nećete moći da utičete na kvalitet sadržaja, ali možete uticati na to kako će sadržaj biti prikazan, odnosno možete uticati na dizajn.

Da biste to postigli, treba da postavite par ključnih pitanja:

  • Sa kakvom formom sadržaja baratate? Kraćom ili dužom?
  • Šta sadržaj treba da iskomunicira?
  • Za koga je pisan sadržaj?
  • Kakav je personaliti brenda za koji dizajnirate? Opušten, korporativan, formalan?
  • Šta je cilj web sajta?

Dodatno, postoje i tehnička pitanja na koja treba da imate odgovore. Primeri takvih pitanja su:

  • Da li sajt treba da bude višejezičan i ako da, koje jezike (i karaktere) treba da podrži?
  • Postoje li tehnička ograničenja za koja treba da znate? Na primer, sajt mora da bude strahovito brz i da ima što manju potrošnju saobraćaja.

Sledeća stvar? Sadržaj

U idealnom slučaju treba da dizajnirate sa konkretnim sadržajem. Međutim, pošto je idealan slučaj, baš to – idealan, šanse za to su male. Šta onda da radite?

Prvo, šta da NIKAKO ne radite: nemojte nikada, ikada, koristiti Lorem Ipsum. I kada kažem nikada, mislim baš nikada. Ono što možete da uradite je da kopirate sadržaj sa drugog web sajta.

Konkretno, ako dizajnirate sportski web sajt, nemojte kopirati sadržaj iz rubrike politika, već iz rubrike sport. Zašto? Iako to nije konkretan sadržaj koji će ići online, podsvesno ćete sebe usmeriti na kreiranje optimalnog vizuelnog rešenja, a klijent će imati realniju sliku kada mu budete predstavljali dizajn.

Naravno, vodite računa da to ne ode tako online, čijom god krivicom, pa da odgovarate zbog kršenja autorskih prava.

Nakon što ste obezbedili sadržaj, ovo je par stvari o kojima treba da vodite računa.

Izbor font familije

Ključna stvar kod tipografije je izbor font familije. Postoji mnogo sajtova na kojima besplatno ili jeftino možete da nađete dobre font familije, a neki od primera su Google Web FontsAdobe Fonts, Fonts, MyFonts.

Naravno, postoji mnoštvo biblioteka na Internetu gde možete da kupite fantastične familije, ali sve ima svoju cenu. Posebnu pažnju obratite na licenciranje, jer neke familije možete da primenite samo na webu, ali ne i u printu, i obratno.

Počnite s jednostavnom, čitljivom familijom. Pre svega, primenite ga na paragrafe, a potom formatirajte naslove i podnaslove koristeći različite veličine i debljine fonta. Ako je potrebno, iskoristite drugu familiju za naslove kako bi došli do izražaja, ali izbegavajte korišćenje više od dve različite familije, zato što je svaka familija ekstra informacija koji mora da se download-uje i učita i to može da uspori web sajt.

Osim toga, pravom majstoru je najčešće dovoljno maksimalno dve familije da se kreativno izrazi i napravi magiju.

Line height

Line height je vertikalna razdaljina između linija teksta. Cilj je pronaći optimalnu vrednost razdaljine između linija teksta tako da čitanje bude ugodno, a vizuelni prikaz teksta atraktivan. Ako je razdaljina između linija teksta suviše mala, sadržaj će biti težak za čitanje, jer će se čitaoc previše napinjati da napravi distinkciju između reči.

Ako je razdaljina između linija teksta prevelika, sadržaj će izgubiti kompaktnost i oko će suviše da skače kako bi skeniralo informacije.

U najvećem broju slučajeva ako uzmete veličinu teksta i pomnožite je sa vrednošću između 1.2 i 1.5 dobićete optimalnu vrednost za Line height.

Budući da je svaki typeface specifičan, potrebno je da eksperimentišete sa različitim vrednostima kako biste pronašli optimalnu vrednost, koja je, da se razumemo, najčešće subjektivna, ali u granicama optimalnog.

Line lenght

Line lenght predstavlja dužinu linije teksta i kao u slučaju Line heighta, treba naći optimalnu meru. Najčešće je ta mera od 50 do 70 karatera (slovnih znakova, uključujući i razmake) po liniji teksta.

Iskustvo je pokazalo da je okvirno ta dužina linije prijatna za čitaoca, jer nije prekratka da bi suviše brzo prekidala horizontalno pomeranje oka, a nije ni predugačka da izazove nemir.

Veličina fonta

Da, veličina je u ovom slučaju stvarno bitna. Veličina fonta će diktirati hijerarhiju i prioritet informacija i zato je ovo izuzetno moćna taktika.

Da biste pronašli optimalnu vrednost potrebno je da eksperimentišete kako biste uskladili i optimizovali hijerarhiju i prioritete, imajući u vidu osobu koja čita tekst.

Alignment

Alignment, odnosno srpski rečeno poravnanje teksta pomaže u strukturi stranice. Veoma često ćete videti stranice koje kombinuje više različitih aligment-a. Ono što se najčešće sreće na webu je da su naslovi poravnani u levo, opisni tekstovi koji se nalaze u gridu su centrirani, a paragrafi su poravnani na levo ili justified (obostrano).

Duži tekstovi, po pravilu, ne bi trebalo da budu poravnati po središnjoj osi, jer mogu biti veoma naporni za čitanje.

Pored ovoga napisanog, postoji još masa stvari u vezi sa tipografijom, kao što su razlike između serifnih, sans-serifnih, monotajp i displej fontova, kada se koji upotreblja i dr, ali sam dao sve od sebe da vam prenesem ono osnovno i suštinski bitno.

Budite strpljivi i eksperimentišite mnogo, jer uprkos tome što postoji niz stvari koje su egzaktne, tipografija ipak jeste jedna velika umetnost i stvar osećaja.

Ostavi komentar

  1. Mladenka Matovic

    Mladenka Matovic

    26. 12. 2019. u 19:28 Odgovori

    Fantasticna informacija . Svakako veoma korisno i za one koji po nesto znaju poput mene, ali ipak nedovoljno. Sve izgleda laiku isto, a ne da nije isto, nego je bitno i supštinski različito u kvalitetu. Hvala ljudi i srdačan pozdrav, Mladenka

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Kultura 2.0

Nenad Milanović (COING): Domaće IT kompanije moraju se boriti za prava LGBTQ+ populacije

Direktor kompanije COING za Netokraciju objašnjava zašto IT kompanije treba da se bore protiv diskriminacije LGBTQ+ populacije u Srbiji i diskriminišu diskriminatore.

Kultura 2.0

Usvojen Zakon o digitalnoj imovini! Šta dalje?

Nakon javno održane rasprave, Narodna skupština je usvojila Zakon o digitalnoj imovini, čime se Srbija svrstala u krug retkih država koje su zakonski regulisale oblast digitalne imovine. U nastavku otkrivamo šta nam to Zakon donosi u odnosu na Nacrt i šta možemo očekivati u budućnosti.

Analiza

Prevare na Internetu naša su svakodnevica – a sada je obogaćena i crypto prevarom koju promovišu domaći YouTuberi

Internet je slobodno mesto i vremenom je postao do te mere slobodan da već par godina unazad ne možemo da razlikujemo istinu od laži i prevaru od realne situacije.

Propustili ste

Novost

Održan prvi sastanak frilensera i države: Situacija je kompleksna i pregovori se nastavljaju

Počeli su pregovori predstavnika vlasti i frilensera, a danas je održan prvi sastanak na kome će se odlučivati o zahtevima koje su u proteklim mesecima državi uputili frilenseri.

Ekskluzivno

E-uprava ekskluzivno za Netokraciju otkriva zašto prati kako građani koriste njene usluge

Kako tačno funkcioniše ova platforma i da li (i zašto) prati ponašanje svojih korisnika?

Startapi i poslovanje

Deceniju kasnije i Centili platformu za digitalna plaćanja koristi 4 milijarde korisnika dok se kompanija sprema za novo poglavlje

Prvi put na Netokraciji predstavljamo kompaniju Centili koja je nastala iz Infobipa, koja u Beogradu zapošljava 50 inženjera i koja aktivno posluje na 80 tržišta širom sveta. Centili ovih dana obeležava 10 godina poslovanja, a sa menadžmentom razgovaramo o daljim planovima i procesu reorganizacije.

Tehnologija

Šta nam je sve od tehnoloških novina doneo ovogodišnji digitalni CES?

I ove godine najveći globalni sajam potrošačke elektronike CES oduševio je sve ljubitelje gedžeta i tehnike, dokazavši da za tehnološki napredak jednostavno nema granica.

Novost

Vučić: Ne pregovara se o tome da li će frilenseri da plate porez ili ne – već od kada

Predsednik se ponovo izjasnio po pitanju frilensera i najavljenih protesta.

Društvene mreže

Facebook u 2020. izbrisao 1,3 milijarde naloga radi suzbijanja lažnih informacija

Full Fact, britanska nezavisna organizacija za proveru informacija i nezavisni partner Faceboka, sprovela je istraživanje glavnih izazova sa kojima se suočavaju 'fekt-čekeri širom sveta prilikom pronalaženja i provere informacija koje se pojavljuju na ovoj društvenoj mreži.