Tipografia este 90% din ceea ce vede un vizitator pe un site, dar primește 5% din atenția celui care îl construiește. Un site cu o paletă simplă și o tipografie curată arată profesionist. Invers, nu.
Câte fonturi folosești
Două. Unul pentru titluri, unul pentru text. Sau chiar unul singur, cu grosimi diferite (400 pentru text, 600–700 pentru titluri) — soluția cea mai sigură și cea mai rapidă la încărcare. Trei sau mai multe fonturi fac site-ul să pară o colecție de fragmente.
Ce contează la un font de text
- Lizibilitate la dimensiuni mici — literele nu trebuie să se confunde între ele (I, l, 1).
- x-height generos — literele mici înalte se citesc mai ușor pe ecran.
- Suport pentru diacritice românești — obligatoriu: ă, â, î, ș, ț. Multe fonturi „frumoase" au ș și ț desenate greșit, cu sedilă în loc de virguliță, sau nu le au deloc.
- Mai multe grosimi — ai nevoie de cel puțin 400 și 600/700.
Verifică diacriticele scriind, în previzualizarea fontului, o propoziție de test: „Înțelegem că șansa ta contează în acțiune."
Combinații care funcționează
- Inter (titluri și text) — neutru, modern, excelent pe ecran, diacritice corecte.
- Source Sans 3 sau Open Sans pentru text + Merriweather pentru titluri — mix serios, potrivit pentru servicii profesionale.
- Poppins pentru titluri + Inter pentru text — prietenos, potrivit pentru retail, HoReCa, servicii pentru persoane fizice.
- Lora (titluri) + Source Sans (text) — cald, bun pentru cabinete, avocatură, arhitectură.
Toate sunt gratuite, disponibile pentru web și au diacritice românești complete.
Dimensiuni și spațiere: scara practică
- Text de bază: 16–18px (nu mai puțin de 16px pe mobil).
- Înălțime de rând: 1,6–1,8 pentru paragrafe; 1,2–1,3 pentru titluri.
- Lungime de rând: 60–80 de caractere. Rândurile late pe tot ecranul obosesc și fac cititorul să sară rânduri.
- Titluri: H1 la 32–40px pe mobil, 40–56px pe desktop; H2 aproximativ 70% din H1.
- Spațiu între paragrafe: minimum 1em — mai important pentru citit decât fontul ales.
Fonturile și viteza site-ului
Fiecare font și fiecare grosime se descarcă separat. Cinci grosimi din două familii pot însemna 300–500 KB doar pentru text. Reguli practice:
- încarcă doar grosimile pe care le folosești;
- folosește formatul
woff2; - adaugă
font-display: swap, ca textul să apară imediat cu un font de sistem și să fie înlocuit după încărcare; - ia în calcul fonturile de sistem (
system-ui) — zero descărcare, viteză maximă; - dacă folosești Google Fonts, servește fonturile de pe propriul domeniu când poți: mai rapid și mai curat din perspectiva datelor personale.
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Impactul pe viteză nu e teoretic — vezi ghidul practic de viteză.
Greșeli frecvente
- Text gri deschis pe alb, „pentru estetică" — imposibil de citit pe telefon în lumină puternică.
- Titluri în MAJUSCULE pe paragrafe întregi: se citesc cu 20–30% mai lent.
- Font decorativ pentru textul de bază.
- Diacritice lipsă — apar înlocuiri urâte, cu litere din alt font.
- Aceeași dimensiune pentru tot — fără ierarhie, pagina devine un bloc de text pe care nimeni nu îl scanează.
Testul telefonului la lumină: citește un paragraf de pe site afară, la soare. Dacă mărești ecranul cu degetele, ai o problemă de tipografie, nu de conținut.
Concluzie
Un font bun pentru text, la 16–18px, cu rânduri de 60–80 de caractere și diacritice corecte, plus un al doilea font (sau doar o grosime mai mare) pentru titluri. Restul e disciplină. Combină cu o paletă de culori coerentă și ai deja fundația unui design curat.
