10 Awesome Google Font Combinations Awesome Google Font Combinations Trending in 2021

O listă de fonturi la modă alese manual de la Google Fonts care se potrivesc bine împreună și cum să le instalați pe site-ul dvs.

• Articol de Jason Beever
• Actualizat: January 2, 2020
• Tags: tipografie, web design

Tipografia site-ului web era o practică de design mai mistificatoare decât este astăzi. Procesul complicat de decorare a unei pagini web cu fonturi personalizate presupunea odinioară convertirea și încorporarea de fișiere de fonturi care să fie găzduite pe serverul utilizatorului, iar alegerea fonturilor disponibile era limitată la colecția proprie a utilizatorului sau la cunoștințele acestuia în materie de tipografie în afara fonturilor de sistem standard. Ca urmare, majoritatea site-urilor web arătau aproape identic în ceea ce privește formatarea conținutului, care se baza pe multe fonturi de siguranță web banale și suprautilizate.

Toate acestea s-au schimbat în 2010, odată cu lansarea Google Fonts, un proiect open-source care permite implementarea mult mai ușoară a fonturilor personalizate pe site-urile web. Instalarea acestor fonturi pe propriul site web este, din fericire, un proces rapid și ușor, dar trebuie să fiți conștienți de faptul că nu toate combinațiile de fonturi din biblioteca Google sunt o rețetă pentru succesul tipografic. Cu toate acestea, cu perechile de fonturi și considerațiile de utilizare corecte, marca dvs. online poate emana profesionalism, frumusețe și ușurință de citire fără a fi nevoie de fonturi personalizate costisitoare. În acest articol, vă voi arăta cum să realizați toate acestea.

O listă de 10 combinații de fonturi Google în trend

Să trecem la treabă! Fără o anumită ordine, iată 10 dintre cele mai bune combinații de fonturi Google care sunt în trend în prezent:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Iată o combinație ușoară care face minuni pentru aproape orice utilizare aplicabilă. Open Sans este unul dintre – dacă nu cel mai versatil – fonturi din întreaga colecție de fonturi Google Fonts. Este extrem de ușor de citit în blocuri mari de text, fiind în același timp suficient de izbitor pentru titluri.

Simplu. Sofisticat. Familiar. Nu vă puteți înșela!

Utilizare în lumea reală

Nu pot prevedea niciun scenariu în care Open Sans ar fi o alegere proastă. Cu excepția cazului în care căutați în mod special un font cu serife, cred că acesta va servi perfect pentru aproape orice afacere, blog, pagină de destinație sau aplicație web.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald este un font excelent pentru titluri, indiferent de greutatea fontului sau de utilizarea majusculelor. Natura sa condensată îl ajută să atragă atenția și să iasă în evidență, dar face, de asemenea, un text plăcut și unic ca font al corpului principal.

EB Garamond este o actualizare elegantă a fontului clasic Garamond. Recunoscut instantaneu și cu un aspect atemporal, acest font emană un profesionalism distinctiv în tipografia dvs. tipografică.

Utilizare în lumea reală

Această asociere funcționează bine pentru profesioniștii care se ocupă cu clientela de lux, cum ar fi avocații, agențiile imobiliare sau chiar buticurile de lux. Versatilitatea lui Oswald și aspectul clasic al EB Garamond se pretează foarte bine pentru un text de descriere a produsului în care este important să se sublinieze un articol de calitate superioară.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat este favoritul designerilor pentru versatilitatea și simplitatea sa, iar Merriweather se potrivește de minune cu stilul său contrastant și ușurința de citire. Nu ezitați să le intercalați ca titluri sau ca text de paragraf – ambele funcționează foarte bine ca oricare dintre ele!

Utilizare în lumea reală

Această combinație specială este un echilibru frumos între designul modern și cel clasic. Ca atare, varietatea sa de utilizări ar putea susține multe tipuri de afaceri. Personal, simt că aceste fonturi s-ar potrivi bine pentru orice tip de sursă de știri online sau agenție editorială.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Familia de fonturi Roboto este o preferată personală și este, de asemenea, una pe care o folosim și noi aici, la How To Get Online. Extrem de versatilă, cu o gamă largă de greutăți de font, practic nu există nicio limitare la ceea ce ar putea fi folosit acest font. Modern și geometric, dar rămânând cumva prietenos și de încredere, Roboto este o minune a formei și funcției.

Utilizare în lumea reală

Iată o altă asociere pentru care v-ar fi greu să găsiți o utilizare proastă. În timp ce Roboto funcționează pentru aproape orice, cred că este deosebit de grozav pentru start-up-urile din domeniul tehnologiei, micile afaceri moderne sau orice tip de brand cu un ochi spre viitor.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

Este prietenul nostru Roboto din nou! De data aceasta, însă, ne uităm la varianta cu serife, Roboto Slab. Este un font la fel de versatil ca și vărul său, dar cu un stil un pic mai clasic. Atunci când este asociat cu distinctivul și îndrăznețul Raleway, avem o potrivire uimitoare de tipografie curată și rafinată.

