De evitat, 2 fonturi sans cu greutate similară, 2 serif-uri, orice font decorativ care se pretinde a fi font de brand.
Lecția 2, Scara tipografică
Alege un raport de scară (1.25, 1.333, 1.414, 1.5) și folosește-l cu religiozitate. Folosește type-scale.com pentru a-l genera. Rămâi la maximum 5 dimensiuni.
Token
px sugerați
Display (doar hero)
80 până la 120
H1
48 până la 72
H2
32 până la 40
Body
16 până la 18
Small / caption
12 până la 14
Pe mobil, micșorează tot cu 25 până la 35%. Display devine 56 până la 80. H1 devine 32 până la 48.
Lecția 3, Letter-spacing, line-height, detaliile mici
Pentru display, strânge letter-spacing la -0.02em până la -0.04em. Pare sigur pe sine, premium.
Pentru body, implicit line-height 1.5 până la 1.65. Se citește ușor.
Line-height pentru display, 0.95 până la 1.05. Strâns.
Etichete mici cu majuscule (text eyebrow), letter-spacing 0.1 până la 0.2em, ajută lizibilitatea.
Evită body cu italic pentru paragrafe, lizibilitate scăzută.
Lecția 4, Fonturile pe care trebuie să le știi în 2026
Un singur fișier, toate greutățile. Payload mai mic.
Interpolare fluidă între greutăți = posibilități de animație.
Inter, Geist, Space Grotesk, Inter Tight, Manrope, toate disponibile ca variabile.
Găzduiește singur fișierul .woff2, nu folosi CDN-ul Google Fonts din motive de performanță (cumulative layout shift).
📜 Prompt Playbook, Alege un sistem de fonturi pornind de la un brief
Cel mai bun pentru. Ziua 1 a oricărui proiect •Cel mai bun AI. Claude Opus 4.6
Construiesc un site pentru <industrie>, publicul țintă <descriere>, vibe-ul brandului <3 cuvinte>. Recomandă-mi, 1) un font de display, 2) un font de body (obligatoriu variabil), 3) un font mono (opțional), 4) raportul scării tipografice (ex. 1.333), 5) cele 5 dimensiuni în px pentru desktop și mobil, 6) regulile de letter-spacing pentru display vs body. Mergi implicit pe Google Fonts gratuite, dacă brief-ul nu strigă premium. Justifică fiecare alegere într-o singură propoziție.
QUEST BRONZ+150 XP
🔠Construiește o fișă de token-uri pentru sistemul de fonturi
Obiectiv. Blochează-ți setările implicite pentru totdeauna.
Pași
Alege-ți asocierea implicită (1 display + 1 body)
Generează o scară tipografică pe type-scale.com
Construiește o fișă de token-uri în Notion sau Figma cu toate dimensiunile, greutățile, line-height-urile, letter-spacing-urile.
Folosește-o în următoarele 3 proiecte.
Gata când
☐ Fișa de token-uri e salvată
☐ Folosită în 3 proiecte
QUEST ARGINT+300 XP
📰Recreează 5 secțiuni hero premiate
Obiectiv. Exersează tipografia sub presiune.
Pași
Alege 5 secțiuni hero din biblioteca Awwwards SOTD.
Recreează fiecare în HTML/CSS în 30 de minute.
Potrivește fontul, dimensiunea, letter-spacing-ul, line-height-ul cât mai fidel posibil.
Salvează-le ca o colecție Codepen.
Gata când
☐ 5 recreări gata
QUEST AUR+500 XP
🏆Lansează un proiect cu tipografie de nivel editorial
Obiectiv. Trimite-l pe Awwwards, cu fontul ca element central.
Pași
Alege un proiect real (al tău sau al unui client).
Folosește doar tipografia pentru a duce designul (imagini minime, culoare minimă).