Webasticno

Webasticno

Koji font koristiti za post?


Da se razumijemo, sad ne pričam o fontovima koje možete ukomponirati u logo ili koristiti za ukras web stranice. Sad pričam o fontovima kojima pišete sadržaj. Ovo je jako važna stvar za svaku web stranicu jer odabir fonta na kraju utječe na to je li sadržaj čitljiv ili ne. Pričao sam o tome da korisnici skeniraju sadržaj, ali ga ne čitaju od riječi do riječi, no i to možete promjeniti. Kako? Tako što ćete taj sadržaj lijepo ukomponirati i pretvoriti u nešto čitljivo i user friendly tj. readable.

Prije nego što krenem, tek toliko da svi znate. Još uvijek je nemoguće u svim popularnijim browserima embedati custom fontove kako bi ih svi korisnici mogli vidjeti. To je nešto na čemu se radi u sklopu CSS3 koji kao standard nije još prihvaćen od strane svih velikih igrača (IE, Firefox, Opera, Safari). To znači, da fontove mogu vidjeti samo oni koji ih imaju instalirane. Nema šanse da će svi vaši korisnici imati instaliran neki custom font kojeg vi koristite. Također nemojte tjerati korisnike da downloadaju te fontove kako bi mogli uživati u vašoj stranici. Oni to neće (ili ne znaju) napraviti!!!

To serif or not to serif?

Serif

Ovi fontovi su oni fontovi koji imaju ove male (laički rečeno) ukrase. Veliki nedostatak im je to što imaju premalo bijelog prostora između slova što uvelike utječe na njihovu nečitljivost. No, kada promjenite okruženje i stavite ih na papir, oni se ponašaju dosta dobro. Zašto je to tako? Zato što računalni zasloni imaju manje rezolucije (najčešće 72 dpi), a tisak ima veće rezolucije (najniža im je 200 dpi). Kod nižih rezolucija, slova postaju manje čitljiva jer pikseli dolaze do izražaja. Od serif fontova najvjerojatnije znate Times New Roman, Georgia te Trebuchet.

Sans-serif

Oni nemaju te ukrase zvane serifi te su zato čitljivija i daju više prostora oko slova čime se povećava čitljivost. Zato savjetujem da koristite ove fontove za članke. Od ovih fontova vjerojatno znate Arial, Verdanu i Trebuchet. Ja vam savjetujem da koristite sans-serif fontove za sadržaj na webu, konkretno Verdana je font za vas.

Osim ako…

…ne namjeravate napraviti neki tematski site. NY Times je jedno duže vrijeme koristio Georgia font kako bi ufurao svoje korisnike u gotički stil svojeg branda, a naletavao sam na mnogo stranica koje su koristile monospace font Courirer New kako bi imitirali pisaću mašinu. Naravno, morate znati cijenu korištenja ovih fontova, a to je manja čitljivost članaka.

Posebni slučajevi i no-no fontovi!

Naravno, postoje i iznimke! Ukratko, Courier New se koristi kod prikaza koda. To je nepisano pravilo. Dosta ljudi koristi georgia font za citate (quotations), što je dosta dobra praksa. Serif fontovi se većinom koriste kod naslova.

S druge strane, neki se fontovi uporno koriste iako su na crnoj listi. Prva i osnovna stvar, Comic Sans se ne smije koristiti, osim ako blog nije o stripovima ili o Simsima (čiji je official font), a i tada treba djelovati što ozbiljnije!

Od drugih fontova koji su se našli na crnoj listi je Westminster koji je svoje mjesto na crnoj listi zaslužio redovitim pojavljivanjem na svim wannabee hakerskim stranicama devedesetih godina. Ukoliko koristite ovaj font, nemojte ga ni u kojem slučaju stavljati na crnu podlogu bojajući ga s defaultnom zelenom bojom iz Adobe Flash programa.

Statistike

Modern Life Is Rubbish je proučio koje fontove koriste najboljih 100 blogova iz 2006. godine i rezultati su slijedeći.

Najkorišteniji fontovi na top 100 blogova 2006.

Ovo samo potvrđuje gore navedenu tvrdnju da je Verdana, tj. Sans Serif najbolji izbor za web.

