Fontypo

Ovaj blog sam kre­i­rao onako, iz zeza­nja i nikada se nisam nešto posebno njime bavio. Nema čak ni uobi­ča­je­nih “O meni” i “Kon­takt” stra­nica. Par puta sam menjao dizajn, ali je to bilo čisto pro­mene radi, jer mi dosa­dilo da gle­dam u pret­hodnu verziju.

Ovo je prvi ozbi­ljan dizajn pra­vljen spe­ci­fično za ovaj blog.

Tipo­gra­fija par exce­lance

Fon­typo je kom­bi­na­cija reči fonts i typo­graphy. Odavno sam želeo da vidim koliko je jednostavno/komplikovano kre­i­rati dizajn koji će se bazi­rati na jed­nom čvrstom gridu i — koliko je god to moguće — pošto­vati veko­vima usta­ljena tipo­graf­ska pra­vila. Mese­cima čitam postove o tome, gle­dam CSS fra­me­worke koji će to ura­diti za mene (i usput vero­vatno sku­vati ručak Aleksi :). No, sve se to slabo usadi dok ne prođe kroz prste.

Ovaj dizajn nema nika­kvih slika — mada pla­ni­ram da dodam jednu, dole na dnu, malu foto­gra­fiju moje širo­ko­sti. Sve slike na sajtu su deo zapisa, sama tema je čist tekst. 95% sadr­žaja kori­sti jedan te isti font; ako kori­stite Mac vide­ćete naj­ve­ro­vat­nije Hel­ve­tica Neue, a na Win­do­wsu Arial. No, nije­dan od ova dva fonta nije moj prvi izbor — to su Fru­ti­ger pa Uni­vers.
Uko­liko još kori­stite Fire­fox 3, onda ćete tek uži­vati, obzi­rom da ver­zija 3 sjajno podr­žava razli­čite veli­čine unu­tar fami­lije fon­tova. Konačno da imena CSS pra­vila font-family i font-weight dobiju puni smi­sao. Tipo­graf­ski sam ovde naj­ta­nji, tako da ću vre­me­nom sigurno dote­ri­vati Fontypo.

Dizajn “stoji” na ske­letu¹ koji bi tre­balo da se taman lepo sme­sti unu­tar 1000px širine. Ono što je inte­re­santno je da nisam kori­stio px već em pri defi­ni­ciji ske­leta, tako da će pove­ća­njem veli­čine fonta “pora­sti” ceo ske­let, zadr­ža­va­jući sve oso­bine kva­li­tetne tipo­gra­fije.²

Jedan red tek­sta ima 40–50 zna­kova — taman prava mera. Visina linije je 150% fonta, a raz­mak između pasusa je tačno visina jedne linije. Tekst na strani strogo prati ver­ti­kalni ritam, što možete pro­ve­riti kori­šće­njem Syn­co­type book­mar­kleta.
Počev od ovog zapisa, više nećete videti znak za hyp­hen (-, mala crtica desno od 0 na tasta­turi) da raz­dvaja delove reče­nice; sada kori­stim en dash i em dash, tj. kraću i dužu tanku crticu po sre­dini linije tek­sta. Ako mi nekada zatreba minus, to opet neće biti spo­me­nuti — već −. Navod­nici i apo­strofi su lepi tipo­graf­ski zavi­jutci, a ne oznake za minute (‘) i sekunde (“). Ti isti navod­nici, ako se zadese na početku naslova, “vire” sa strane. Akro­nimi usred tek­sta su veli­čine malih a ne veli­kih slova. Bul­leti ispred liste nisu uvu­čeni, već izvu­čeni u belinu sa leve strane, tako da leva ivica tek­sta ostaje netak­nuta. Blok citati su vero­vatno naj­kom­pli­ko­va­nije parče CSS-a u čita­vom fajlu, ali mi je veoma drago kako je na kraju ispalo. Zahte­vaju pri­lično naprednu CSS podr­šku da bi se lepo sve videlo, što isklju­čuje kori­snike IE6 i IE7.

