Un ghid practic pentru text lizibil pe web-ul modern

De ce majoritatea site-urilor web sunt mai greu de citit decât ar trebui

Site-ul web obișnuit din 2026 vine cu o familie de fonturi personalizată, culori de brand alese cu grijă și un sistem de design care specifică spațierea până la nivel de pixel. Totuși, textul de corp—lucrul pe care cei mai mulți vizitatori au venit de fapt să îl citească—ajunge adesea la 14px, într-un gri cu contrast redus, setat într-un font optimizat pentru titluri, nu pentru paragrafe.

Aceasta nu este o tiradă despre designeri. Este un memento că lizibilitatea este o disciplină distinctă de designul vizual, iar cele două nu se aliniază întotdeauna. Un font care arată bine într-o secțiune hero poate deveni obositor la lungime de paragraf. O paletă de culori care arată bine în fotografii poate pica testele de contrast. Un layout care funcționează pe un monitor de 27 de inci se poate prăbuși într-o coloană îngustă pe mobil.

Vestea bună: textul lizibil nu cere o diplomă în tipografie. Cere atenție la câteva variabile care au un impact disproporționat.

Dimensiunea fontului: mai mare decât crezi

Cea mai frecventă greșeală de lizibilitate pe web este textul de corp prea mic. Designerii setează adesea textul de corp la 14px sau 15px pentru că „arată curat” la scară desktop, apoi uită că o parte semnificativă a cititorilor se află pe telefoane, adesea în condiții de iluminare mai puțin decât ideale.

O bază practică pentru textul de corp în 2026:

• Desktop: 18px minimum, 20px preferat
• Mobil: 16px minimum, 18px preferat

Aceste valori par mari dacă ești obișnuit cu texte mai mici, dar reflectă modul în care oamenii citesc de fapt pe ecrane. Textul mai mare reduce oboseala ochilor, îmbunătățește înțelegerea și face conținutul accesibil pentru cititorii cu deficiențe ușoare de vedere care nu și-au ajustat setările browserului.

Dacă sistemul tău de design impune text mai mic, testează-l pe un telefon în lumină puternică. Dacă mijești ochii, este prea mic.

Înălțimea liniei: oferă textului spațiu să respire

Înălțimea liniei (leading) este spațiul vertical dintre liniile de text. Prea strâns, iar liniile se contopesc. Prea larg, iar ochiul pierde firul dintre rânduri.

Pentru textul de corp, o înălțime a liniei de 1.5 până la 1.7 funcționează pentru majoritatea fonturilor. Titlurile pot fi mai strânse (1.1 până la 1.3), dar textul de corp are nevoie de spațiu de respirație.

CSS-ul:

body {
  font-size: 18px;
  line-height: 1.6;
}

Aceasta este una dintre cele mai simple îmbunătățiri de lizibilitate. Dacă textul tău de corp stă acum la line-height: 1.2 sau folosește o valoare fixă în pixeli, schimbă-l astăzi.

Lungimea liniei: mai scurtă decât crezi

Lungimea optimă a liniei pentru textul de corp este de 45 până la 75 de caractere pe linie, aproximativ 8 până la 12 cuvinte. Liniile mai lungi de 90 de caractere îngreunează revenirea ochiului la începutul liniei următoare. Liniile mai scurte de 40 de caractere creează o experiență de lectură sacadată, fragmentată.

Majoritatea site-urilor web greșesc aici, lăsând textul să se întindă pe toată lățimea viewportului, mai ales pe desktop. Un monitor cu lățime de 1920px poate afișa peste 150 de caractere pe linie, ceea ce este obositor de citit.

Soluția este un max-width pe containerul de text:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Unitatea ch este subutilizată, dar perfectă pentru asta: se scalează odată cu dimensiunea fontului și corespunde aproximativ lățimii unui caracter.

Contrastul: nu este la fel de simplu ca negru pe alb

WCAG 2.1 specifică un raport minim de contrast de 4.5:1 pentru textul de corp (nivel AA) și 7:1 pentru accesibilitate îmbunătățită (nivel AAA). Majoritatea site-urilor web trec acest test pe hârtie, dar eșuează în practică deoarece folosesc text gri deschis pe fundal alb.

Vinovați frecvenți:

