Mini tutorial – Un ghid pentru combinațiile de fonturi

„Tipografia este o arhitectură bidimensională, bazată pe experiență și imaginație și ghidată de reguli și de lizibilitate.” — Herman Zapf

Cu doar câțiva ani în urmă, designerii au fost sever restricționați în alegerea fonturilor web. Opțiunile erau în general limitate la fonturile de sistem și speranța că vizitatorii site-ului aveau acele fonturi instalate.

Deși fonturile web erau posibile din punct de vedere tehnic la sfârșitul anilor 90, ele nu au devenit utilizate pe scară largă până în 2009, când formatul WOFF a devenit disponibil și face parte din standardele deschise W3C. Asta a deschis o lume cu totul nouă de opțiuni tipografice pentru designeri.

Și aici se află dilema: acum că există literalmente mii de fonturi disponibile pentru designerii web, cum se poate crea combinații de fonturi care să funcționeze bine împreună și să susțină conținutul prezentat?

Tipografia bună și utilizarea celor mai bune combinații de fonturi ridică un design față de colegii săi și creează o experiență de utilizator mai încântătoare. Combinațiile eficiente de tipuri adaugă interes vizual unui design care poate menține un vizitator pe pagină mai mult timp.

Tipul prost, dimpotrivă, poate face conținutul mai greu de citit și mai puțin plăcut pentru persoana care îl citește.

Învățarea să combine fonturile în mod eficient este o piatră importantă în educația unui designer și una care ar trebui să fie perfecționată și îmbunătățită în mod continuu. Designerii care stăpânesc tipografia pot face chiar și cel mai simplu design mai eficient. Urmând instrucțiunile tipografice de bază pentru combinarea fonturilor este cel mai bun loc pentru a începe. Odată ce acele „reguli” sunt stăpânite, designerii se pot ramifica și pot experimenta pentru a crea combinații tipografice care îndoaie sau încalcă acele reguli.

Caracteristicile tipului

Cu sutele de mii de fonturi disponibile, încercarea de a-ți da seama de unde să începi poate fi copleșitoare, chiar și pentru designerii avansați. Înțelegerea caracteristicilor diferitelor fonturi este primul pas în învățarea cum să le combinați eficient.

Învățarea modului în care aceste caracteristici se relaționează între ele le permite designerilor să combine fonturile cu încredere și să experimenteze combinații neașteptate. Experimentarea și practica sunt acolo unde designerii își pot perfecționa cu adevărat abilitățile de combinare de fonturi și pot crea modele care îi deosebesc de alți experți. Uneori, ascultarea intuiției lor este cea mai bună modalitate de a crea o pereche de caractere care strălucește cu adevărat.

Clasificare

Clasificarea tipurilor de litere este unul dintre cele mai fundamentale concepte de înțeles. Există patru clasificări principale de învățat: serif, sans serif, script și decorativ.

Fonturile serif și sans serif sunt potrivite atât pentru titluri, cât și pentru textul corpului. Cu toate acestea, scripturile (uneori numite și fonturi pentru scris de mână) și fonturile decorative sunt, în general, acceptabile numai pentru titluri și titluri sau alte bucăți mici de text.

Fonturile serif sunt considerate mai lizibile pentru bucăți lungi de text (cum ar fi corpul textului), în special în modelele tipărite, unde caracteristica serif poate ajuta la ghidarea ochiului cititorului de-a lungul fiecărei linii. Dar fonturile sans serif pot fi, de asemenea, foarte lizibile și pot excela la dimensiuni mai mici (cum ar fi cele folosite pentru subtitrări sau meta informații).

Sans serif-urile sunt, de asemenea, mai populare pentru utilizare pe web și se crede că sunt mai lizibile decât fonturile serif. O parte din aceasta provine din primele zile ale computerului, când ecranele cu rezoluție mai mică făceau fonturile serif oarecum neclare, în funcție de dimensiune. Cu ecranele moderne HD și Retina, aceasta este mai puțin o problemă, iar fonturile serif și sans serif pot fi folosite în mod eficient.

