Tipografia pe web: cum alegi fonturile pentru site

Tipografia reprezintă 95% din designul web, conform unui citat celebru în industrie. Poate părea o exagerare, dar reflectă realitatea că pe un site de prezentare sau blog, textul este conținutul principal, nu imaginile.

Alegerea greșită a fonturilor poate face un site cu conținut excelent să pară neprofesionist sau să fie dificil de citit. Alegerea corectă face cititul plăcut și comunică valorile brandului fără că utilizatorul să conștientizeze.

Tipografia pe web: cum alegi fonturile pentru site

Fonturile web se împart în mai multe categorii: serif (cu mici ornamente la capătul literelor, precum Times New Roman), sans-serif (fără ornamente, ca Arial sau Helvetica), monospace (lățime fixă per caracter, folosite pentru cod), display (decorative, pentru titluri mari) și handwriting (care simulează scrisul de mână).

Fonturile sans-serif sunt mai lizibile pe ecrane digitale la dimensiuni mici și medii. Fonturile serif sunt tradițional asociate cu lectura lungă (cărți, ziare) și pot adăuga un aer de autoritate sau tradiție. Combinarea unui font sans-serif pentru body cu un font serif pentru titluri este o practică comună în designul editorial.

Criterii de alegere a fonturilor

Lizibilitatea este criteriul principal. Testați fontul la dimensiunile la care va fi folosit efectiv pe site: 16-18px pentru body text, 24-36px pentru H2, 36-48px pentru H1. Un font care arată bine la 72px poate fi ilizibil la 16px.

Personalitatea fontului trebuie să corespundă valorilor brandului. Un cabinet de avocatură va folosi fonturi cu aer sobru și profesional. Un studio de design va putea experimenta cu fonturi mai distincte. Un blog tehnic va folosi fonturi cu lizibilitate maximă și neutralitate vizuală.

Greutatea fontului (font weight) exprimă grosimea trăsăturilor. Familia completă de greutăți (light, regular, medium, bold, extra-bold) oferă flexibilitate de design. Asigurați-vă că fontul ales are greutățile necesare pentru uzul dvs.

Surse de fonturi web

Google Fonts oferă sute de fonturi gratuite, cu licență open source. Este cea mai populară sursă pentru fonturi web. Dezavantajul este că încărcarea de la servere Google adaugă o dependință externă și poate afecta Core Web Vitals dacă fonturile blochează randarea.

Soluția recomandată este auto-găzduirea fonturilor (self-hosting): descărcați fișierele font (.woff2 în principal) și serviți-le de pe propriul server. Aceasta elimină dependința externă, îmbunătățește performanța și elimină riscul ca Google să schimbe disponibilitatea unui font.

Adobe Fonts (Typekit), disponibil prin abonament Creative Cloud, oferă o selecție premium de fonturi de calitate ridicată. Font Squirrel oferă fonturi gratuite cu licență pentru utilizare web.

Dimensiunile și spațierea tipografică

Dimensiunea minimă recomandată pentru body text este 16px. Sub această dimensiune, cititul pe ecrane mici sau pentru utilizatorii cu vedere slabă devine inconfortabil. Studiile de lizibilitate recomandă 16-18px ca interval optim.

Line-height (înălțimea rândului) optimă pentru lizibilitate este 1.5-1.6 ori dimensiunea fontului. Un text de 16px cu line-height de 24px este mai ușor de citit decât același text cu line-height de 16px (rânduri lipite).

Lungimea optimă a rândului este de 50-75 de caractere. Rânduri prea lungi obosesc ochii care trebuie să se deplaseze mult orizontal. Rânduri prea scurte fragmentează lectura. Controlați lungimea rândului prin max-width pe containerele de text.

Letter-spacing (spațierea între litere) se ajustează fin pentru titluri mari (ușor negativ) și texte ALL CAPS (pozitiv, pentru lizibilitate). Modificări majore ale letter-spacing degradează lizibilitatea.

Combinarea fonturilor

Regula generală este să folosiți maximum 2-3 familii de fonturi diferite pe un site. Mai multe fonturi creează dezordine vizuală și cresc numărul de fișiere de descărcat.

Fonturile contrastante funcționează bine împreună: un serif pentru titluri cu un sans-serif pentru body (sau invers). Fonturile prea asemănătoare creează o tensiune vizuală neplăcută fără suficient contrast pentru a fi percepute ca intenție de design.

Exemple de combinații populare: Playfair Display (serif, titluri) cu Source Sans Pro (sans-serif, body). Montserrat (sans-serif, titluri) cu Open Sans (sans-serif, body). Roboto Slab (slab-serif, titluri) cu Roboto (sans-serif, body).

Performanța fonturilor web

Fiecare greutate și stil de font este un fișier separat de descărcat. O familie completă cu 8 greutăți și variantele italic poate însemna 16 fișiere. Încărcați doar greutățile efectiv utilizate pe site.

WOFF2 este formatul modern cu compresia cea mai bună, suportat de toate browserele moderne. Formatul WOFF este fallback pentru browsere mai vechi. Serviți WOFF2 ca format principal.

Declarația CSS font-display: swap permite browserului să afișeze textul cu un font de rezervă în timp ce fontul web se descarcă, evitând FOIT (Flash of Invisible Text). Aceasta îmbunătățește experiența percepută de încărcare.

Accesibilitate și contrast

Contrastul dintre text și fundal trebuie să respecte standardele WCAG: minim 4.5:1 pentru text normal, 3:1 pentru text mare (18px+ regular sau 14px+ bold). Text gri deschis pe fundal alb poate arăta elegant dar este dificil de citit și problematic din perspectiva accesibilității web.

Evitați textul alb mic pe fundal colorat saturat. Contrastul cromatic insuficient este una dintre cele mai frecvente greșeli de design în site-urile web profesionale.

O tipografie bine aleasă și corect configurată contribuie direct la rata de conversie a site-ului. Conținut lizibil, plăcut de parcurs, cu o ierarhie vizuală clară, menține utilizatorii mai mult timp pe pagină și îi ghidează natural spre acțiunile dorite.