Real-World Use

Raleway este unul dintre acele fonturi care strigă sofisticare. Atunci când este folosit ca titlu cu majuscule, cred că funcționează minunat pentru articole de lux, cum ar fi bijuteriile, hainele de designer sau produse de ecommerce la fel de luxoase. Roboto Slab îl susține bine cu un text descriptiv simplu și abordabil.

Ambele funcționează și ele interschimbabil. Încercați diferite variații de greutate pentru ambele fonturi în titluri și în corpul textului și vedeți care asociere vă surprinde cel mai bine brandul.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Potrivit designerului său, Playfair Display a fost inspirat de formele de litere din secolul al XVIII-lea, în timpul tranziției de la penițe la stilouri cu vârf de oțel. Nu este o surpriză atunci că acest font emană farmecul lumii vechi, dar cu o întorsătură modernă.

Source Sans Pro împinge lucrurile un pic mai departe în viitor, creând o combinație intrigantă care este ornamentată, dar în același timp utilitară.

Utilizare în lumea reală

Playfair Display adaugă o notă personală la ceva precum un slogan sau o descriere de produs. Dacă aveți ocazia să îi folosiți ampersanda sau simbolurile monetare, veți vedea imediat de ce este alegerea perfectă pentru un produs sau un serviciu centrat pe lux și aparențe. Source Sans Pro menține textul ancorat într-o prezentare modernă și curată.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One poate că nu este cel mai versatil dintre fonturi, dar un lucru pe care îl face extrem de bine este să creeze titluri care cer atenție. Mici sau mari, minuscule sau majuscule, aceste litere sunt hipnotice, indiferent de ceea ce faci cu ele.

Noto Sans își propune să fie un font cu adevărat universal, în care, indiferent de limbă, să poată fi afișat fără erori de formatare pentru utilizatorii din întreaga lume. În mod corespunzător, estetica fontului este la fel de versatilă ca și utilitatea sa.

Utilizare în lumea reală

Blogurile sau paginile de destinație ar fi minunate pentru această pereche – sau chiar orice lucru cu corpuri lungi de text care necesită subtitluri notabile pentru a rupe conținutul. Adaptabilitatea universală a Noto Sans îl face, de asemenea, o alegere bună în cazul în care atingerea unui public internațional este o prioritate.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya are un anumit farmec care mi se pare foarte „pământesc” și prietenos. Nu există nici o pretenție cu privire la personalitatea sa; ceea ce vezi este ceea ce primești.

Lato ar putea să-i dea de furcă lui Open Sans ca fiind campionul fonturilor universale din biblioteca Google.

Împreună formează o combinație care este amuzantă, ușor de citit și pragmatică.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

O altă abordare modernă a unui stil din Lumea Veche, PT Sans și fratele său, PT Sans Narrow, fac o declarație imediată și inconfundabilă atunci când sunt asociate împreună.

Utilizare în lumea reală

Care dintre cele două fonturi funcționează la fel de bine ca titlu sau corp de text; perechea particulară pe care o alegeți va depinde de natura cuvintelor dumneavoastră – deși tind să prefer PT Sans Narrow în rafale mai scurte.

Destinat ca „instrument foarte important pentru comunicările digitale moderne”, se pare că cel mai potrivit – deși cu siguranță nu este limitat – este să folosiți aceste fonturi pentru start-up-uri de tehnologie, aplicații software sau alte afaceri digitale.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Ok, acesta este cu siguranță mai mult pe partea veselă. Evident, această combinație nu va funcționa pentru toată lumea, dar natura capricioasă atât a lui Amatic SC, cât și a lui Josefin Sans creează ceva care cu siguranță va ieși în evidență – atâta timp cât sunteți prudent!

Utilizare în lumea reală

Dacă sunteți un artist, actor, muzician sau animator cu spirit de distracție, atunci acest font ar putea fi esențial pentru a vă surprinde personalitatea unică. În funcție de tonul general și de subiect, această combinație ar putea funcționa și pentru un blog de nișă.

Un sfat: Nu folosiți Amatic SC ca text principal în corpul textului dumneavoastră. Îți vei înnebuni cititorii.

Bonus: 5 dintre fonturile noastre premium preferate

Știm că acest articol este despre cele mai bune fonturi Google, cele mai în vogă, dar am vrut să menționăm și câteva dintre fonturile noastre premium preferate ca bonus. Fonturile premium, bineînțeles, nu sunt gratuite – dar ele oferă site-ului dvs. un design mai unic și mai personalizat. Aceste fonturi nu sunt populare sau în trend și sunt chiar opusul celor pe care le-am enumerat mai sus. Cu toate acestea, acestea sunt grozave pentru cei care doresc un design personalizat și pe măsură pentru brandul lor și se potrivesc foarte bine atunci când sunt folosite pentru logo-uri sau chiar titluri creative:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

De ce ar trebui să folosiți Google Fonts?