Obzi­rom da je sadr­žaj na srp­skom, HTML ele­ment ima lang="sr" atri­but, što će Goo­gle i ekipa, nadam se, znati da cene. Gomila engle­skih reči kojih nikako da se otre­sem³ je mar­ki­rana istim atri­bu­tom sa odgo­va­ra­ju­ćom vrednošću.

Ugo­đaj čita­nja kao kraj­nji cilj

Nema logoa na vrhu. Nema navi­ga­cije na vrhu; nema je ni sa strane. Nema spo­red­nih sadr­žaja načič­ka­nih tik uz tekst. Želim da se ono što ovde pišem čita. Navi­ga­cija ka osta­lim delo­vima sajta je pri­sutna — ispod samog tek­sta, no ono što želim je da tebi, čita­ocu, pažnja bude usme­rena na tekst.

Otuda i aspi­ra­cija ka dobroj tipo­gra­fiji — da čita­nje bude što ugod­nije.

Otkud baš sada?
Upgrade na Word­Press 2.5 je skr­šio ispis kate­go­rija u pret­hod­noj temi, te me ponu­kao da svo spo­me­nuto čita­nje konačno spro­ve­dem u delo. Nije to malo čitanja…

• Sjajna pre­zen­ta­cija Jeffa Crofta sa Web­ma­ster Jam Ses­si­ona (Sep ’07).
• Ver­ti­cal rhythm Ric­harda Ruttera.
• Incre­men­tal lea­ding Marka Boul­tona, uz nje­go­vih Five sim­ple steps to bet­ter typo­graphy kao neza­o­bi­la­znog štiva.
• Set­ting Type on the Web to a Base­line Grid Wil­sona Minera.
• Divna tipo­gra­ska posla­stica The Tro­u­ble With EM ’n EN (and Other Shady Cha­rac­ters) Petera She­e­rina, takođe sa web sajta A List Apart.
• The Ele­ments of Typo­grap­hic Style Applied to the Web koje piše Ric­hard Rut­ter a prema tipo­graf­skoj bibliji Roberta Bring­hur­sta — The Ele­ments of Typo­grap­hic Style.

Veliku pomoć, što tokom kre­i­ra­nja dizajna a što i ubu­duće, pri­li­kom pisa­nja, pru­žaju sle­deće lepe tvo­re­vine nese­bič­nih ljudi:

• Ova lista inte­re­sant­nih sim­bola koji se uz to nalaze i u HTML entity tabeli.
• wp-typogrify plu­gin koji imple­men­tira Smar­tyPants Johna Grubera
• Već spo­me­nuti Syn­co­type, bez koga bi mi bilo nei­zmerno teže da sve lepo složim.

Sada, kada gle­dam kako tekst “izgleda” na Macu i na Win­do­wsu i upo­re­đu­jem Hel­ve­tica Neue i Arial, sasvim mi je jasno zašto se Arial sma­tra ble­dom kopi­jom Hel­ve­tice. Mada sigurno i razli­čit font smo­ot­hing pri­stup ima uticaja…

Na engle­skom blogu ću u dogledno vreme obja­viti tekst o isku­stvima ste­če­nim pri radu na ovom dizajnu. Do tada, čitamo se — ovaj blog nasta­vlja svoj redovni program.

---

1. Ske­let mi se čini naj­pri­hva­tlji­vi­jim pre­vo­dom za grid. Kostur zvuči zlo­kobno, a šablon pre­više uop­šteno. ↵
2. Mada to dosta zavisi od pre­ci­zno­sti bro­wsera u zao­kru­ži­va­nju. Na pri­mer, kada u Fire­foxu 3 pove­ćam veli­činu tek­sta na 120%, onda mojih 12px postane 14.4px, čime visina linije postane 21.6px što se zao­kruži na 22px, što onda pore­meti celu raču­nicu. Šta je, tu je… ↵
3. Pone­kad uhva­tim sebe da raz­mi­šljam na engle­skom. Užas bre. ↵