Despre tipografie

Văd aceeași greșeală de atât de multe ori încât simt că este nevoie de o însemnare pe blog. Nu că asta ar schimba multe, dar… să încercăm.

Sunt doi factori ce contribuie foarte mult la lizibilitatea unui text: font-weight și line-height.

font-weight

Până acum vreo doi ani, majoritatea fonturilor comune știau de două unități: normal și bold. Sau 400 și 700. Dar cum webfonts au devenit tot mai comune, s-au dezvoltat foarte mult și restul mărimilor (de la 100 la 900, în increment de 100). Prin urmare, un font-weight diferit de 400 (sau normal) pe conținut ar putea genera un text mai dificil de citit:

font-weight

În stânga este textul la font-weight:300, în dreapta este font-weight:400. (sursa)

O problemă suplimentară – dincolo de lizibilitate – apare la anumite fonturi, ce nu sunt complete: nu conțin diacriticile românești pe toate variantele. Și apar situații în care textul este afișat cu font-weight:300, dar diacriticile apar boldate.

Păi și când ar trebui să folosești altceva în afară de normal și bold?

Varianta sigură? Niciodată! Varianta mai puțin radicală? Doar atunci când ai un motiv bine întemeiat. Adică așa cum folosești bold sau italic pentru a scoate în evidență ceva, la fel ar trebui să folosești și un font-weight diferit de normal. Varianta cea mai comună? Titluri.

line-height

Despre line-height am scris acum mai bine de cinci ani. Lucrurile rămân valabile, cu o completare: am tot observat că se practică foarte mult specificarea unei unități atunci când se setează line-height. Adică lucruri de genul line-height:26px sau line-height:1.3em. Chiar dacă nu este neapărat o practică greșită, este mult mai util să se specifice o valoare fără nici o unitate, de exemplu line-height:1.5. Asta înseamnă că va avea întotdeauna o valoare relativă la dimensiunea fontului.

Urcați imagini cât mai mari!

În ultima vreme am găsit de câteva ori sfatul „nu mai urcați poze mari pe blog”. Plus recomandarea că dimensiuni de 8-900px sunt în regulă. Doar că nu sunt în regulă. Iată de ce:

Prețul

Prețul este motivul principal invocat de majoritatea: stocarea costă, poți face economii importante dacă nu urci poze mari sau alte minuni de genul. Să fim serioși, stocarea este extrem, dar extrem de ieftină. Cât de ieftină? Cam $0.03/Gb/Lună. Cât înseamnă asta? Pentru 1Tb de imagini asta înseamnă vreo $30. Nu am eu mari afaceri online, dar tind să cred că în momentul în care ai 1Tb în imagini ai alte costuri mult mai mari, iar cei $30 vor însemna o sumă infimă. Ba chiar și găzduirea „normală” (fără cloud & co) este ridicol de ieftină când vine vorba de spațiu.

ATENȚIE: vorbesc de stocarea acestor imagini. Sub nici o formă nu susțin sau încurajez servirea imaginilor la rezoluție maximă! De cele mai multe ori 1600-2000px este rezoluția optimă (mai ales dacă se urmează sfatul de mai jos).

Tehnologia

Tehnologia evoluează în ritm alert. Acum zece ani, cea mai comună rezoluție era 1024×768; pe lângă asta mai erau câteva rezoluții extrem de comune și… cam atât. Acum situația stă altfel: avem nu doar o mulțime de rezoluții (pentru că producătorii consideră că-i foarte util să facă sute de combinații) dar și densități diferite ale pixelilor (așa numitele Retina Displays). Adică nu doar că avem o mulțime de rezoluții dar putem avea aceeași rezoluție pe o mulțime de dimensiuni fizice.

În aceste condiții, dacă îți iei în serios site-ul, ar fi bine să fii pregătit. OK, poate azi site-ul tău arată excelent cu pozele de 800px lățime, dar ești sigur că peste doi-trei-cinci ani (când monitoarele Hi-DPI vor fi nu doar accesibile ca preț dar și adoptate la o scară largă) site-ul tău se va vedea bine și pe noul design?

Așadar, nu e mai simplu (și mai sigur!) să urci imaginile la o rezoluție cel puțin dublă decât ce ai nevoie?

Sfatul meu

Varianta scurtă: urcați pozele la o rezoluție cât mai mare, serviți pozele la rezoluția optimă. Adică urci pozele la 2-3000px (poate mai mult). Le servești la cât ai nevoie ACUM. Peste doi ani, când schimbi designul, va trebui doar să re-generezi imaginile pentru dimensiunile de care ai nevoie.

Pro Tip

În acest moment, este destul de tricky să servești imagini optime pentru fiecare rezoluție și densitate. Poți folosi diverse biblioteci JavaScript, poți folosi Media Queries (în CSS) sau poți face următoarea chestie:

Generezi imaginile la o rezoluție dublă față de ce ai tu nevoie (e.g. dacă ai nevoie de 400×400 le generezi la 800×800) dar la o calitate foarte scăzută (gen 15-20%). Când le afișezi, vei avea grijă – din CSS – să aibe dimensiunea necesară (în majoritatea cazurilor vei rezolva o grămadă de probleme folosind următoarea regulă CSS: img { max-width:100%; height:auto }.

Imaginile astfel afișate vor arăta foarte bine atât pe ecranele Hi DPI (cel puțin pe dispozitivele mobile, încă n-am testat pe monitoare normale) și vor avea și o dimensiune rezonabilă.

Resurse utile

  1. http://www.html5rocks.com/en/mobile/high-dpi/
  2. http://www.html5rocks.com/en/mobile/easy-high-dpi-images/
  3. http://paulstamatiou.com/responsive-retina-blog-development-part-2/
  4. https://bensmann.no/the-hidpi-web/
  5. http://www.netvlies.nl/blog/design-interactie/retina-revolution
  6. https://css-tricks.com/on-responsive-images/

Toate dimensiunile reprezintă lățimea imaginilor. Înălțimea se presupune că urmează proporțiile imaginii originale.

Extensie Profitshare pentru Chrome

Am avut azi puțin timp liber și am încropit o extensie de Chrome pentru Profitshare.

Extensia este setată astfel încât vei împărți profitul cu mine, dar un procent mic (se generează random un număr între 0 și 1000 și dacă acel număr este peste 950, se va împărți profitul). Pentru moment acest lucru nu este opțional, dar în funcție de succesul extensiei voi schimba această funcționalitate (și voi adăuga altele noi)