Text & Tipografie în CSS3: Ghid Tehnic și Fonturi Web

Umbre de text și efecte vizuale de strălucire

Proprietatea text-shadow permite aplicarea uneia sau mai multor umbre direct pe literele unui titlu sau paragraf. Sintaxa primește offset orizontal, offset vertical, rază de blur și culoarea umbrei (ex: text-shadow: 2px 2px 4px rgba(0,0,0,0.3)).

Este utilizată frecvent pentru garantarea lizibilității textului plasat deasupra imaginilor de fundal aglomerate sau pentru crearea de efecte stilistice precum litere în relief sau efecte de neon.

/* Efect de neon cu umbre duble */
.titlu-neon {
  color: #fff;
  text-shadow:
    0 0 5px #e8b339,
    0 0 20px #d6472e;
}

/* Umbra discreta pentru lizibilitate */
.subtitlu-umbra {
  text-shadow: 2px 2px 0 #e3d8bb;
}

Includerea fonturilor personalizate în site-uri web

Regula @font-face permite încărcarea de fișiere de fonturi (în formate moderne optimizate precum WOFF2 sau WOFF) direct de pe propriul server web sau prin servicii CDN precum Google Fonts, oferind identitate vizuală unică brandului tău.

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'CustomFont', sans-serif;
}

Prevenirea ruperii layout-ului din cauza cuvintelor lungi

Cuvintele extrem de lungi, codurile hash sau adresele URL pot depăși lățimea containerului lor pe ecrane mici de mobil. Cu overflow-wrap: break-word, cuvântul este rupt pe mai multe linii doar atunci când depășește fizic cadrul.

.link-lung {
  overflow-wrap: break-word;
  word-break: break-word;
}

Conturul literelor pentru titluri de impact

Proprietatea -webkit-text-stroke adaugă un contur colorat în jurul fiecărui caracter. Combinată cu o culoare de text transparentă (color: transparent), creează titluri decorative "hollow" extrem de populare în designul modern.

.titlu-conturat {
  color: transparent;
  -webkit-text-stroke: 2px #d6472e;
}

Despărțire automată în silabe la capăt de rând

Proprietatea hyphens: auto instruiește browserul să despartă cuvintele în silabe la capătul fiecărui rând folosind linia de cratimă (în funcție de limba declarată în atributul HTML lang="ro").

p.articol-editorial {
  text-align: justify;
  hyphens: auto;
}

Trunchierea textului pe un număr fix de rânduri

Tăierea blocurilor lungi de text după un număr fix de linii (ex: 2 sau 3 rânduri) și adăugarea automată a punctelor de suspensie (...) este rezolvată nativ prin -webkit-line-clamp.

