font-size (rem, em, px, clamp) în CSS

font-size: 16px;          /* pixeli ficși */
font-size: 1.125rem;       /* 18px relativ la rădăcină (recomandat) */
font-size: 1.5em;          /* relativ la părintele direct */
font-size: clamp(1.5rem, 4vw, 3rem); /* scalare fluidă pe ecran */

Ce face font-size (rem, em, px, clamp)

Proprietatea font-size definește mărimea literelor.

De ce folosim rem în loc de px? Unitatea rem (root em) este relativă la mărimea de bază din setările browserului (implicit 16px). Dacă o persoană cu probleme de vedere își setează fontul mai mare în Windows sau telefon, textele în rem se vor mări automat, păstrând accesibilitatea.

Funcția modernă clamp(minim, preferat, maxim) creează o tipografie fluidă: fontul crește lin odată cu lățimea ecranului (vw), fără a deveni vreodată prea mic sau exagerat de mare.

Valori uzuale

Valoare	Descriere
rem	Relativ la dimensiunea fontului din (1rem = de obicei 16px).
em	Relativ la font-size-ul elementului părinte.
px	Valoare absolută fixă în pixeli de ecran.
clamp()	Limitează o valoare fluidă între un prag minim și unul maxim.

Exemple

Exemplul 1: Tipografie responsivă cu rem și titlu fluid cu clamp

Titlul se micșorează automat pe mobil și crește pe ecrane mari de birou.

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}
p {
  font-size: 1.125rem; /* ~18px */
}

Efect vizual în browser

Titlul are cel puțin 32px pe telefon și crește până la 56px pe ecran mare, fără să necesite media queries suplimentare.

Greșeli frecvente

• Folosirea exclusivă a pixelilor (px) pentru corpul textului, ceea ce împiedică redimensionarea conform preferințelor din browserul utilizatorului.

Comenzi înrudite

• font-family: Stabilește familia de fonturi folosită pentru afișarea textului, cu variante de rezervă (fallback).
• line-height: Stabilește distanța verticală dintre rândurile de text dintr-un paragraf, asigurând o citire confortabilă.
• font-weight: Stabilește grosimea caracterelor de text (de la subțire la ultra-îngroșat).