Combinarea fonturilor din diferite clasificări este adesea mai simplă decât combinarea în cadrul clasificărilor, deoarece există un nivel de contrast între fonturile deja încorporate. Acestea fiind spuse, este, de asemenea, posibilă combinarea eficientă a fonturilor în aceeași clasă, atâta timp cât sunt luate în considerare alte caracteristici.

Greutate

Greutatea se referă la grosimea unui font dintr-un font. Subțire, obișnuit, semibold, bold și negru sunt exemple de greutăți.

Contrastul între greutăți este esențial atunci când combinați fonturi. Combinarea unui font foarte gros cu unul foarte ușor se simte adesea dezechilibrat. Dar combinarea fonturilor care au aceeași greutate poate fi, de asemenea, o provocare.

În schimb, mai ales când începeți cu combinații de fonturi, este mai ușor să găsiți fonturi care au diferențe notabile, dar nu extreme, de greutate. Designerii se pot ramifica de acolo în distincții mai proeminente.

Stil

În timp ce stilul este uneori folosit interschimbabil cu clasificarea, în acest caz, se referă la un font fie normal , italic sau oblic .

Când combinați fonturi în care sunt utilizate diferite stiluri, este important să vă asigurați că stilurile italice sau oblice funcționează la fel de bine împreună ca stilul normal. Uneori, stilurile italice sunt foarte diferite de stilul normal al aceluiași font, ceea ce poate face ca fonturile care altfel ar funcționa bine împreună să se ciocnească brusc.

Contrast

Contrastul în combinarea fonturilor poate fi dificil. Prea puțin contrast poate face ca fonturile să se ciocnească, în timp ce prea mult contrast poate face același lucru.

Contrastul la combinarea fonturilor se referă la orice fel în care fonturile sunt diferite, inclusiv clasificarea, greutatea, stilul și structura.

Când începeți, cel mai bine este să vă concentrați pe contrastul dintre doar unul sau două dintre aceste lucruri, asigurându-vă în același timp că celelalte sunt foarte asemănătoare. Greutatea este una dintre cele mai simple moduri de a crea contrast între fonturi. După cum am menționat deja, prea mult contrast în greutate poate fi la fel de șocant ca și prea puțin.

O altă modalitate ușoară de a crea contrast este prin combinarea diferitelor clasificări ale fonturilor, cum ar fi sans serif și serif sau script și serif etc. În aceste cazuri, este esențial să vă asigurați că starea de spirit a celor două fonturi se potrivește.

De exemplu, combinarea unui font mai casual, cum ar fi Amatic SC, cu un font foarte formal, precum Baskerville, se va ciocni mai degrabă decât contrastează. Dar combinarea a ceva de genul Amatic SC cu un alt font casual precum Josefin Slab funcționează minunat.

Înălțimea X

Înălțimea X se referă la înălțimea caracterelor individuale dintr-un tip de literă, în special literele x minuscule. Fonturile cu înălțimi x similare vor funcționa mai bine împreună decât cele cu înălțimi x diferite.

Structura

Structura de bază a unui tip de caractere include toate caracteristicile sale, plus lucruri precum forma de bază a caracterelor și spațierea acestora. Crearea contrastului cu structura fonturilor este o metodă consacrată de combinare a fonturilor. Dar este o idee bună să alegeți fonturi care au cel puțin unele elemente structurale în comun (cum ar fi înălțimea x sau greutatea stilului „normal”), mai degrabă decât cele care sunt extrem de diferite.

Dispozitie

Starea de spirit este una dintre cele mai subiective domenii ale tipografiei. Se referă la cât de formal sau informal este un tip de literă, precum și dacă este jucăuș, feminin, masculin, casual, serios etc.

De exemplu, Comic Sans este un font extrem de informal care nu este adecvat pentru utilizare în majoritatea situațiilor. Bickham Script, pe de altă parte, este foarte formal, dar dă o impresie greșită pentru lucruri precum corespondența de afaceri.

Când combinați fonturi, este important să găsiți fonturi cu stări similare. Combinarea unui font jucăuș cu unul foarte serios va fi supărător pentru ochi.

Decorare, culoare și textura