.rezumat-card {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Grosime și lățime flexibilă dintr-un singur fișier

Fonturile variabile (Variable Fonts) permit ajustarea continuă a grosimii (weight), înclinării (slant) sau lățimii (width) dintr-o singură resursă de font descărcată de pe server.

.titlu-variabil {
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: 'wght' 650, 'wdth' 110;
}

Distanțarea și stilizarea liniilor de subliniere

Proprietatea text-underline-offset controlează spațiul exact dintre text și linia sa de subliniere, iar text-decoration-color și text-decoration-thickness permit stilizarea liniilor fără hack-uri de border-bottom.

a.link-stilizat {
  text-decoration: underline;
  text-decoration-color: #e8b339;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

Orientarea textului pe verticală

Proprietatea writing-mode schimba direcția de curgere a textului: vertical-rl (de la dreapta la stânga) sau vertical-lr (de la stânga la dreapta), utilă pentru etichete de margine sau antete de tabel.

.eticheta-verticala {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

Ligaturi OpenType și cifre cu lățime fixă (tnum)

Permite activarea caracteristicilor avansate OpenType din fonturi: ligaturi speciale ("liga"), cifre tabelare cu lățime fixă pentru alinierea numerelor în tabele ("tnum") sau fracții formate automat.

.preturi-tabel {
  font-feature-settings: "tnum" 1, "zero" 1;
}

Letrine editoriale și prima linie stilizată

Pseudo-elementul ::first-letter stilizează prima literă a unui paragraf (pentru efectul editorial clasic de letrină), în timp ce ::first-line modifică automat primul rând de text din paragraf.

p.articol::first-letter {
  font-size: 2.8em;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  color: #d6472e;
}

Sinteza automată a stilurilor fontului

Proprietatea font-synthesis decide dacă browserul poate sintetiza stiluri precum italic sau bold când fontul principal nu le are disponibile, ajutând la consistența tipografiei.

.titlu {
  font-synthesis-weight: auto;
  font-synthesis-style: auto;
}

Ligaturi tipografice pentru un aspect editorial

Cu font-variant-ligatures poți activa ligaturi precum fi, fl sau ff pentru un aspect mai elegant și mai profesionist al textului.

.editorial {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

Împărțirea cuvintelor lungi în blocuri responsiv

word-break este util pentru URL-uri lungi, e-mailuri și date generate automat, pentru a evita overflow-ul în layout-uri mobile și liste complexe.

.url-long {
  word-break: break-word;
}

Împărțirea silabelor și text în limbi europene

Proprietatea hyphens permite despărțirea cuvintelor la final de rând, ceea ce funcționează excelent pentru text lung într-o coloană îngustă sau într-un layout cu două coloane.

.text-lung {
  hyphens: auto;
}

Împărțirea titlurilor pe linii echilibrate

text-wrap: balance ajusteză numărul de cuvinte dintr-un titlu sau text scurt astfel încât liniile să pară echilibrate și elegante pe mobile și desktop.

.title {
  text-wrap: balance;
}

Trunchierea elegantă a textului în blocuri fixe

text-overflow: ellipsis este ideal pentru categoriile scurte, nume de produse și liste de link-uri din componente compacte.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Suprapunerea liniilor de text peste spații și caractere

Proprietatea text-decoration-skip controlează dacă sublinierea sau tăierea textului trece prin spații, caractere speciale sau litere mari.

a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

Numerotarea și cifrele pentru tipografie precisă

font-variant-numeric ajută la stilizarea numerelor, din ambii factori: cifre tabulare, fracții, numere ordinale și cifre cu zero redus.

.prices {
  font-variant-numeric: tabular-nums slashed-zero;
}

Marcaje de accent pentru text oriental

Proprietatea text-emphasis este utilă pentru texturi tipografice orientale, cu puncte sau simboluri de accent deasupra literelor și cu rol SEO de a sublinia text roșu.

.kanji {
  text-emphasis: circle #d6472e;
}

Controlul lățimii tab-urilor în preformatare

tab-size reglează spațiul creat de tab-ul din blocurile <pre> și <code>, important pentru prezentarea de coduri și snippets-uri.

pre {
  tab-size: 2;
}

if (a) {
	return true;
}

Permite selectarea textului doar unde e nevoie

user-select stabilește dacă utilizatorul poate selecta textul. Este util în interfețe cu butoane, etichete, controale și module de UI unde unele zone trebuie să fie clicabile, dar nu selectabile. În exemplul de mai jos, textul din stânga poate fi marcat, iar textul din dreapta este intenționat ne-selectabil.

.selectable {
  user-select: text;
}

.non-selectable {
  user-select: none;
}

Controlul distanței dintre litere

Proprietatea letter-spacing schimbă spațiul dintre caractere și poate fi folosită pentru titluri, etichete, logouri sau pentru a îmbunătăți lectura pe text scurt.

.label {
  letter-spacing: .12em;
  text-transform: uppercase;
}

Transformarea textului fără a schimba HTML

Cu text-transform poți converti textul în majuscule, minuscule sau mod titlu de către CSS, fără a afecta semantica HTML.

.title {
  text-transform: capitalize;
}

.menu-item {
  text-transform: uppercase;
}