fbpx

Ultimativni vodič kroz TIPOGRAFIJU

Kada vidite neki sajt, časopis, reklamu, bilbord i kada kažete VAUU ovo izgleda baš dobro!!! Vuče vas da pogledate, i pomislite: Eh kad bi ja smislio nešto ovako za moje proizvode ili usluge… Ali…

Oni Imaju tim dizajnera, ili jednog kojeg plaćaju papreno…. ma mora da plaćaju neku firmu 500+ evra mesečno.

Čuo sam da im to radi lik koji je zavšio dizajn u Parizu!

Ma druže to je NAUKA.

Pa nije. Možete i Vi da napravite nešto ovako.


Kako? Da upišem dizajn? Neki kurs?

Ma ne.

Jednostavno naučite TIPOGRAFIJU!

Tipografija je vizuelni sistem stvoren međusobnim odnosom elemenata pisma (boja, ritam, forma, stil ) i pozadine[dosadno, već gubite stpljenje].  Manipulacijom između ovih odnosa, dolazimo do efeknih vizuelnih rešenja koja su u stanju da komunicraju, budu razumljiva i prenesu informaciju.(Auu brate šta je ovo?) Zaboravite ovo, za sada.

Najkraće rečeno, TIPOGRAFIJA
je odnos između Teksta, Slike i Pozadine!!!



Prosto ko pasulj. Ali ima više sorti. U čemu je TAJNA?

Da krenemo od teksta.

Koji Font odabrati?

Kad pogledate ove fontove sa slike, i krenete da pravite baner, sajt ili reklamu jednostavno ćete napraviti početničku grešku, koju apsolutno svi naprave. Pokušaćete da se razlikujete od drugih, izabraćete neki font koji je kao “jedinstven” za vaš dizajn… i jednostavno ćete zeznuti stvar – vama će biti lepo (imate odnos prema svom dizajnu kao prema svojoj deci “Moja su meni najlepša”) a ustvari: Zašto niko ne čita vaš tekst iako je kvalitetan, pa zato što je NeČItlJiV!


Neke rečenice se čitaju lako a neke su lepe a jedva čitljive. MISLITE O TOME kada pišete.

Teško da će baš vaš dizajn da bude jedini na celoj planeti sa Font-om koji niko nema. Zato se isključite kao dizajner i stavite se u ulogu onoga koji čita i gleda vaš rad. Zapamtite:

Tekst treba da bude čitljiv, moderan, jasan
i da je u skladu sa pozadinom!

Zaboravite na ove “umetničke Font-ove”
prvih 10 godina.


Ovo je malo duža tema ali je ne preskačite.
Kad jednom shvatite suštinu biće mnogo lakše.

Zašto se ovoliko baviti Fontovima i Tekstom?

Tekst je osnova svega. Tekst je kao i muzika, nešto što ste naučili jos u ranoj mladosti, svakoga dana čitate i upijate razne tipove teksta, pa čak i ako ne čitate knjige morate pogledati sve ostalo, sajtove, znakove, bilborde… Sve vas to prati i duboko je u vašoj podsvesti.

Tekst je ustvari vaš glas pretočen u slova. Gledajte na to kao da ste voditelj. Vaš glas treba da bude: jasan, razumljiv i razgovetan. To je obavezno!!!

Još ako je karakterističan i jedinstven onda ste na pravom putu!

Koji Font je dobar a koji loš?

Kada nesto želite da napšete, otvorićete fontove i reći: Pa ovi fontovi su svuda, mislim ove svi koriste. Ja, Johny The Pametni izabraću neki koji će da odskače od svih! Da, da odskače od svih, ali setite se da je obavezno da glas bude: jasan, razumljiv i razgovetan a tek onda jedinsven i karakterističan.

Kada napišete nešto ovim FANCY fontovima postajete Lea Kiš – nema sličnog glasa u prirodi ali ga je teško slušati(čitati)!


Šta se dešava kada čitate neki novi tekst?

To je kao kada slušate neku pesmu uz koju ste prvi put plesali, kada ste prvi put sreli neku osobu ili kada vas je prvi put ostavio dečko ili devojka. Pesmu za koju vas veže nešto lepo ili ružno. I ma koliko objektivno dobra ili loša numera bila vi ćete je povezati sa vašim osećanjima.

Sreća ili Tuga.

Isto je i sa tekstom. Kada čitate neki tekst, ili vidite naslov oglasa sa FONT-om koji je iz Word dokumenta, to vas asocira na posao, rutinu, rokove, smarače sa email-a i budi u vama negativnu emociju.

