Blogul lui Viorel

Mică istorie

Din 1991, de la primul 286, tata, care e programator de meserie, mi-a băgat în cap că a şti să foloseşti calculatorul e o chestie, şi a şti să-l programezi e cu totul altceva. Un programator e superior unui utilizator obişnuit tocmai pentru că-i controlează uneltele în toate aspectele.

Şi din 1991 până în liceu, nu prea am vrut să-l ascult. Deşi am programat în Basic pe HC-uri din clasa a doua, la “clubul copiilor şi elevilor”, şi am întâlnit nişte oameni mişto cu care încă sunt prieten acolo… Deşi m-am jucat cu premii pe la olimpiada de informatică şi pe la diverse tabere… Cred că în clasa a noua a început de fapt episodul “programare”. Până atunci m-am jucat în draci (nu, nu doar pe calculator, deşi faptul că am toate Level-urile şi XTremPC-urile de la numărul unu ar trebui să spună ceva despre asta).

Deci, pot spune că am o slăbiciune pentru programare. Destul de mare încât să nu mă satur în şapte ani. Pentru mulţi din cei care mă cunosc, asta ar fi o dovadă clară că-mi place cu adevărat.

Problema mea dintotdeauna însă e faptul că nu pot să mă limitez. Şi pe lângă pasiunea pentru aspectele funcţionale şi pragmatice ale programării, în care am prieteni buni care se pricep poate mai mult decât mine, am şi o pasiune pentru artele vizuale. Pentru estetică. Deci pentru ce ţine de imagine, de stil, de aspect. Iubesc fotografia, chiar dacă am spus lucrul ăsta deja de prea multe ori ca să mai surprind pe cineva (plus că e şi foarte “trendy” să fii fotograf sau să-ţi placă fotografia, odată cu accesul mult mai facil la “instrumentul muncii”), dar iubesc şi stilul tipografic aplicat în design.

Mi se pare poate cel mai pragmatic dintre stiluri. Mi se pare suficient de minimalist şi esenţial încât să aibă veleităţi moderne şi să fie actual, şi suficient de puternic pentru a transcende adevărata lui vârstă, la fel de veche ca scrisul însuşi.

Caligrafii sumerieni pot fi consideraţi primii designeri cu veleităţi tipografice. Sau primii tipografi cu veleităţi de designeri. Deşi termenul “design tipografic” trimite în limba română automat la Gutemberg, latura artistică depăşeşte ceea ce englezii denumesc “the movable type“, adică tipograful modern - maşina care inscripţionează caractere modelate în forme metalice şi aranjate după standardul paginii.

Arta tipografică se împarte în două mari arii. Design-ul de fonturi în sine, şi design-ul CU AJUTORUL fonturilor şi textului.

Şi cum respectul pentru text, cultul literelor şi al liniilor de cod e clar că mi se trage de la programare, în postul ăsta am să mă refer la a doua disciplină, şi anume design-ul cu ajutorul fonturilor. Articolul în sine e de fapt o apologie închinată acestei deprinderi de design, de a folosi glife pentru a inspira şi a instiga privitorul. Nu voi atinge utilizări mai puţin comune gen acrostihurile literare, grafitti-ul sau stencil-ul sau lucruri de gen. O să mă refer în general la lucruri care ţin de sau care sunt scalabile la mediul online.

Internetul şi scriitura

Toţi cei care au avut de-a face vreodată la nivel profesional cu design-ul şi development-ul aplicaţiilor pe web au avut de-a face cu paradigma textului ca mediu suprem de comunicare. Uneori singular, alteori “doar” dominant, e clar că e cea mai larg folosită unealtă de transmitere a mesajelor. Şi cum Internetul se defineşte ca fiind cea mai mare reţea de comunicare, e clar că felul cum e scris şi cum e aranjat acel text “face sau desface” un mesaj, fie el de divertisment, informativ sau publicitar.

Evident, nu ne ocupăm de copywriting, scriitura în sine fiind apanajul literatorilor talentaţi, ci ne ocupăm de ideea că web design-ul e 95 la sută tipografie. Şi nu atingem ideeea doar aşa, fugitiv, ci chiar de mai multe ori. (via)

