Tipografia in web design: Un ghid practic

Tipografia bună e invizibilă. Citești pagina fără să te oprești la cum arată literele. Tipografia proastă e zgomot constant care îți consumă atenția fără să-ți dai seama de ce ești obosit după 5 minute pe site.

Acest articol e un ghid practic despre tipografie pentru web în 2026: cum alegi fonturile, ce scale funcționează, perechi de font care merg împreună, considerații de performanță, și — important pentru piața românească — cum verifici suportul diacriticelor înainte de alegere.

De ce contează tipografia în 2026

Câteva date din proiectele noastre. Schimbarea de la o tipografie generică (Open Sans 16px) la una bine aleasă (Geist Sans 17px cu line-height 1.6) a crescut time-on-page cu 23% în medie pe articole long-form. Bounce rate a scăzut cu 8-12%. Și — surprinzător — conversia pe formulare a urcat cu 5-7% pentru că lecturabilitatea formularelor a fost mai bună.

Tipografia nu e doar estetică. E unul dintre cei mai importanți factori în experiența de citire, care la rândul ei e fundamentul fiecărui site care comunică text.

Tipuri de fonturi: când care

Sans-serif

Fonturi fără serife (Inter, Geist, Manrope, Helvetica, Public Sans, IBM Plex Sans). Modern, neutru, foarte lecturabil pe ecran. Default pentru aproape orice site digital. Funcționează atât pentru body cât și pentru headings.

Recomandări 2026: Geist Sans (de la Vercel, gratuit, foarte modern), Inter (workhorse universal), Manrope (geometric, distinct), Public Sans (US Web Design System, foarte solid pentru admin/dashboard).

Serif

Fonturi cu serife (Lora, Source Serif, Cormorant, Instrument Serif, Playfair Display). Tradițional, formal, autoritate. Mai dificil pe ecrane mici dar excelent pentru long-form content (blog articles, editorial sites).

Recomandări 2026: Instrument Serif (italic spectaculos, perfect pentru headlines), Source Serif (Adobe, foarte lecturabil), Newsreader (Google, modern editorial), EB Garamond (clasic refinat).

Monospace

Fonturi cu spațiere fixă (Geist Mono, JetBrains Mono, IBM Plex Mono, Space Mono, Fira Code). Tehnice, distincte. Folosite pentru cod, dar și ca accent în design (numere, etichete, codes de produs).

Recomandări: Geist Mono, JetBrains Mono, IBM Plex Mono.

Display

Fonturi extreme, pentru headlines mari și branding (Bricolage Grotesque, Migra, Boldonse, fluid variabile cu greutate extremă). Niciodată pentru body. Folosite economic pentru impact.

Considerații pentru piața românească

Suport diacritice

Verifică înainte de alegere că fontul are diacriticele românești complete: ă, â, î, ș, ț (atenție: corect cu virgulă jos, nu cu cedillă — ș nu ş, ț nu ţ).

Multe fonturi „free" de pe Google Fonts au diacritice corecte. Multe alte fonturi premium nu. Testează literele cu „șapte șuncă țară încălzește" sau alt text românesc înainte să cumperi licență.

Fonturi cu suport excelent pentru română

• Geist Sans și Geist Mono — diacritice corecte, design modern
• Inter — universally good
• Manrope — verificat
• Public Sans — suport perfect
• Instrument Serif — diacritice frumos desenate
• Source Serif Pro — Adobe quality
• Plus Jakarta Sans — popular în 2024-2026, suport bun
• DM Sans — Google, foarte răspândit

Fonturi de evitat pentru română

Multe fonturi sistem de pe Windows și Mac au diacritice șterse sau incorecte. Times New Roman pe Mac arată jenant pentru română. Comic Sans (oricum) și majoritatea fonturilor decorative gratuite de la dafont.com au probleme.

Perechi de fonturi care funcționează

Convenția: 1 font pentru display (headings), 1 pentru body, opțional 1 pentru accent (mono sau italic).

Perechea „modernist editorial"

• Display: Instrument Serif (italic)
• Body: Geist Sans
• Mono: Geist Mono

Folosită pentru editorial site-uri, blog-uri premium, brand-uri creative.

Perechea „startup tech"

• Display: Geist Sans (weight 400-500)
• Body: Geist Sans (weight 300-400)
• Mono: Geist Mono

Singular font family pentru consistență totală. Funcționează pentru SaaS, dev tools, startup-uri tech.

Perechea „corporate clasic"

• Display: Newsreader Bold
• Body: Inter
• Mono: IBM Plex Mono

Mix clasic-modern. Funcționează pentru consulting, finance, legal.

Perechea „bold marketing"

• Display: Bricolage Grotesque ExtraBold
• Body: Plus Jakarta Sans
• Accent: Geist Mono