Aceste lucruri nu sunt caracteristici inerente ale fonturilor, dar sunt utile atunci când combinați fonturi. Unificarea (sau crearea unui contrast mai mare) prin culoare, decorare (cum ar fi sublinierea) și textura poate fi o tehnică foarte eficientă.

Combinații eficiente de fonturi

Există o ofertă aparent nesfârșită de site-uri cu o tipografie frumoasă, împreună cu o ofertă la fel de nesfârșită de site-uri cu un tip prost sau pur și simplu lipsit de strălucire. Studierea site-urilor care înțeleg corect este o modalitate excelentă de a învăța cum să combinați fonturile atunci când designerii încep sau încearcă să-și ducă abilitățile la nivelul următor.

Work Notes combină caracterul serif Adobe Caslon Pro cu sans serif Interstate pentru a crea o combinație de caractere care are un semn de tradiție fără a se simți învechit sau demodat. Combinarea diferitelor greutăți și stiluri adaugă un interes vizual suplimentar și face ca tipografia să pară mai complexă decât este de fapt.

Adjuvant Capital folosește caracterul serif modern, ușor capricios, Orpheus Pro, combinat cu caracterul modern GT America sans serif. Pentru o firmă de servicii financiare, aceasta este o alegere foarte modernă, dar funcționează bine cu misiunea lor de investiție globală responsabilă social.

Bloomscape folosește caracterul casual serif Morion împreună cu sans serif Raisonne pentru a crea un design tipografic impresionant și modern. Morion nu ar fi neapărat o alegere evidentă pentru tipul de corp datorită formelor de litere mai decorative, dar atunci când este folosit la o dimensiune adecvată (cum este aici), este grozav pentru bucăți mai scurte de text. Raisonne are forme de litere decorative similare, ceea ce face ca cele două fonturi web să funcționeze frumos împreună.

Vogue folosește caracterul modern și elegant cu serif Savoy, combinat cu grotesc sans serif Franklin Gothic, care a fost proiectat inițial în 1902. Combinația celor două creează un design de tipul de lux care atrage publicul cultivat vizat de revista.

Revista de stil de viață sudic Garden & Gun are pe site-ul lor o tipografie mai complexă decât celelalte incluse aici, ceea ce o diferențiază cu adevărat. Site-ul folosește patru fonturi principale: Titlurile principale ale articolelor sunt serif Domaine Display; textul corpului și unele titluri de pe pagina principală sunt fontul serif Domaine Text; metainformațiile, navigarea și anteturile secțiunilor folosesc sans serif Avenir Next; și anteturile de secțiuni suplimentare de pe pagina principală sunt în Domaine Sans Display.

Utilizarea mai multor fonturi dintr-o familie de tipuri mai mare este o modalitate încercată și adevărată de a crea un design tipografic complex, care se coordonează perfect. Adăugarea în Avenir Next descompune lucrurile și adaugă un interes vizual suplimentar.

Alegerea dvs. de tipar este la fel de importantă ca și ceea ce faceți cu el.

— Bonnie Siegler

Concluzie

Combinațiile eficiente de fonturi sunt un semn distinctiv al unui design bun. Designerii trebuie să stăpânească această abilitate dacă doresc să creeze modele excepționale care să îi deosebească de contemporanii lor.

Luați în considerare liniile directoare incluse aici ca puncte de plecare pentru a explora cum să combinați eficient textul. O bază solidă permite o experimentare mai eficientă, fără a petrece ore întregi pe combinații complet nepotrivite. De aici, designerii pot exersa crearea propriului stil și metode pentru combinarea eficientă a fonturilor, deviând de la ghiduri, după cum este necesar, cu mai multă încredere că produsul lor final va fi o încântare pentru utilizatori.

Citiri suplimentare pe Blogul Toptal Design:

• Proiectare pentru lizibilitate – Un ghid pentru tipografie web (cu infografică)
• Înțelegerea nuanțelor clasificării fonturilor
• Disecarea complexităților anatomiei tipografiei (cu infografică)
• Cum să structurați o ierarhie tipografică eficientă
• Stiluri de tipărire pentru Web și Design de imprimare