Sa druge strane kada vidite neki font koji ste videli na omiljenoj seriji, odmah se u vama budi lep osećaj, nekako vam je tekst mnogo bliži, čitate ga sa pozitivnom emocijom.

Opet da uporedimo sa glasom. Kada čujete Memedovića da vodi kviz POTERA, iako ima mnogo boljih voditelja od njega, u vama je još emocija iz emisije Sasvim Prirodno. Zamislite da Čkalja čita crnu hroniku u jutarnjem programu? Već je smešno….

Vidite primer iznad. Uzeo sam neke slike sa neta, dodao im tekst i napravio neki dizajn koristeći font sa prve slike. Šta se dešava kada pogledate?

Vauu. Izgleda kao da je radio profesionalni dizajner. Izgleda lepo za oko.

Upravo sam vam izmamio emociju i to pozitivnu!

A šta ako ne vodimo računa o fontovima. “Pa šta, to je samo tekst!” Hmm onda dobijemo ovo dole.


Neko bi možda rekao, pa i nije loše ovo, mislim slično je!

Pravilo br.1: ONO ŠTO JE SLIČNO NIJE LEPO!

Uvek se trudite da imate Kotrast(Tipografski) između svega sto radite. Ako imate naslov, podnaslov i tekst u nekom paragrafu nikada ne dozvolite da budu slični.

Ne plašite se da će vam naslov biti preveliki, ako niste sigurni koliko treba, slobodno ga “roknite” dva puta više od podnasova. Ostalo što je bitno u tekstu boldirajte ili podvucite, čisto da imate neku dinamiku. Zapamtite da većina ljudi pregleda ceo sadržaj pa tek onda čita. To i sami radite, bacite brzinski pogled i vidite Naslove, podnaslove i slike i odlučite da čitate ili idete dalje.

Pravilo br.2: PRELAMANJE TEKSTA

Kada imate neki tekst ili citat sa kojim želite da ostavite utisak, veoma je važno kako se tekst prelama! Malo je teže objasniti rečima, bolje odmah pogledajte primer, biće vam mnogo jasnije.

Vauu. Ovo poslednje već privlači pažnju!!! Isti citat sa istom pozadinom, u tri verzije. Od lošeg, preko prosečnog do LEPOG! Nije idealno jer sam radio na brzinu i to u Pixlr editoru, ali je mnogo efektnije samo zbog malog poznavanje Tipografije.

Evo jednog posta koji mi je upravo izašao na Facebook-u. Bez obzira što je citat jednog od najboljih pisaca i što je slika fenomenalna, sam tekst izgleda nekako jadno, obično, liči na druge(Slično Nije Lepo).

Ali, ako ga malo “doteramo”, stavimo jaku reč u fokus, napravimo kontrast između teksta, koristimo drugačiji font za autora, dodamo ovaj simbol(separator), vodimo računa da razmaci budu isti i sve to uklopimo sa fotografijom kao pozadinom…

MOLITVA već privlači pažnju!

Zašto stavljamo ove separatore?

Kao što sam već rekao, naš mozak pamti sve što smo pročitali. U knjigama starijeg izdanja postojali su ovakvi separatori, razdelnici, ornamenti ili kako god su ih zvali, koji su bili ključni deo dizajna.(zbog načina štampe itd… ali da ne širimo priču).

Jednostavno kada vidimo ovako nešto, to evocira emocije kod nas!

Šta su to, i koji su to ružni fontovi?

Isto kao i sa lepim, ružni fontovi nas asociraju na nešto što smo već videli i pročitali a bilo je ružno. Oni sami po sebi možda i nisu ružni ali su ih ljudi koristili za sve i svašta. Mogli bismo da kažemo da su ustvari ružni fontovi KONTAMINIRANI FONTOVI.

Ako iskoristite neki od ovih fontova ili bilo šta što asocira na ovo, dobićete dizajn koji budi negativnu emociju, a to je ružan font! Sve što vidite na ovakvim reklamama jednostavno stavite na Black listu.

Koji su fontovi dobri?

Ako baš hoćete linijom manjeg otpora, idite na Google Fonts.
Na linku koji sam ostavio izabran je filter: Sorting:Popular … izaberite neki od prvih 10 i ne mozgajte previše.

Ako ste temeljni i želite da razumete zašto ste odabrali neki font iz ove grupe, čitajte dalje.


Na ovom sajtu: FontReach možete ukucati ime fonta, a on će vam izbaciti sve sajtove koji koriste taj font.

Evo na pimer ko sve koristi font Helvetica.




TIPOVI FONTOVA

