Capitol gratuit

Tipografie - arta fonturilor

Tipografia reprezintă peste 90% din designul web și editorial. Alegerea fontului potrivit, a dimensiunilor, a spațierii și a ierarhiei vizuale determină da...

Introducere

Tipografia reprezintă peste 90% din designul web și editorial. Alegerea fontului potrivit, a dimensiunilor, a spațierii și a ierarhiei vizuale determină dacă un text este lizibil, atractiv și profesional.

Clasificarea fonturilor

Categorie Caracteristici Exemple Utilizare
Serif Cu „picioare" la capetele literelor Times New Roman, Georgia, Playfair Display Editorial, print, lux, tradițional
Sans-serif Fără „picioare", linii curate Helvetica, Inter, Roboto, Open Sans Web, tech, modern, corporate
Monospace Toate caracterele au aceeași lățime JetBrains Mono, Fira Code, Courier Cod, terminal, tehnic
Display Decorative, cu personalitate puternică Lobster, Pacifico, Impact Titluri, postere, accente
Handwriting Imită scrisul de mână Dancing Script, Caveat Invitații, personal, creativ

Ierarhia tipografică

Ierarhia tipografică ghidează ochiul cititorului prin conținut, indicând ce este important și în ce ordine trebuie citit:

Heading 1 (H1) - Titlul principal. Cel mai mare, cel mai vizibil. Un singur H1 pe pagină. Dimensiune: 32-48px
Heading 2 (H2) - Subtitluri de secțiune. Împart conținutul în blocuri logice. Dimensiune: 24-32px
Heading 3 (H3) - Sub-subtitluri. Detalii în cadrul secțiunilor. Dimensiune: 20-24px
Body text - Textul principal. Ușor de citit, confortabil. Dimensiune: 16-18px (web), 10-12pt (print)
Small text / Caption - Note de subsol, metadate, etichete. Dimensiune: 12-14px

Reguli esențiale de tipografie

Alegerea fontului

✓ Practici corecte
Maxim 2-3 fonturi per proiect
Un font pentru titluri, altul pentru text
Fonturi cu diacritice complete (ă, î, â, ș, ț)
Verificați licența fontului
✗ Greșeli comune
5+ fonturi într-un singur design
Fonturi decorative pentru texte lungi
Comic Sans în documente profesionale
Fonturi fără caractere românești

Spațiere

  • Line-height (leading) - Spațiul între rânduri. Ideal: 1.5-1.7 pentru text, 1.1-1.3 pentru titluri
  • Letter-spacing (tracking) - Spațiul uniform între litere. Ușor crescut pentru titluri uppercase
  • Kerning - Ajustarea spațiului între perechi specifice de litere (AV, To, We)
  • Paragraph spacing - Spațiul între paragrafe. Folosiți spațiere, nu rânduri goale

Lățimea liniei (measure)

Lățime ideală: 45-75 caractere per linie (inclusiv spații)

Liniile prea lungi obosesc ochiul care trebuie să parcurgă o distanță mare. Liniile prea scurte creează prea multe întreruperi. Zona optimă este de 65 de caractere per linie.

Combinații de fonturi

Combinarea fonturilor este o artă. Regula de bază: alegeți fonturi care contrastează dar nu se bat cap în cap.

Combinații testate și eficiente

  • Playfair Display + Inter - Elegant, modern (editorial, lux)
  • Montserrat + Open Sans - Profesional, curat (corporate, SaaS)
  • Poppins + Roboto - Prietenos, accesibil (startup, app)
  • Lora + Source Sans Pro - Cald, lizibil (blog, educație)
  • Oswald + Lato - Bold, direct (sport, media, news)

Surse de fonturi

  • Google Fonts - Gratuite, open-source, ușor de integrat pe web
  • Adobe Fonts - Incluse în abonamentul Creative Cloud, calitate premium
  • Font Squirrel - Fonturi gratuite cu licență comercială
  • MyFonts / Fontspring - Fonturi premium cu licențe comerciale
💡 Sfat: Fontul Inter (folosit și în acest curs) este unul dintre cele mai versatile fonturi sans-serif gratuite. A fost creat special pentru ecrane și suportă complet limba română.

Continuați cu restul cursului

Acesta este capitolul 3 din cele 20 ale cursului, cu 6 lecții din 122. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 90 €