Bine ați venit la ceea ce mulți designeri web consideră cel mai bun prieten al lor. Vorbind din experiență, vă pot spune că rareori mai încorporez fișiere de fonturi personalizate pe site-uri web. Google Fonts este acum aproape exclusiv primul și ultimul loc la care apelez pentru tipografia unui site web. Iată de ce:

• Este complet gratuit. Nu contează câte fonturi alegeți sau pe câte site-uri web le folosiți. Nu veți plăti niciodată un ban.
• În martie 2018, există peste 850 de fonturi în bibliotecă. Sunt șanse să găsești stilul potrivit pentru a se potrivi cu brandul tău.
• Este rapid. Deoarece fonturile sunt găzduite pe serverele Google, fișierele sunt compresate inteligent și concepute pentru a se încărca rapid.
• Este ușor. Un simplu copy-and-paste într-un fișier HTML și ați terminat.
• Este organizat. Toate fonturile sunt clasificate și pot fi căutate în cadrul unei singure baze de date. Gata cu scotocirea prin subfolderele dezordonate de pe calculatorul dumneavoastră pentru a găsi fontul perfect.
• Am menționat că este gratuit? Este gratuit!

Cum se instalează Google Fonts

Nu este nevoie de dureri de cap aici. Trebuie doar să mergeți la Google Fonts și să găsiți fontul (fonturile) de care aveți nevoie.

Pe măsură ce selectați fonturile, acestea sunt adăugate cumulativ la o colecție în partea de jos a paginii. Când ați terminat cu căutarea, faceți clic pe acea filă din partea de jos și va apărea o fereastră cu instrucțiuni de încorporare.

Adding Styles

De aici puteți alege să includeți stilizări suplimentare, cum ar fi italic, bold, bold-italic și așa mai departe. Trebuie doar să faceți clic pe fila CUSTOMIZE și să selectați stilurile de care credeți că veți avea nevoie.

De exemplu, iată cum aș selecta atât textul normal, cât și cel bold pentru fontul Khula.

Îmbrăcând Standard sau @Import?

Vă veți da seama că aveți două opțiuni pentru a încorpora fonturile pe site-ul dvs. web: folosind un <link href> standard pentru a fi folosit în fișierul HTML al site-ului dvs. sau un url @import pentru a fi inclus în fișierul CSS al site-ului dvs. Deci, pe care dintre ele ar trebui să o folosiți?

În general, cea mai bună opțiune este să copiați și să lipiți linia <link href> în fișierul HTML. Fonturile dvs. se vor încărca de obicei mai repede în acest mod, mai degrabă decât să așteptați ca fișierul CSS să se încarce, iar această metodă are, de asemenea, un suport ceva mai bun pentru browserele (foarte) vechi.

Unde să puneți codul

Vă veți copia și lipi linia de cod pe care v-o oferă Google în secțiunea <head> a fișierului dvs. HTML. Deci, folosind fontul Khula pe care l-am ales mai sus, va arăta astfel:

Utilizarea fontului în foaia dvs. de stil

Acum pur și simplu apelați la font ca de obicei în codul dvs. CSS. În scop demonstrativ, titlul principal și textul paragrafului dvs. ar putea arăta astfel:

Consiliere privind împerecherea fonturilor dvs.

Decizia asupra fonturilor pe care să le grupați poate fi uneori un echilibru artistic dificil de atins. Pe de o parte, selecția dvs. de fonturi va fi mai eficientă atunci când există un contrast suficient de mare între stiluri; fiecare font de pe site-ul dvs. trebuie să iasă în evidență față de celelalte și să câștige o justificare pentru utilizarea sa. Pe de altă parte, nu doriți ca fonturile dvs. să se îndepărteze prea mult unul de celălalt din punct de vedere stilistic, ceea ce ar putea da impresia că au fost alese la întâmplare.

Serif și Sans-Serif

O metodă încercată este de a asocia un font serif cu unul sans-serif. Stilurile lor tind să contrasteze bine împreună, oferind o distincție ușoară între titluri și paragrafe.

Experimentarea este cheia

Când aleg fonturi pentru un nou site web, îmi place să descarc toate opțiunile posibile de Google Font pe computerul meu și să mă joc cu ele într-un document de procesare a textului. A juca cu diferite mărimi și greutăți și a compara combinațiile unul lângă altul este o modalitate eficientă de a determina cea mai bună asociere posibilă. Făcându-vă timp să experimentați, s-ar putea chiar să descoperiți că utilizarea unei variante subțiri a unui anumit font permite obținerea unui text de titlu mai bun decât dacă ați folosi un font complet separat. (Cea mai simplă soluție este de multe ori cea mai bună.)

Concluzie

Google Fonts este o resursă puternică pentru cei care fac DIY și nu doresc să plătească pentru fonturi personalizate costisitoare pe site-ul lor. Dar cu o mare putere vine și o mare responsabilitate: tipografia necesită o gândire atentă pentru a fi făcută bine și nu toate fonturile de acolo sunt câștigătoare. Sperăm că acest ghid vă ajută să vă îndrumați în direcția cea bună, inspirându-vă să găsiți perechea perfectă de fonturi pentru a surprinde personalitatea brandului dumneavoastră.