Ovo je mnogima dosadno. Sto puta ste videli Serif, Sans Serif itd… ali nemate pojma šta to znači(Ako znate preskočite ovaj deo), ovo vam treba da bi, kada ugledate neki dobar dizajn, rekl: “Znam zašto je ovo lepo… hmm zapamtiću ovu”.

Ovo je kao kad vas u Crnoj Gori pitaju “Od kojih si?”

Možes da ne znaš ali ako si pravi Đetić Marketar sa okom za dizajn ovo se mora znati!!!

Serif i Sans Serif fontovi

Serifni

Serifni fontovi imaju na krajevima slova ove ukrase(serife). Zbog toga imaju taj neki klasičan izgled. Obično se koriste za za štampana izdanja, časopise i novine. Za naslove kada želimo da naglasimo neki starinski duh.

Sans Serifni

Ovi fontovi nemaju ukrase (“Sans” na francuskom “bez”), lakši su za čitanje posebno na ekranima, mobilnim telefonima i tabletima. Imaju moderan i jasan dizajn. Ovaj blog je napisan u fontu bez serifa. Koriste se više od Serifnih, upravo iz ovih razloga.

Najbolje se vidi razlika kada pogledate sliku.


Display fontovi

Svi oni čudni, neobični i ludi fontovi spadaju u ovu grupu. Da to su oni koje početnici najviše koriste i kontaminiraju ih dodatno. Ako ste stigli dovde već ste dosta naučili pa ono pravilo (ne koristiti 10 godina) ne važi.

Ove fontove možete koristiti za NASLOV ili potpis ili neki mali deo koji hoćete da istaknete ali budite obazrivi.

Ako već naslov napisete da bude lud, odmah ispod napisite nesto regularnim fontom da napravite kontrast.

Previše ovog fonta guši !!!


OSTALI FONTOVI

Svi ostali tipovi su verzije serifnih ili sans serifnih fontova, tu ima raznih podela, Serifni se dele na Old-style, Slab Serif, Didoni itd…
Sans Serifni na: Humanist, Clasical i
Geometric itd…

Već gibite nit u čitanju… ovo istražujete kad budete imali vremena.


Pomenuću ove geometrijske i didone. Čisto da ih prepoznate.

Didone

Ovo su naslovi i logo-i ispisani DIDONE fontom, ono što je karakteristično za njih je da ih koriste u modnoj industriji da naglase eleganciju. Serifni su, imaju serife na krajevima tako da malo “vuku” i na tradiciju.

Šta je baš lepo i elegantno u ovom fontu?

KONTRAST.

Pogledajte kolika je razlika u debljini linija u slovu “V” u VOGUE, kao i na spojevima kod ostalih slova, linije idu iz velike pune do veoma tanke. Uvek kada to vidite setite se da je to Didone Font.

Neki didone fontovi: Linotype Didot™ , Arepo™, ITC Bodoni™ Seventy-Two,
Kepler™, Monotype Walbaum™

Obično se plaćaju. Evo vam jedan baš dobar koji je free i ima sve veličine tako da ne gubi na proporciji kada vam treba za neki veliki naslov. Naćićete ga ovde.

Geometrijski

Osnova za GEOMETRIJSKE fontove su Krug, trougao ili kvadrat, najlakše ćete ih prepoznati po slovu “O” koje je idealni krug. Takođe su dobri za naslove, imaju veoma elegantan dizajn.

Spadaju u Sans Serifne fontove, nemaju na krajevima serife.

Neki geometrijski fontovi: Gotham, Futura, Spartan, Avant Garde, Century Gothic.

Pravilo br.3: IZABERITE GLAVNI FONT

I NE MENJAJTE GA!

Font je vaš glas, boja vašeg glasa. Zamislite kada bi voditelji konstantno menjali glas u programu… Ne bi bilo baš lepo za slušanje.

Jedino je dobro menjati glas u crtanim filmovima, ali će te i vi i vaša firma biti smešni “ko crtani film” ako to radite u okviru svog brenda ili sajta.

Zato izaberite jedan font i držite se njega. Možete ubaciti i neke druge ponekad ali ne preterujte.

Koji font izabrati?

Tu ima mnogo faktora, ali ono što je zajedničko, koji god font da odaberete gledajte da ima puno varijacija u okviru svoje familije ne bi li sa kombinacijama mogli da pravite lepe Kontraste bez da koristite neki novi font.

Na Google Fonts kada pise (styles 12) to znači da ima 12 varijanti

Ne koristite fontove koje ste dobili uz kompjuter!

