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

E-commerce

Mesec dana kasnije i dalje ne znamo gde su naši Aliexpress paketi – ali barem imamo neke odgovore

Enigma zvana AliExpress poštarina za Srbiju, podelila je mišljenja mnogih kupaca, organizacija i svih ostalih koji se za ovu temu zanimaju. Iako je razloga za astronomsko poskupljenje poštarine mnogo, neki odgovornost prebacuju na Poštu, drugi na avio prevoz i kineske trgovce, ali se ipak čini da je istina 'negde tamo'. Mi smo na osnovu svih dosadašnjih podataka pokušali da rešimo misteriju.

Startapi i poslovanje

Najavljene nove mere za pomoć privredi – država plaća 60% minimalca i odlaže plaćanje poreza i doprinosa

Preduzetnici i zaposleni u mikro, malim i srednjim preduzećima u julu i avgustu dobiće dodatnu ekonomsku pomoć države usled krize izazvane epidemijom korona virusa - plaćanje 60% od minimalca u julu i avgustu, odlaganje plaćanja poreza i doprinosa za mesec dana, a najavljen je i novi projekat 'Moja prva plata'.

Office Talks Podcast

Gde su naši AliExpress paketi?

Šestu epizodu Netokracijinog Office Talks podcasta obeležio je razgovor o trenutnim dešavanjima sa astronomskim poskupljenjem poštarine sa sajta AliExpress. Mi smo pokušali da analiziramo šta je tačno dovelo do ovog problema koji je u velikoj meri pogodio sve one koji kupuju sa ove poznate online prodavnice.

Propustili ste

Karijere

Programiranje možete naučiti bez skupih kurseva, ali samo ako se jako, jako potrudite

Iako je samostalno učenje pre dopuna i usavršavanje nekog postojećeg znanja, postoje ljudi koji na taj način promene čitavu karijeru. Takva situacija poslednjih godina dešava se i u domaćem IT-ju, iako je prati i mnogo zabluda i nerealnih očekivanja. U nastavku teksta, demistifikujemo proces samostalnog učenja programiranja,

Office Talks Podcast

YouTube kao karijera (gosti Miloš Milaković i Daniel Đukić)

Oni su doktori za viral, tvorci i glavni akteri Dnevnjaka, prodavci polovnih automobila i ostvareni kladioničari. Oni su Majkl Džordan i Denis Rodman domaće YouTube scene.

Startapi i poslovanje

Niški ServerBytes omogućava brži i jeftiniji ‘game development’ studijima širom sveta

Filip i Dejan još kao studenti radili su na razvoju mobilnih igara. Nakon mnogo potrošenih sati na korišćenje raznih alata i servisa koji su im pomagali u tom procesu, shvatili su da ne postoji rešenje koje nudi multiplejer, 'chat', 'cloud storage' i druge funkcionalnosti. Tako je nastao njihov proizvod - ServerBytes.

Kultura 2.0

I klijenti su ljudi, što lako zaboraviš kad te od njihovih zahteva zaboli glava

Tekst pred vama predstavlja ilustraciju dinamike tima agencije Flexis, koja se zasniva na jednostavnoj istini: mi odgovore nalazimo u miksu ideja, stavova i različitih perspektiva 'account' i dizajn tima, svesni da jedni bez drugih ne možemo. A i ne želimo.

Karijere

Do 30% domaćih frilensera traži sigurnost stalnog posla jer frilensing na globalu pokazuje znake recesije

Šta čeka srpske frilensere u narednom periodu i kako će izgledati budućnost frilensinga na domaćem tržištu?

Kultura 2.0

Serbia Business Run nastavlja sa aktivnim tim bildingom u kojem zbližava kolege – ovaj put kroz ‘online’ trku

Peto izdanje Serbia Business Run, serije poslovnih trka i najveći sportsko-kompanijski događaj u Srbiji, održaće se u septembru 2020. godine - ovoga puta 'online'. Kako izgleda trka u ovom potpuno drugačijem formatu, otkriva nam direktor ove organizacije.