• #666666 pe #FFFFFF (4.54:1, trece la limită)
• #777777 pe #FFFFFF (4.47:1, nu trece)
• Orice nuanță mai deschisă decât #767676 pe alb (nu trece)

Dacă sistemul tău de design specifică „text-secondary” ca gri deschis, testează-l. WebAIM contrast checker este cea mai rapidă metodă de verificare.

Modul întunecat complică și mai mult lucrurile. Textul alb pur pe negru pur creează halation (un efect de strălucire) care este mai greu de citit decât un alb ușor estompat pe gri închis. O abordare mai bună:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Alegerea fontului: fonturile implicite sunt mai bune decât crezi

Fonturile web personalizate sunt omniprezente, dar vin cu compromisuri. Adaugă latență, cresc greutatea paginii și pot bloca randarea dacă nu sunt încărcate cu grijă. Pentru textul de corp, fonturile de sistem sunt adesea alegerea mai bună.

Un stack robust de fonturi de sistem în 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Acesta îți oferă San Francisco pe macOS/iOS, Segoe UI pe Windows și Roboto pe Android—toate fonturi foarte lizibile, proiectate profesionist, care se încarcă instantaneu.

Dacă folosești totuși un font personalizat pentru textul de corp, alege unul conceput pentru lectură de lungă durată, nu pentru display. Evită:

• Greutăți ultra-light sau ultra-bold pentru textul de corp
• Variante condensed sau extended
• Fonturi cu x-height redus (înălțimea literelor mici)

Testează fontul ales la lungime de paragraf înainte să îl adopți.

Tipografie responsivă: scări tipografice fluide

Dimensiunile fixe ale fontului nu se scalează bine între dispozitive. Un font de corp de 20px, confortabil pe desktop, poate părea supradimensionat pe mobil.

Tipografia fluidă folosește clamp() pentru a scala dimensiunea fontului lin între un minim și un maxim:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Aceasta scalează de la 16px pe ecrane mici la 20px pe ecrane mari, cu interpolare lină între ele. Este mai sofisticată decât breakpointurile din media query și se adaptează la orice lățime de viewport.

Pentru o scară tipografică completă (titluri, corp, text mic), instrumente precum Utopia generează scări fluide pe baza constrângerilor tale.

Spațierea paragrafelor și alinierea textului

Două detalii mici care contează:

1. Spațierea paragrafelor: Adaugă spațiu între paragrafe (margin-block-end: 1em) sau folosește un indent pe prima linie (text-indent: 1.5em), dar nu ambele. Majoritatea conținutului web folosește spațiere.

1. Alinierea textului: Alinierea la stânga (sau la dreapta pentru limbile RTL) este aproape întotdeauna mai lizibilă decât textul justificat, care creează spațiere neuniformă între cuvinte dacă despărțirea în silabe nu este activată. Textul de corp aliniat pe centru este greu de citit și ar trebui rezervat pasajelor scurte.

Testarea lizibilității în practică

Lizibilitatea nu este pur obiectivă, dar o poți testa:

• Citește-ți propriul conținut pe telefon în condiții diferite de iluminare
• Rulează un audit de accesibilitate Lighthouse pentru a depista probleme de contrast și dimensiune a fontului (vezi cum să citești un raport Lighthouse fără panică pentru îndrumare)
• Roagă pe cineva de peste 50 de ani să citească o pagină fără să își ajusteze setările
• Verifică analytics pentru rata de respingere pe paginile cu mult text—dacă oamenii pleacă repede, lizibilitatea poate fi un factor

Dacă textul tău este greu de citit, oamenii nu îl vor citi. Este atât de simplu.

Cum arată asta în practică

Un stil lizibil pentru textul de corp în 2026 ar putea arăta astfel:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Acest lucru acoperă dimensiunea fontului, înălțimea liniei, lungimea liniei, contrastul și scalarea responsivă în aproximativ o duzină de linii de CSS. Nu este spectaculos, dar funcționează.

Când să încalci regulile

Aceste recomandări se aplică textului de corp—paragrafele pe care oamenii le citesc pentru informație. Titlurile, legendele, etichetele UI și textele de marketing au constrângeri diferite și pot îndoi aceste reguli.

Dar dacă cineva a venit pe site-ul tău să citească un articol, o pagină de documentație sau o descriere de produs, textul lizibil nu este opțional. Este așteptarea de bază.