Ovaj blog sam kreirao onako, iz zezanja i nikada se nisam nešto posebno njime bavio. Nema čak ni uobičajenih “O meni” i “Kontakt” stranica. Par puta sam menjao dizajn, ali je to bilo čisto promene radi, jer mi dosadilo da gledam u prethodnu verziju.
Ovo je prvi ozbiljan dizajn pravljen specifično za ovaj blog.
Tipografija par excelance
Fontypo je kombinacija reči fonts i typography. Odavno sam želeo da vidim koliko je jednostavno/komplikovano kreirati dizajn koji će se bazirati na jednom čvrstom gridu i – koliko je god to moguće – poštovati vekovima ustaljena tipografska pravila. Mesecima čitam postove o tome, gledam CSS frameworke koji će to uraditi za mene (i usput verovatno skuvati ručak Aleksi :). No, sve se to slabo usadi dok ne prođe kroz prste.
Ovaj dizajn nema nikakvih slika – mada planiram da dodam jednu, dole na dnu, malu fotografiju moje širokosti. Sve slike na sajtu su deo zapisa, sama tema je čist tekst. 95% sadržaja koristi jedan te isti font; ako koristite Mac videćete najverovatnije Helvetica Neue, a na Windowsu Arial. No, nijedan od ova dva fonta nije moj prvi izbor - to su Frutiger pa Univers. Ukoliko još koristite Firefox 3, onda ćete tek uživati, obzirom da verzija 3 sjajno podržava različite veličine unutar familije fontova. Konačno da imena CSS pravila font-family i font-weight dobiju puni smisao. Tipografski sam ovde najtanji, tako da ću vremenom sigurno doterivati Fontypo.
Dizajn “stoji” na skeletu1 koji bi trebalo da se taman lepo smesti unutar 1000px širine. Ono što je interesantno je da nisam koristio px već em pri definiciji skeleta, tako da će povećanjem veličine fonta “porasti” ceo skelet, zadržavajući sve osobine kvalitetne tipografije.2
Jedan red teksta ima 40-50 znakova – taman prava mera. Visina linije je 150% fonta, a razmak između pasusa je tačno visina jedne linije. Tekst na strani strogo prati vertikalni ritam, što možete proveriti korišćenjem Syncotype bookmarkleta. Počev od ovog zapisa, više nećete videti znak za hyphen (-, mala crtica desno od 0 na tastaturi) da razdvaja delove rečenice; sada koristim en dash i em dash, tj. kraću i dužu tanku crticu po sredini linije teksta. Ako mi nekada zatreba minus, to opet neće biti spomenuti - već −. Navodnici i apostrofi su lepi tipografski zavijutci, a ne oznake za minute (‘) i sekunde (“). Ti isti navodnici, ako se zadese na početku naslova, “vire” sa strane. Akronimi usred teksta su veličine malih a ne velikih slova. Bulleti ispred liste nisu uvučeni, već izvučeni u belinu sa leve strane, tako da leva ivica teksta ostaje netaknuta. Blok citati su verovatno najkomplikovanije parče CSS-a u čitavom fajlu, ali mi je veoma drago kako je na kraju ispalo. Zahtevaju prilično naprednu CSS podršku da bi se lepo sve videlo, što isključuje korisnike IE6 i IE7.
Obzirom da je sadržaj na srpskom, HTML element ima lang="sr" atribut, što će Google i ekipa, nadam se, znati da cene. Gomila engleskih reči kojih nikako da se otresem3 je markirana istim atributom sa odgovarajućom vrednošću.
Ugođaj čitanja kao krajnji cilj
Nema logoa na vrhu. Nema navigacije na vrhu; nema je ni sa strane. Nema sporednih sadržaja načičkanih tik uz tekst. Želim da se ono što ovde pišem čita. Navigacija ka ostalim delovima sajta je prisutna – ispod samog teksta, no ono što želim je da tebi, čitaocu, pažnja bude usmerena na tekst.
Otuda i aspiracija ka dobroj tipografiji – da čitanje bude što ugodnije.
Otkud baš sada? Upgrade na WordPress 2.5 je skršio ispis kategorija u prethodnoj temi, te me ponukao da svo spomenuto čitanje konačno sprovedem u delo. Nije to malo čitanja…
Sjajna prezentacija Jeffa Crofta sa Webmaster Jam Sessiona (Sep ‘07).
Vertical rhythm Richarda Ruttera.
Incremental leading Marka Boultona, uz njegovih Five simple steps to better typography kao nezaobilaznog štiva.
Setting Type on the Web to a Baseline Grid Wilsona Minera.
Divna tipograska poslastica The Trouble With EM ’n EN (and Other Shady Characters) Petera Sheerina, takođe sa web sajta A List Apart.
The Elements of Typographic Style Applied to the Web koje piše Richard Rutter a prema tipografskoj bibliji Roberta Bringhursta – The Elements of Typographic Style.
Veliku pomoć, što tokom kreiranja dizajna a što i ubuduće, prilikom pisanja, pružaju sledeće lepe tvorevine nesebičnih ljudi:
Ova lista interesantnih simbola koji se uz to nalaze i u HTML entity tabeli.
wp-typogrify plugin koji implementira SmartyPants Johna Grubera
Već spomenuti Syncotype, bez koga bi mi bilo neizmerno teže da sve lepo složim.
Sada, kada gledam kako tekst “izgleda” na Macu i na Windowsu i upoređujem Helvetica Neue i Arial, sasvim mi je jasno zašto se Arial smatra bledom kopijom Helvetice. Mada sigurno i različit font smoothing pristup ima uticaja…
Na engleskom blogu ću u dogledno vreme objaviti tekst o iskustvima stečenim pri radu na ovom dizajnu. Do tada, čitamo se – ovaj blog nastavlja svoj redovni program.
Skelet mi se čini najprihvatljivijim prevodom za grid. Kostur zvuči zlokobno, a šablon previše uopšteno. ↵
Mada to dosta zavisi od preciznosti browsera u zaokruživanju. Na primer, kada u Firefoxu 3 povećam veličinu teksta na 120%, onda mojih 12px postane 14.4px, čime visina linije postane 21.6px što se zaokruži na 22px, što onda poremeti celu računicu. Šta je, tu je… ↵
Ponekad uhvatim sebe da razmišljam na engleskom. Užas bre. ↵