În Tips & Tricks

Introducere în Responsive Typography

Responsive Typography

Despre conceptul de Responsive Design ați putut citi deja într-un alt articol publicat pe Ctrl-D, unde era menționat faptul că acesta se referă la capacitatea unui site de a se adapta la diferite rezoluţii şi dispozitive, pentru a transmite informația într-un mod optim pentru fiecare dispozitiv de afișare. În mod ideal, atunci când layout-ul nostru se adaptează, și dimensiunea fontului ar trebui să facă același lucru. Să vedem în continuare ce presupune mai exact conceptul responsive typography.

Ce este responsive typography?

Ideea principală în responsive typography este să se folosească tehnici de ajustare a fontului unui site, ca mărime, astfel încât acesta să arate la fel pe orice rezoluție sau dispozitiv de pe care este accesat, iar experiența de citire să nu fie afectată din acest motiv.

Deși responsive design rezolvă mai multe probleme legate de reguli de formatare a paragrafelor (mărimea fontului, înălțimea sau lățimea coloanei), există anumite aspecte ce țin de optimizarea fontului ce ar trebui luate în considerare separat.

Avem nevoie de responsive typography?

Până nu demult, rezoluțiile ecranelor erau, într-o mai mare sau mai mică măsură, omogene, pe când acum, există o varietate de rezoluții, rapoarte și dispozitive de pe care putem naviga pe internet. În plus, avem modificări și în ceea ce privește densitatea pixelilor (retina display).

Chiar și fonturile care până acum funcționau perfect, dar care nu au fost gândite pentru aceste schimbări, nu reușesc să țină pasul cu ele și tind să nu mai fie folosite. De exemplu, principalul font cu serife, Georgia, funcționează bine pe web doar până la dimensiunea de 16 pixeli. Peste această dimensiune, fontul arată diferit, dar nu din cauză că nu este un font cu un design bun, ci, pur și simplu, nu a fost creat pentru dimensiuni mari sau pentru ecrane cu densitate crescută a pixelilor.

În aceste condiții, lucrurile au devenit mult mai complicate când vine vorba de alegerea tipului și dimensiunii fontului atunci când construim un site.

Alegerea fontului

Fiecare font are avantajele și dezavantajele sale, iar alegerea fontului destinat paragrafelor de text se restrânge, ca de obicei, la cele trei mari categorii: serif, sans serif sau slab serif. În general, acestea au aceleași performanțe, însă sub dimensiunea de 12 pixeli, fonturile cu serife nu arată suficient de bine. Cu toate astea, orice text sub dimensiunea de 12 pixeli este cu siguranță mult prea mic pentru a fi citit în condiții optime pe monitoarele actuale.

Probleme de afişare

Dacă vrem ca fontul ales să se potrivească în cât mai multe situaţii, trebuie să avem în vedere, în primul rând, 3 mari categorii de sisteme de operare, care vin “la pachet” cu propriile probleme de afișare.

De exemplu:

  • Pe Windows/Linux – sistemele de fonturi arată ok în majoritatea cazurilor.
  • Pe OS X – sistemele de fonturi arată bine pe ecranele cu rezoluţii mici, se văd prea îngroşate pe ecrane cu rezoluție mare, însă pe Retina Display sunt afişate în regulă. De asemenea, corpul de literă mai subţire arată excelent pe ecranele cu rezoluţie mare, dar este mult prea subţire pentru Retina Display.
  • iOS – sistemele de fonturi arată prea îngroşat în cazul ecranelor cu rezoluție mare (iPhone 1-3, iPad 1-2), însă arată bine pe Retina Display (iPad 3).

Aşadar, pentru performanţă optimă în afara ecranelor cu rezoluție mică şi a sistemelor de operare Windows şi Linux, avem nevoie de 3 ajustări ale fonturilor, ca mărime.

  • Mai subţiri (pentru ecrane cu rezoluţie mare)
Segoe UI
Open Sans
  • Normale (pentru Retina landscape HTML mode)
Roboto
Myriad Pro
  • Mai îngroşate (pentru Retina portrait HTML mode)
Proxima Nova
Helvetica

În zona de mobile, fiecare sistem de operare folosește propriul lui font, dar se randează la fel de bine și pe PC:

Câteva exemple de fonturi care arată bine pe toate mediile ar putea fi:

Concluzie

Prin implementarea de responsive layouts şi responsive typography, experienţa digitală a cititorului devine mai bună. Conținutul, fiind mai ușor de parcurs de către cititor datorită folosirii unui font bun, va crește și performanţa site-ului din punctul de vedere al traficului (scade rata de abandon și crește timpul petrecut pe site). Este o situație de tip win-win, atât pentru proprietarul site-ului, cât și pentru cititor.