Funcționează pentru agenții, brand-uri creative, e-commerce premium.

Scale tipografice care funcționează

O scală tipografică e o secvență matematică de dimensiuni font (ex: 12, 14, 16, 18, 24, 32, 48). Folosirea unui număr fix de dimensiuni (6-8 maxim) creează consistență vizuală.

Scala recomandată pentru web 2026

• Text mic (caption, footer): 12-13px
• Body small (helper text, nav secondary): 14px
• Body default: 16-17px (16 minim accessibility)
• Body large (lead paragraph): 18-20px
• H4: 20-22px
• H3: 24-28px
• H2: 32-40px
• H1: 48-64px (desktop), 36-44px (mobile)
• Display large (hero): 72-120px (doar pentru landing, accent)

Ratio recomandat: 1.25 sau 1.333 între nivele consecutive. Asta produce scala armonioasă fără sărituri brute.

Line-height

• Display și H1: 1.0-1.1
• H2, H3: 1.2-1.3
• Body: 1.5-1.7 (1.6 default pentru articole long-form)
• Caption: 1.4-1.5

Letter-spacing

• Display mare: -0.02em până la -0.04em (tighter pentru impact)
• Body: 0 (default browser)
• Caps small (uppercase 9-11px): 0.05-0.15em (extra spacing pentru lecturabilitate)

Performance: fonturi self-hosted vs Google Fonts

De ce self-host în 2026

În 2022 Curtea Germana a stabilit că Google Fonts servite direct de la fonts.gstatic.com încalcă GDPR (transmit IP-ul utilizatorului către Google). De atunci, recomandarea pentru site-uri targetând EU e self-hosting.

În plus: performance. Self-hosted = un single round-trip la propriul server, cu HTTP/2 push pe header. Google Fonts = round-trip la fonts.googleapis.com pentru CSS, apoi round-trip la fonts.gstatic.com pentru fișier woff2. Cu DNS lookup adițional. Time-to-first-byte poate fi cu 200-400ms mai prost.

Cum self-hostezi corect

• Descarcă woff2 (singurul format relevant 2026; woff și ttf sunt legacy)
• Subset font: doar caracterele relevante (latin extended pentru română, evită cyrillic dacă nu serești piețe cu acel scripts)
• Servește cu Cache-Control: public, max-age=31536000, immutable
• Preload în <head> cu <link rel="preload" as="font" type="font/woff2" crossorigin>
• CSS font-display: swap pentru a evita FOIT (flash of invisible text)
• Max 2 family-uri, max 4 weights total. Mai mult e bloat.

Variable fonts

Standard 2026 pentru fonturi modern. Un singur fișier woff2 conține toate weight-urile (100-900) și optional italic. Reducere semnificativă în transfer (de exemplu Inter Variable e 50KB pentru toate weights vs 4×35KB = 140KB pentru 4 weights statice).

Tipografie responsive

În 2026, fluid typography cu CSS clamp() e standard:

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); }

Asta scalează lin între 2.5rem (40px) pe mobile și 5rem (80px) pe desktop foarte mare, fără break-points stridente.

Pentru body, păstrează 16-17px fix pe mobile și escaladează la 17-19px pe desktop. Body fluid e contraproductiv (devine prea mare pe wide screens).

Greșeli tipografice frecvente

1. Prea multe weights — un site care folosește Inter 300, 400, 500, 600, 700, 800 încarcă 6× cantitatea de font necesară. Pick 2-3 max.
2. Body text sub 16px — viola WCAG, oboseste vederea, semn de design amator.
3. Justified text pe coloane înguste — produce „rivers" de spațiu. Folosește text-align: left pentru body.
4. Line-height prea mic pe body — sub 1.5 face block-uri de text ilizibile. 1.6-1.7 e sweet spot.
5. Lipsa scale-ului responsive — H1 80px arată ridicol pe mobile. Folosește clamp() sau media queries explicite.
6. Italic pentru lung paragrafe — italic e accent, nu format de body. Evită blocuri lungi italic.
7. All caps în paragrafe — reduce viteza de citire cu 15-20%. Folosit doar pentru etichete scurte.

Concluzie

Tipografia bună e o decizie de design care plătește pe termen lung. Investiția suplimentară de 2-4 ore în alegerea fonturilor potrivite, scalei tipografice, și performance setup-ului produce site-uri care arată profesional și se citesc plăcut peste ani.

La DCL alegem tipografia ca primă decizie de design după paletă, înainte de layout. Site-urile noastre custom folosesc fonturi self-hosted, variable fonts unde posibil, scale tipografice riguroase, și suport perfect pentru diacritice românești. Dacă vrei un site cu tipografie făcută serios, ne contactezi.