Već smo pričali na ovu temu, ali da ponovimo, dok ne izvežbate oko jednostavno odaberite neki font sa vrha popularnih na google fonts strani. Izaberite Sans Serifni, ako je baš nešto vezano za modu ili neki retro brend možete i Serifni ali zapamtite da se teže čita.

Bacite pogled ko ga korsti preko FontReach -a, pogledajte koji im je glavni a koje fontove koriste kao sporedne. Analizirajte tuđe sajtove, probajte da vidite kako su primenili Kontrast, Prelamanje Teksta, Razmake(prazan prostor), Ponavljanje elemenata, itd.

Učite od najboljih, na njihovom dobrom dizajnu ali i na njihovim greškama.

Sa ovim znanjem, biće vam jasno zašto su koristili neki Serifni font, gde su napravili kontrast sa Sans Serifnim i Display fontom i najvažnije, razumećete:

ZAŠTO JE NEŠTO LEPO
ZAŠTO PROSTO ŽELITE DA NEŠTO ČITATATE

Fontovi koji se plaćaju

Da bi font bio dobar, neko mora da uloži ozbiljno vreme i trud. Tu ima mnogo posla, razmak između slova, geometrija slova, serifi, ako je display font onda i linije koje povezuju slova, ubaciti ćirilicu, latinicu itd…

Za dobar font treba oko godinu dana rada!!!

Znači da ovi koji se ne plaćaju nisu dobri?

Pa ne, većinu dobrih besplatnih fontova je objavle su Velike kompanije(Adobe, itd), to su oni pri vrhu na Google Fonts. Zašto? Pa, Može im se! Podele nešto sa svima a usput podižu svoj kredibilitet, da ne kažem dižu sebi cenu.

Ono što je bitno da zapamtite je: Ako se font plaća, mnogo je veća šansa da je dobar nego kad ga skinete sa nekog Free Fonts sajta. Ako su Display fontovi onda je ovo pravilo za 99% slučajeva.

Pravilo br.4 AKO FONT NEMA NAŠA SLOVA – BEŽITE GLAVOM BEZ OBZIRA

Nema potrebe da objašnavam ružnoću ove rugobe od teksta


NE MENJAJTE PROPORCIJU SLOVA

To je ono kada napisete nešto i razvučete ga ili žbijete tako što mišem kliknete na okvir i sami menjate veličinu(proporciju).

Kada se pravi neki font, vodi se računa o visini velikih i malih slova, o njihovoj širini, o geometriji i razmaku itd…

Kada ovo uradite buklvalno sve to poremetite.

Jednostavno ovo ne radite Nikad. Ako hoćete da vam naslov bude zbijeniji koristite poseban stil fonta condensed, ili nađite font koji vam odgovara, isto tako i za veličinu i debljinu. Ovakva slova i reči deluju prljavo, nejasno, aljkavo a i videliste ovakve natpise kod kineza, na loši buticima i mesarama pa vam bude lošu emociju.

Ovo se najbolje vidi kada promenite veličinu slike na ovaj način, pa iskrivite face, podebljate ih ili omršavite….Uglavnom “iz aviona” se vidi da je amaterski urađeno.

Ako vam se i učini da bi “moglo da prođe” Ne Radite To!!! Setite se kako izgleda na slici.


Fontove koje ne bi trebalo da koristite:


Times New Roman, Comic Sans, Vivaldi,
Verdana, Franklin Gothic, Papyrus,
Copperplate Gothic, Curlz , Bauhaus 93



KAKO PASUSI TREBA DA IZGLEDAJU

Pasusi, kao i sve što pišete, treba da budu takvi da ljudi žele da ih čitaju. I ovde postoje neka pravila pomoću kojih održavate pažnju čitalaca. Veoma su prosta ali ih često ljudi zanemare, pa čak i blog koji je kvalitetan po sadržaju ima slabu posetu.

Prevelika dužina pasusa

Pasusi treba da budu najviše 5 redova dugački, ljudi jednostavno nemaju vremena i kada vide da ste napisali esej, to ih guši, podseća na lektire koje su ih terali da čitaju, uglavnom brzinski pregledaju tekst i… odlaze.

Kada nešto čitaju na digitalnim medijima, žele da bude pregledno.

Takođe, kada nešto pišete, neka vam jedan pasus bude 4-5 redova, a onda napišite neki manji u kome ćete u jednom redu napisati nešto što je malo važnije a nije za podnaslov. A nekada u novi pasus stavite samo jednu ili dve reči. Dobar pasus mora da ima

Dinamiku.

Prevelika širina pasusa (redova)

Ovo je nešto što ste svi videli na nekom sajtu, to je ono kada morate da idete očima sa jedne strane ekrana na drugu da bi pročirali nešto a glava vam šeta kao da gledate tenis.