Exemplele de articole de mai sus sunt perfecte pentru a ilustra importanţa felului în care textul e stilizat nu doar în paginile HTML, ci în orice format vizual în care transpui un mesaj textual (bannere, animaţii, filme, etc).

Typesetting pe web - ghid practic

Aşa cum cei care s-au documentat cât de cât pe tema asta ştiu, web designerii amatori de senzaţii tari pot încerca fără prea mari dureri de cap (ai nevoie doar de un strop de Flash, ceva Javascript şi nişte HTML care se “degradează graţios”) o tehnică extrem de utilă pentru site-urile în care estetica e totul. Nu ştiu cât de “la modă” mai e, cert e că pe mine unul mă enervează faptul că nu pot selecta întreg blocul de text datorită incluziunilor Flash, însă cei care susţin constant image replacement-ul pentru fonturi exotice se pare că sunt de altă părere.

Am început cu “excepţia” de care nu ne vom ocupa, pentru a o înlătura din ecuaţie.

Pân-aici v-a fost!

Aş vrea să “compilez” cumva toate site-urile şi resursele preţioase pe care le-am găsit în cele câteva luni de când urmăresc să pun în practică de fiecare dată când am ocazia un standard pentru tipografia pe web din care toţii designerii ar trebui să fure, nu doar “să se inspire”. Pentru că un text lizibil şi aspectuos face mai mult pentru un site bazat pe conţinut decât orice widget sau imagine.

Să vorbim despre arhitectura informaţională şi typesetting-ul pe web!

Ghidul practic din subtitlu va urma acestei însemnări, pentru că aici vreau doar să direcţionez spre sursele informaţiilor, şi în unul din posturile următoare vreau să diger şi să compilez informaţiile cu care am rămas din ele. Aşadar, pregătiţi-vă mouse-ul pentru click-uri, fiindcă urmează o adevărată comoară de resurse tipografice!

Începem, aşa cum ar trebui să înceapă fiecare tânăr web designer sau developer cu pretenţii, cu biblia.

Dintre articolele cele mai folositoare şi mai actuale se identifică în mod clar “How to size text in CSS“, care se ocupă de uniformizarea dimensiunilor de font pe diversele platforme pe care site-ul vostru va fi vizibil. Sau “Setting type on the web“, care, referenţiind şi la “Compose to a Vertical Rythm“, arată cât de importante sunt spaţierile şi distribuţia rândurilor în pagină. La fel şi “Baseline rhythm deciphered“.

Rândul în sine are o valoare foarte mare în compoziţia conţinutului unei pagini, fie ea de carte, revistă sau website. Recurenţa, repetiţia, emfazele, diferenţiatorii şi ritmul unei pagini sunt tratate destul de bine în literatura de specialitate. Spre exemplu, Mark Boulton încearcă o sensibilizare şi o familiarizare a designerului începător oferind “Five simple steps for better web typography“, o serie excelentă şi un must-read foarte bine privit şi citat.

Toată povestea ritmului se reduce la a-ţi alege un standard şi a te ţine de el. Şi un calculator de ritm n-ar strica nimănui, nu-i aşa?

Fonts of choice

Mulţi designeri de site-uri caută “soluţii ideale” pentru alegerea fonturilor care, în combinaţie, transmit cel mai bine un anume gen de mesaj.

Aşa cum am menţionat mai sus, sunt adeptul textului fără subterfugii, a textului HTML pur. sIFR e o variantă tentantă atunci când ai de-a face cu o publicaţie sau cu un site de prezentare care pune accentul puternic pe vizual. Acolo însă în mare parte se pot folosi imagini ca substitute, deci sFIR rămâne o unealtă a site-urilor “posh”, care se vor “altfel” cu orice preţ.

Aşadar, la întrebarea “există vreo combinaţie generalistă de fonturi cu grad mare de solubilitate?“, există vreun răspuns?

