Lecția 04 · Tipografia¶

De ce tipografia e 90% din design¶

Deschide orice afiș, orice site, orice ambalaj. Elimină mental imaginile. Ce rămâne? Text. Majoritatea deciziilor tale de design vor fi, de fapt, decizii despre text: cât de mare, ce font, cât de departe de altceva.

Un design cu tipografie bună și fără imagini arată profesionist. Un design cu imagini excelente și tipografie proastă arată amatoricesc. Ordinea aceasta nu se inversează.

Anatomia literei¶

      ┌─────────────────────────  linia ascendentelor
      │   h        ┌──           
  ┌───┼───────────┼──────────────  linia înălțimii x
  │   │  x  o  n  │
  └───┴───────────┴──────────────  linia de bază (baseline)
          │
          └──────────────────────  linia descendentelor (g, p, y)

Familiile de fonturi¶

Serif¶

Au „picioare” — mici terminații la capetele liniilor. Georgia, Times New Roman, Playfair Display, Merriweather.

• Asociere: tradiție, autoritate, editorial, seriozitate.
• Bun la: text lung tipărit, titluri elegante, cărți, diplome.
• Slab la: ecrane mici, mărimi sub 14 px, interfețe.

Sans-serif¶

Fără picioare. Inter, Helvetica, Roboto, Open Sans, Montserrat.

• Asociere: modern, curat, neutru, tehnologic.
• Bun la: ecrane, interfețe, titluri, text scurt, orice.
• Slab la: nimic major — de asta e alegerea implicită.

Monospace¶

Toate literele au aceeași lățime. JetBrains Mono, Fira Code, Courier.

• Asociere: cod, date, tehnic, mașină.
• Bun la: cod, tabele cu numere, etichete tehnice, ceasuri.
• Slab la: text lung — se citește greu.

Display / decorative¶

Fonturi cu personalitate puternică, desenate pentru dimensiuni mari. Lobster, Bebas Neue, Bangers.

• Asociere: depinde complet de font.
• Bun la: doar titluri foarte mari, logo-uri, afișe.
• Slab la: absolut orice altceva.

Greutate, stil, corp¶

Greutatea (weight)¶

Stilul¶

Italic se folosește pentru: titluri de cărți și lucrări, cuvinte în altă limbă, accent subtil. Nu se folosește pentru paragrafe întregi — obosește.

Corpul (font size)¶

O scară tipografică este un set de mărimi cu un raport constant între ele. Nu alegi mărimile la întâmplare.

Scara 1.25 (Major Third) — potrivită pentru interfețe:

Scara 1.5 — potrivită pentru afișe, unde vrei contrast dramatic:

Spațiere¶

Interlinia (line height)¶

Distanța dintre liniile de bază a două rânduri consecutive.

Spațierea literelor (letter spacing / tracking)¶

Lungimea rândului (measure)¶

45–75 de caractere pe rând, ideal ~66. Include spațiile.

• Prea scurt (sub 45): ochiul sare prea des la rândul următor, ritmul se rupe.
• Prea lung (peste 75): la capăt de rând, ochiul nu mai găsește începutul rândului următor.

Practic, într-un afiș A4, o coloană de text nu ar trebui să depășească ~12 cm lățime la corp 12 pt.

Cum alegi o pereche de fonturi¶

Regula: contrast, nu conflict¶

Două fonturi trebuie să fie clar diferite. Două sans-serif asemănătoare (Helvetica + Arial) arată ca o greșeală, nu ca o alegere.

Perechi care funcționează garantat¶

Google Fonts în Figma¶

1. Figma are deja toate fonturile Google disponibile în versiunea web. Le cauți direct în lista de fonturi.
2. Pentru aplicația desktop, ai nevoie de Figma Font Helper (se instalează o dată) sau instalezi fontul în sistem.
3. Pentru a folosi fontul pe un site: fonts.google.com → alegi stilurile → copiezi codul <link> în <head>.

Stiluri de text în Figma¶

Ca la culori, salvezi combinațiile ca stiluri reutilizabile:

1. Selectezi un text formatat corect.
2. În panoul din dreapta, la secțiunea Text, apeși pe cele patru puncte → +.
3. Îi dai un nume după rol: heading/h1, heading/h2, body/base, body/small, label/caps.

Când schimbi stilul, tot textul care îl folosește se actualizează. Într-un afiș cu 20 de texte, asta e diferența dintre 2 secunde și 10 minute.

Erori frecvente¶

Exerciții¶

Exercițiu 1 — Aceeași frază, patru familii¶

Scrie fraza „Cercul de informatică primește membri noi” de patru ori, într-un frame de 800 × 600 px, la 32 px, folosind un serif, un sans-serif, un monospace și un display. Notează sub fiecare ce ton transmite.

Exercițiu 2 — Repară un paragraf¶

Într-un frame de 600 × 400 px, pune un paragraf de ~60 de cuvinte cu setările implicite Figma (16 px, interlinie Auto, lățime 580 px, centrat). Apoi corectează-l.

Exercițiu 3 — Scară tipografică¶

Construiește o scară cu raportul 1.25 pornind de la 16 px, pe 6 trepte, și aplic-o pe o pagină cu: titlu, subtitlu, două titluri de secțiune, text curent și o notă de subsol.

Mini-proiect: afiș tipografic¶

Construiește un afiș A3 pentru un eveniment școlar folosind exclusiv text — fără imagini, fără pictograme, maximum o formă geometrică simplă. Un singur font, maximum 3 greutăți.

Rezumat¶

• Înălțimea x determină lizibilitatea reală, nu corpul declarat.
• Patru familii: serif (tradiție), sans-serif (implicit), monospace (tehnic), display (o singură dată, mare).
• Maximum 2 fonturi și 3 greutăți pe proiect.
• Mărimile vin dintr-o scară (1.25 pentru interfețe, 1.5 pentru afișe), nu la întâmplare.
• Interlinie: 1.5–1.6 pentru text curent, 1.1–1.2 pentru titluri mari.
• Majusculele cer +5% până la +15% tracking.
• Lungime de rând: 45–75 de caractere, ideal 66.
• Aliniere la stânga pentru orice paragraf de peste 3 rânduri.
• Salvează stilurile de text în Figma, numite după rol, nu după aspect.

Pasul următor: → Lecția 05: Compoziție și grilă