Pošalji ekipici:

  • Facebook
  • Google
  • TwitThis
  • MySpace
  • StumbleUpon
  • del.icio.us
  • Technorati
  • Netvibes
  • E-mail this story to a friend!

Povezani postovi




  1. Ja verdanu koristim od samog početka :)

    Comment by Neno

    on Tue, 19. Aug 2008 - 18:01:38

  2. Verdana je meni izbor broj jedan za web, a od sans-serifa koristim još i Tahomu.

    Comment by Toni Aničić

    on Wed, 20. Aug 2008 - 7:18:54

  3. Serifni fontovi su čitljiviji na papiru ne zbog rezolucije, nego zbog toga što serifi (te crtice i ukrasi) stvaraju optičku varku da postoji linija čitanja, linija na kojoj ta slova “leže”.
    Oku je tada prirodnije pratiti tekst nego kad je na papiru sans-serifni font

    Comment by blackshtef

    on Wed, 20. Aug 2008 - 16:10:33

  4. Ali i dalje stoji da su nepregledni(ji) na monitoru zbog niskih rezolucija…

    Comment by Nemesis

    on Wed, 20. Aug 2008 - 16:17:58

  5. Nije li Trebuchet sans-serif?

    Comment by Sinke

    on Thu, 21. Aug 2008 - 17:04:15

  6. A novi post :), nešto zapelo…

    Comment by Neno

    on Mon, 25. Aug 2008 - 19:56:06

  7. Da, ostao sam bez ideja, ali evo, vec radim mind mapping pa ce sutra vec biti novoga…
    Ovu grešku sam ispravio…

    Comment by Nemesis

    on Tue, 26. Aug 2008 - 13:57:18

  8. gdje stoji da su serifi manje dobar izbor od sans-serifa za body copy? imaš neku statistiku? plus za trud, no članak nije od velike pomoći. džabe ti lijepi 12px sans-serif ako na 200px širine zalijepiš justify pa se oči počnu sudarat kad počneš čitat jer su rupe u tekstu ogromne, kao u footeru… justify, line-height, font-size, kontrast i neki drugi pojmovi su mnogo bitniji od dileme “serif ili sans serif” kod dizajna informacija. svejedno je hoće li neko koristiti 13 px verdanu ili georgiu, čitljivi će biti i jedan i drugi ako se tipografija sredi pravilno.

    Comment by Bojan

    on Wed, 27. Aug 2008 - 0:58:50

  9. To stoji tamo gdje sam napisao da pri niskim rezolucijama, kakve su specifične za monitore, serif fontovi postaju zrnatiji i time teži za čitanje. A ovo što si naveo 200px širine i justify je samo jedan od mnogo mogućih slučajeva. Gle, na kraju će ipak autor proučiti svoju stranicu i odrediti što treba mjenjati, a što može ostaviti uključujući zdravu pamet te ako uvidi da je sans serif nepregledan, naravno da će tražiti alternative.

    Ovo gore nije egzaktna znanost i ako se nađe slučaj gdje je drugačija situacija, ne znači da sve pada u vodu.

    Comment by Nemesis

    on Wed, 27. Aug 2008 - 11:01:57

  10. htio sam reći da se ne slažem da su serifi manje čitljivi :)

    razlozi iza veće uporabe sans-serifa su trendovi i navika, ne bolje čitljivost. baš su serifi, kao i na papiru, čitljiviji. serifi u serifnim fontovima nisu samo ukras nego i pomagala.

    na monitoru serifi mogu izgledat ok čak i bez clear type-a, koji je, ako se ne varam, skoro dvije godine default u windowsima. tako da izbjegavanje serifa ima još manje smisla nego li raditi sajt za 800×600.

    koji font koristiti za post, arial, verdanu, georgiu ili times new roman? svejedno je, ako čovjek zna što radi.

    Comment by Bojan

    on Wed, 27. Aug 2008 - 13:13:32

  11. Comment by Nemesis

    on Wed, 27. Aug 2008 - 13:35:28

  12. hvala na pomoći. koje godine je survey napravljen? :D

    Comment by Bojan

    on Wed, 27. Aug 2008 - 13:42:19

  13. Nije se povećao dpi na monitorima, niti su ti fontovi promjenili izgled, a nisu ni ljudi nešto bitno evoluirali od tada…

    Comment by Nemesis

    on Wed, 27. Aug 2008 - 14:54:52

  14. da li se fontovi rendaju isto danas kao i tad? je li tad postojao font smoothing? u ovoj industriji je sedam godina strašno mnogo vremena i ništa, ali baš ništa nije isto kao i tada. svoj stav temeljiš na prastarim mitovima. danas se mrzi comic sans, nekad je to bio slučaj sa times new romanom, kojeg su koristili svi i njihova baka. danas mu se polako vraćaju, ali sigurno ne zato jer se renda jednako kao i 2001.

    kad već guglaš, nađi nešto novijeg datuma. usput nađi i nešto o osnovama tipografije, možda će pomoći. :)

    Comment by Bojan

    on Wed, 27. Aug 2008 - 15:49:02

  15. If you are concerned about exactly how a web page appears this is a sign that you are still aren’t thinking about adaptive pages. One of the most significant accessibility issues is font size. Small fonts are more difficult to read. For those of us with good eyesight, it can come as a shock that a significant percentage of the population has trouble reading anything below 14 point times on paper. Screens are less readable than paper, because of their lower resolution.

    Izvor: http://www.hobo-web.co.uk/tips/55.htm
    Još ti je i jedan od podnaslova: Web Design; Best Font Sizes To Use In 2008

    Po ovome i dalje vrijedi moja tvrdnja da je teže čitati na monitorima jer imaju manji dpi, a pogotovo ako font ima serife…

    Comment by Nemesis

    on Wed, 27. Aug 2008 - 16:48:46

  16. nije rasprava niti post bio o printu i veličini fonta, pa ne kužim zašto taj citat i taj članak. a na pitanje je li nešto čitljivije na papiru ili ekranu nema smisla trošiti riječi. font size sam spomenuo u prvom komentaru da je bitniji pojam od odabira “serif ili sans-serif”.

    ajd još neki članak s gugla kad si krenuo već :) pa da potkrijepiš nečim svoj stav.

    Comment by Bojan

    on Wed, 27. Aug 2008 - 17:13:16

  17. Evo, readability s općeprihvaćenog sitea Web Design From Scratch
    http://webdesignfromscratch.com/readability.cfm#serif

    Ajde molim te pobij ovo, ali barem stavi neki link kao zaleđe jer ovo odbijanje svega živoga kako ne bi priznao krivicu je već smješno…

    Comment by Nemesis

    on Wed, 27. Aug 2008 - 18:57:13

  18. Oprosti, po čemu je WBFS opće prihvaćen. Mislim daj mi ALA, što god, ali WBFS?! Čak i da je “opće prihvaćen” to nije argument, već upravo greška u argumentaciji. Također, nazivati sans serif elemente tek “ukrasima” jest uvredljivo bilo kome tko se ikad pozabavio tipografijom.

    Čini mi se da si pročitao te članke i složio si u glavu jednu vrlo pojednostavljenu sliku o jednom cijelom umijeću. Utoliko ti preporučam da pročitaš “The Elements of Typographic Style” Roberta Bringhursta te “Thinking with Type” Ellen Lupton. Zaista je pretenciozno govoriti o tipografiji i donositi zaključke (u raspravi koja i danas traje) za koje kažeš da su konačni.

    Također, otkad statistika potvrđuje išta? Veći je postotak korištenja Verdane, pa je zato ona dobar izbor. Koliko je ljudi glasalo za Busha, a tek koliko je “web dizajnera” mislilo, pa i danas misli da je web stranica tek dizajn i nešto koda?

    Usput… Sm(i)ješno. :) Također smiješno. ;)

    Comment by Ivan Brezak Brkan

    on Wed, 27. Aug 2008 - 22:39:04

  19. Daj shvati jednu stvar, dobar dio ekipe koja dolazi ovdje ne mari 5% za teoriju tipografije, i da ih zanima, vjerojatno je neće imati gdje iskorititi. Znam da postoje iznimke, ali zbog tih 5% posjeta se meni ne isplati produžavati postove i komplicirati jer će to otjerati 95% koji su ovdje došli po nekoliko savjeta kako bi uspjeli srediti usability na svojem siteu.

    Mogao bi eventualno pisati o terminologiji kako bi znali odgovor na 13. pitanje milijunaša, ali to je stvarno nategnuta situacija. Tako da nije stvar u tome što sam ja nekim slučajem odlučio sebi utuviti u glavu najjednostavnije moguće objašnjenje serifa, nego je stvar u tome što iz mojeg gledišta ne vidim kako bi prosječnom korisniku ove stranica ikada zatrebala ta terminologija.

    Također znam da je pitanje korištenja typefacea još jedno u nizu pitanja oko kojeg se lome koplja. Kao npr. Mac ili PC, FER ili Ekonomija, HDZ ili SDP, PlayStation3 ili X360, PHP ili ASP. Svako ima svoje mišljenje, a sve ovisi o percepciji. Tako neki zastupaju tvrdnju da je tehnologija pregazila dvojbu serif vs. sans serif u slučaju readabilityja. Ja spadam u one druge, oni koji kažu da još uvijek nije potpuno sigurno koristiti serif typeface.

    I za kraj, nemoj se naljutiti, ali nisi shvatio primarnu ciljanu skupinu ovog bloga, to nisu osobe kao ti, koji su već stručnjaci u ovom području. Primarna ciljana skupina su prosječni web masteri i freelanceri koji su željni laganog štiva kojim bi poboljšali svoje stranice.

    BTW: Sorry na tipfelerima, događa se…

    Comment by Nemesis

    on Thu, 28. Aug 2008 - 14:03:06

  20. što da još dodam nakon svega… ako dijeliš savjete, informiraj se bar tako da pročitaš relevantnu literaturu, pošto iskustva još nemaš. to tvoje neiskustvo ti ne mogu zamjeriti, u tvojim godinama sam napikavao u front pageu i dreamweaveru i nisam imao pojma ni o mnogo manje bitnim područjima od web tipografije. ono što bi mogao zamjeriti su tvoji komentari upućeni meni, koji mi se ne čine (možda se varam) dobronamjernima. ne pobijam tvoje argumente iz zabave.

    fontovi kao što su verdana, trebuchet ms i georgia su dizajnirani posebno da bi se lako čitali na ekranu. svaki od ta tri je dobar izbor za body copy, no tvoji posjetitelji moraju znati da nije sve tako jednostavno, kao i ti. ako ništa drugo, upozori ih na font-size, kontrast i razmak između redova. to bi ti proširilo post za čitavu jednu rečenicu. ako si upućen u to. pitanje nije serif ili sans-serif, pitanje je kako ćeš koristiti font koji odabereš. ako misliš da “nije sigurno” koristiti serife, mogao bi i optimizirat sajt za 800×600, jer radit za veće reze također nije sigurno.

    “za one koji žele znati više:”

    http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
    http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
    http://informationarchitects.jp/the-web-is-all-about-typography-period/

    Comment by Bojan

    on Sat, 30. Aug 2008 - 14:40:33

  21. Dvoumio sam se oko toga da objasnim kako veličina fonta i proreda te kontrast mogu pomoći oko usabilityja, ali sam to ostavio za neki drugi post, vjerojatno sam fulao kod te odluke, ali neka, barem imam temu za neki budući post…

    A što se tiče ovoga da optimiziram za niže rezolucije, to mi je potpuno neisplativo jer manje od 0,8% dosadašnjih posjetitelja ima niže rezolucije, s tim da je 0,2% došlo putem iPhonea pa oni mogu zumirat…

    Comment by Nemesis

    on Sat, 30. Aug 2008 - 15:04:39

  22. [...] dobro izgledaju na monitoru dobri za tisak. O tome ću još pisati u budućnosti, pa stay tunned imam članak. Inače, mali google “web safe fonts” pojma bi pomogao u proširivanju ovog [...]

    Pingback by 99designs natječaji | Webasticno

    on Sun, 14. Sep 2008 - 15:17:46

*
Imao sam problema s botovima pa bih vas zamolio da utipkate ovaj kod sa slike
Anti-Spam Image