Ovo je klasična greška.

Ljudi su u fazonu „Pa dobra je informacija, kvalitetan je proizvod, cena je vrhunska, opis detaljan, dajemo garanciju najbolju u regionu… pa šta ako je red dugačak, ko želi da čita on će da pročita do kraja“. Hoće, ali će njih 80% da odustane čim vidi ovako dugačak red.  

Pravilo br.5: RED MORA DA BUDE MAKSIMALNO
80-90 KARAKTERA DUGAČAK.

Kako da izbrojim karaktere u redu da ne bude ručno? Da ne kažem peške.

Prekopirajte jedan red sa vašeg sajta u http://www.charactercountonline.com/
oduzmite WHITESPACE i to vam je broj karaktera.

Ako znate sami, ograničite broj karaktera u CSS kodu (max-width: 80ch;) ili samo recite progameru da vam namesti širinu pasusa na 80-90 karaktera. Po nekim autorima može i 120. Ovaj blog sam namestio na 85 karaktera.

Preveliki-premali razmak između redova

Kad imate neki pasus, veoma je bitno kao i za Font, da bude jasan, čitljiv, i lepo koncipiran. Pored toga mora da bude širok do 80,90 karaktera i dugačak do 5 redova. Sve je dobro ali razmak između redova kaže da je amater radio, ako je mnogo zbijeno, ne može da se čita, a ako je mnogo odvojeno onda nam ne drži pažnju i izgleda loše.

Na mom blogu je veličina fonta 18px a line-height: 1.55 ili 28px. Možda vam je ovo previše tehnički. Ovo znači da su slova dovoljno velika i da je razmak optimalan za čitanje. Tražite od programera da vam postavi ove parametre.

Boja pozadine i razmak

Kada je pozadina bela onda možete staviti razmak da bude lep za oko (na ovom blogu je 1.5), ako je tamna, možete povećati malo razmak, da bi tekst mogao da “diše” zato što pozadine u boji više guše tekst.

TEKST PREKO SLIKE – PRAVILA

1. Preko slike samo beli tekst!!! Zašto, pa pogledajte slike

2. Tekst u boji preko slike – NE NIKAKO

3. Tekst u boji kao deo pasusa pisanog belom bojom

I tu koristite boje kao kod podvlacenja onim flomasterima za obeležavanje. Uvek sa bojama koje imaju visoku LUMINANSU:

  • Žuta
  • Fluoroscentna Zelena
  • Cijan(što bi Babe rekle Tirkizna)

Pogledajte ovaj kanal i videćete kako se koriste ove fore na videu (skroz cool kanal inace) Nas Daily.

Pogledajte jedan video o Kontrastu, malo odmorite, pa nastavite da čitate ima još samo malo. Ne odustajte.

KONTRAST VELIČINA

Ekran sam snimao sa FreeCam, besplatan je, ne iskaču reklame i veoma je jednostavan za korišćenje, možete ga skiunuti ovde.

Video je obrađen sa VSDC video editorom, takođe besplatan, imate ga ovde.
Muzika je iz besplatne baze YouTube Audio, koristite ovu muziku pošto nećete imati problema sa autorskim pravima a imate i veliki izbor, evo je ovde.

Program za obradu fotografija je Pixlr i on je free, možete ga koristiti u Browseru ili ga skinuti. Može da posluži umesto Photoshopa, imate ga ovde.


Zaključak – Ovaj tekst ima Kraj

Najvažnije je da priđete što većem broju ljudi bez obzira na to koji medij oni preferiraju. Svaki oblik predstavljanja vašeg sadržaja vodi i nadovezuje se na drugi i na kraju vodi ka poslednjem koraku vašeg funnel-a(levka) bez obzira da li je to prodaja, poseta, popunjavanje forme, ili nešto deseto.

Funnel ili Levak je sledeća tema koja će biti kraća. Obećavam. Ovo je Ultimativni vodič kroz Tipografiju i mora da bude ovako dugačak i opširan.

Poštujući pravila Tipografije pravićete lepe stvari , unaprediti vaš posao, shvatiti digitalni marketing i primeniti svoje znanje.

Da li ste ikada videli dramu koja se odvija kada mačke iskašljavaju kuglice dlaka, pomislili bi ste da neće preživeti ni sekundu.

Međutim nakon cele agonije, mačka ili mačor kada iskašlju kuglicu, nastavljaju kao da se ništa nije desilo.

Vi koji ste pročitali do kraja, znate o čemu pričam.

Kada ste ovo naučili sve naredno će biti Mačiji Kašalj.

Top