CodeKitHubCe este acest instrument?
Combinarea fonturilor înseamnă alegerea a două (uneori trei) fonturi folosite împreună pe o pagină — de obicei unul pentru titluri și unul pentru textul principal — astfel încât pagina să aibă o ierarhie vizuală clară, fără să pară nepotrivită sau monotonă.
Fiecare combinație de mai jos afișează un exemplu randat live: fontul pentru titlu deasupra, fontul pentru text dedesubt, folosind fișierele reale Google Fonts, astfel încât ceea ce vezi este exact ce vei obține pe site.
Fiecare combinație vine cu o etichetă `<link>` Google Fonts gata de utilizare și un fragment CSS corespunzător cu declarații `font-family` pentru titluri și text — copiază-le pe amândouă și ai terminat.
De ce să-l folosești?
- 28 de combinații alese manual, nu o listă generată automat — fiecare a fost aleasă pentru că cele două fonturi se completează cu adevărat.
- Previzualizare live: fiecare combinație este afișată cu fonturile reale încărcate din Google Fonts, nu o imagine statică sau o presupunere după numele fontului.
- Filtrare după stil — Modern, Elegant, Îndrăzneț, Minimalist, Clasic — pentru a găsi rapid atmosfera potrivită proiectului tău.
- Copiere cu un singur clic atât pentru eticheta `<link>` de încorporare, cât și pentru regulile CSS `font-family`.
- Gratuit, funcționează direct în browser, fără cont sau autentificare.
Cum se folosește
- Opțional, alege un filtru de stil (Modern, Elegant, Îndrăzneț, Minimalist, Clasic) pentru a restrânge lista, sau lasă selectat „Toate” pentru a răsfoi întreaga colecție.
- Parcurge cardurile cu previzualizare live — rândul de sus arată fontul pentru titlu, rândul de dedesubt arată fontul pentru text.
- Deschide combinația care îți place și dă clic pentru a extinde secțiunea cu codul de încorporare.
- Copiază eticheta `<link>` în secțiunea `<head>` a paginii HTML și copiază fragmentul CSS în foaia de stiluri pentru a aplica fonturile titlurilor și textului.
Exemplu
Intrare
Blog elegantRezultat
Playfair Display (titluri) + Source Sans Pro (text)Filtrarea după „Elegant” scoate în evidență titluri serif cu contrast puternic, combinate cu un text sans-serif curat și ușor de citit — o combinație obișnuită pentru layout-uri editoriale și de blog.
Principiile unei combinări reușite de fonturi
- Contrastul în locul asemănării: două fonturi aproape identice (de exemplu, două sans-serif geometrice similare) tind să pară mai degrabă o greșeală decât o alegere deliberată. Combină un font serif cu unul sans-serif, sau un font display gros cu unul mai subțire pentru text, astfel încât diferența să pară intenționată.
- Potrivește înălțimea literelor mici (x-height) și proporțiile: fonturile ale căror litere mici au înălțimi vizuale similare tind să pară că aparțin aceleiași pagini, chiar și atunci când stilurile diferă — o nepotrivire a x-height-ului este unul dintre cele mai frecvente motive pentru care o combinație pare „ciudată”.
- Limitează-te la două familii de fonturi (uneori trei): una pentru titluri, una pentru text și, cel mult, o a treia pentru accente precum butoane sau etichete. Mai mult de atât și pagina începe să pară nechibzuită.
- Ia în calcul atmosfera, nu doar forma: un font sans rotunjit, prietenos, combinat cu un serif formal, transmite semnale contradictorii chiar dacă formele literelor funcționează tehnic împreună — alege fonturi care se potrivesc atât ca ton, cât și ca structură.
- Testează la dimensiuni reale: o combinație care arată bine într-o previzualizare mare poate pierde contrastul la dimensiunea textului obișnuit, sau un font display poate deveni ilizibil la dimensiuni mici — verifică întotdeauna ambele extreme.
Alegerea unei combinații în funcție de utilizare
Paginile de destinație și site-urile de marketing beneficiază de obicei de filtrele „Îndrăzneț” sau „Modern” — un font de titlu puternic, cu contrast ridicat, atrage atenția în partea de sus a paginii, combinat cu un font de text curat și neutru, care păstrează textul lung ușor de parcurs.
Blogurile și conținutul editorial arată de obicei cel mai bine cu combinații „Elegant” sau „Clasic” — un titlu serif rafinat transmite o voce îngrijită și atent gândită, în timp ce un text confortabil, serif sau sans-serif, păstrează articolele lungi lizibile pe perioade extinse de citire.
Site-urile de e-commerce și de produse tind să prefere combinațiile „Minimalist” — fonturi discrete și neutre mențin atenția pe fotografiile de produs și pe prețuri, nu pe tipografie, ceea ce contează atunci când zeci de carduri de produs apar pe aceeași pagină.
Portofoliile și site-urile creative au cel mai mult spațiu pentru experimente — combinațiile „Îndrăzneț” sau „Elegant”, cu mai multă personalitate, pot funcționa bine, deoarece publicul este acolo parțial pentru a evalua gustul vizual.
Note despre performanță și licențiere
Eticheta de încorporare `<link>` încarcă fonturile din CDN-ul Google, care este rapid și stocat în cache pe multe site-uri pe care vizitatorii tăi le-au vizitat probabil deja — dar adaugă totuși o cerere externă. Pentru site-urile unde fiecare milisecundă contează, descărcarea fișierelor de fonturi și găzduirea proprie (cu `font-display: swap` setat manual) elimină această dependență externă, cu prețul unui efort suplimentar de configurare.
Toate fonturile din Google Fonts sunt open source și gratuite pentru uz comercial, fără a fi necesară atribuirea, deși menționarea designerului fontului este un gest frumos atunci când este ușor de făcut.
Întrebări frecvente
Ce face ca două fonturi să „se potrivească bine”?
Combinațiile reușite echilibrează contrastul cu armonia. Contrastul — combinarea unui font serif cu unul sans-serif, sau a unui font display îndrăzneț cu un text simplu — creează ierarhie vizuală, astfel încât titlurile și textul să se distingă clar. Armonia — o înălțime a literelor mici (x-height) similară, o grosime comparabilă a traseelor și un simț asemănător al formalității sau al jucăușeniei — face ca cele două să nu intre în conflict. Combinațiile de aici au fost selectate ținând cont de amândouă.
Titlurile și textul trebuie mereu să folosească fonturi diferite?
Nu, folosirea unei singure familii de fonturi pentru amândouă (precum combinația „Rubik + Rubik” din acest instrument) funcționează la fel de bine, atâta timp cât fontul are suficiente variații de grosime pentru a diferenția titlurile de text. Este o alegere validă și minimalistă — nu o greșeală.
Cum aplic efectiv o combinație pe site-ul meu?
Copiază eticheta `<link>` de încorporare în secțiunea `<head>` a paginii pentru a încărca fonturile din CDN-ul Google, apoi copiază fragmentul CSS în foaia de stiluri — acesta setează `font-family` pentru titluri (h1, h2, h3) și pentru text (body, p). Ajustează selectorii CSS dacă structura HTML diferă.
Încărcarea fonturilor Google va încetini site-ul meu?
Fiecare fișier de font suplimentar adaugă o cerere de rețea și un risc de blocare a randării. Limitează-te la o singură grosime pentru titluri și una sau două pentru text, folosește `display=swap` (deja inclus în codul de încorporare) astfel încât textul să apară cu un font de rezervă cât timp se încarcă fontul web, și ia în calcul găzduirea proprie a fișierelor de fonturi pentru site-uri de producție care au nevoie de cel mai rapid timp de încărcare.
Aceste fonturi sunt gratuite pentru uz comercial?
Da. Fiecare font din Google Fonts, inclusiv toate combinațiile afișate aici, este licențiat sub SIL Open Font License sau Apache License — ambele permit utilizare comercială gratuită, modificare și redistribuire fără redevențe.