Sunt specialişti care şi-au dat cu părerea. Şi datorită faptului că-mi place concluzia la care au ajuns, o să vă pun şi pe voi la curent cu faptul că, spre exemplu, Georgia şi Verdana dau foarte bine împreună. O să vă convingeţi de asta cu vârf şi îndesat odată ce-mi lansez noua temă de blog.

Ideea de bază a articolului de mai sus e faptul că fonturile Georgia şi Verdana sunt făcute special pentru a fi afişate pe ecran, de specialişti cu experienţă vastă în tipografia digitală, şi cu o idee clară în minte - să reproducă lizibilitatea şi stilul deosebit al serifului şi sans serifului special pentru pixelii noştri cei de toate zilele.

Un alt articol foarte util se ocupă cu distribuţia standard a fonturilor în bundle-urile software cele mai răspândite (deci în distribuţii de Windows, Office, Leopard sau pachete Adobe, de exemplu). De ce e util să ştii asta? E evident că fonturile de sistem influenţează fundamental întreaga idee de “webfont”, pentru că afişarea fontului pe care-l vrei pe o pagină din păcate depinde strict de tipul de browser şi de fonturile de sistem instalate. Şi nu poţi să faci un “educated guess” decât dacă ştii pe ce fonturi te poţi baza în majoritatea situaţiilor, pe baza statisticilor şi a tabelului destul de complet de fonturi cu care pachetele software respective îmbogăţesc sistemul unui calculator obişnuit. La o adică, poţi targeta destul de bine la nivel de font un site intern, spre exemplu, dacă ştii că e un corporate policy să fie instalate pe toate PC-urile care vor avea acces la site-ul de intranet respectiv un Microsoft Office 2007, şi deci fontul “Copperplate Gothic Light”.

Pe de altă parte, dacă ai o audienţă foarte largă, nu te poţi baza decât pe fonturile foarte larg distribuite, şi pe platformele care nu suportă “by default” fonturile respective, trebuie să găseşti substituenţi foarte apropiaţi. Şi de aici dureri de cap şi băgări de organe în cele mai adânci locaţii geografice. Noroc cu alte articole scrise special pentru platforme mai “nestandard”! Spre exemplu, acest articol vorbeşte despre echivalentele Windows ale fonturilor cuprinse în diversele distribuţii de Linux.

În “The secret lives of fonts” sunt tratate extrem de original nişte teme care ţin mai mult de print, dar care influenţează prin psihologia conexă inclusiv online-ul. Cu sau fără intenţie, autorul face experimente care să-i demonstreze statistic faptul că un anume gen de public e mai reticent sau mai permeabil la un anume tip de font sau dispoziţie în pagină a unui eseu cu conţinut voluminos. Foarte interesant…

Bonus, pentru colegii care codează cel puţin la fel de mult ca mine, IDE-ul vostru are nevoie de un revamping dacă vreţi să vă îmbunătăţiţi atmosfera de development şi să vă personalizaţi spaţiul de lucru. Aşa că puteţi să folosiţi câteva din fonturile monospaţiate pe care le studiază lumea în articole.

Comunităţi şi resurse tipofile

• Typophile
• Typeneu
• I love typography
• Typographica
• Typographer

• The elements of typographic style applied to the Web
• Cea mai mare arhivă de fonturi gratuite pentru PC şi MAC - DaFont
• Beautiful typefaces for professional design, via SmashingMagazine
• 40 excellent free fonts for professional design, via SmashingMagazine
• Thinking with type
• Resursele oferite de Mark Boulton sunt printre cele mai uşor de înţeles şi aplicat: Design and the Divine Proportion, Five simple steps for better web typography, Five simple steps to designing grid systems.
• Better web typography
• Terminologie de specialitate explicată vizual
• Unealtă cu care poţi să-ţi printezi toate fonturile instalate în sistem
• Identifică un font

Specialişti de referinţă în tipografie online

• Luc Devroye
• Mark Boulton
• Matthew Desmond
• Jeremy Pettis

Orice adăugire valoroasă e mai mult decât binevenită!

Deci dacă aveţi vreun link mişto sau ştiţi vreun designer tare care are un fetiş penru tipografie, abia aştept să-mi mai clătesc ochii şi să completez lista de mai sus!