Una dintre cele mai importante abilități pe care le puteți învăța ca designer este cum să alegeți tipul. Asta pentru ca textul este unul dintre principalele moduri în care proiectanții pot comunica cu utilizatorii. Tipografia poate crea sau sparge un design.

Tipografia are o frumusețe și o complexitate. Unii oameni își dedică întreaga carieră la tip. Din fericire, munca lor este bine documentată, așa că avem o mulțime de resurse online pentru tipografie.

Acest articol este conceput pentru a servi drept punct de plecare pentru a vă ajuta să învățați cum să alegeți tipul pentru desenele dvs. Vă va încuraja să explorați fonturi și combinații de fonturi dincolo de cele pe care le cunoașteți.

Identifică-ți scopul

Înainte de a face orice altceva, identificați mai întâi scopul proiectării dvs. Ce informații doriți să transmiteți? Care este suportul pentru designul dvs.?

Un design bun își aliniază tipografia cu scopul său. Acest lucru se datorează faptului că tipografia este esențială pentru setarea stării, tonului și stilului în desenele dvs.

ad-banner

De exemplu, dacă proiectați o felicitare cu o ilustrare grea, alegeți un font care să se potrivească stilului ilustrației dvs. Armonizați-vă tipul cu restul designului.

Tipografia va poate face sau rupe designul un proces de
Alegeți un font care se potrivește stilului ilustrației dvs.

Dacă proiectați o pagină de destinație bazată pe imagini, alegeți un font simplu care să nu vă afecteze imaginile. Folosiți tipul ca modalitate de a sublinia informațiile pentru a comunica sensul.

Tipografia va poate face sau rupe designul un proces de
Dacă imaginile sunt punctul central al designului dvs., alegeți fonturi simple, astfel încât imaginile să iasă în evidență

Identifică-ți publicul

După ce ați stabilit scopul proiectării dvs., identificați-vă publicul. Acest pas este crucial deoarece vârsta și interesul vă vor influența opțiunile de font.

După clarificarea scopului designului dvs., identificați-vă publicul. Acest pas este crucial deoarece informațiile despre utilizatorii dvs., cum ar fi vârsta, interesele și educația culturală, ar putea influența deciziile pe care le luați pentru tipul dvs.

De exemplu, unele fonturi sunt mai potrivite pentru copii. Când învață să citească, copiii au nevoie de fonturi foarte lizibile, cu forme generoase de litere. Un bun exemplu în acest sens este Sassoon Primary. Sassoon Primary a fost dezvoltat de Rosemary Sassoon și pe baza cercetărilor sale despre ce fel de scrisori li s-a părut ușor de citit copiilor.

1611262509 801 Tipografia va poate face sau rupe designul un proces de
Sassoon Primary a fost dezvoltat Rosemary Sassoon

Alte fonturi sunt mai potrivite pentru seniori. Fonturile prietenoase cu persoanele în vârstă utilizează dimensiuni lizibile, culori contrastante ridicate și evită scripturile și stilurile decorative.

Atunci când alegeți tipul, luați în considerare publicul și nevoile acestora. Pur și simplu pune, empatizează cu utilizatorii tăi.

Căutați inspirație

Uită-te la munca altor designeri. Încercați să înțelegeți cum au luat deciziile pentru tip.

Inspirația fontului

Pentru inspirația fontului, Cele mai bune 100 de fonturi gratuite de CreativeBloq este un articol minunat pentru a vă pune în mentalitatea potrivită pentru alegerea tipului. În articol, CreativeBloq explică motivațiile din spatele fiecărui font.

O altă resursă utilă este Cele mai mari 100 de colecții de fonturi gratuite pentru 2015 de Awwwards.

Invision a compilat și un repozitie gigantică a resurselor tipografice. Veți găsi o mulțime de surse de inspirație acolo.

1611262509 158 Tipografia va poate face sau rupe designul un proces de
Typ.io organizează inspirația fonturilor din jurul webului

Pentru inspirație de la site-uri web reale, verificați Typ.io. Site-ul organizează inspirația fonturilor din jurul web. În plus, site-ul oferă definiții de fonturi CSS în partea de jos a fiecărui eșantion de inspirație.

În afară de a căuta site-uri web dedicate de inspirație a fonturilor, vizitați site-urile dvs. preferate și verificați ce fonturi folosesc. Un instrument bun pentru aceasta este WhatTheFont. WhatTheFont este o extensie Chrome care vă permite să inspectați fonturile web trecând peste ele.

Pairing Inspiration

Dincolo de doar fonturi, uitați-vă și la inspirația de asociere a fonturilor. Împerecherea fonturilor este la fel de importantă ca fonturile în sine. Împerecherea bună a fonturilor ajută la stabilirea ierarhiei vizuale și la îmbunătățirea lizibilității desenelor.

1611262510 411 Tipografia va poate face sau rupe designul un proces de
Împerecherea fonturilor este la fel de importantă ca fonturile în sine

Pentru inspirație, începeți cu Mașină de scris. Typewolf organizează inspirația de asociere a fonturilor de pe diferite site-uri. Dincolo de asta, au și recomandări de fonturi și ghiduri detaliate de tipografie. Este o comoară pentru tipografi.

FontPair organizează, de asemenea, inspirația de asociere a fonturilor, special pentru Google Fonts. Puteți sorta după combinații de stil de tip, cum ar fi sans-serif și serif, sau serif și serif.

1611262510 498 Tipografia va poate face sau rupe designul un proces de

În cele din urmă, există o mulțime de colecții de împerechere a fonturilor create de designeri online. De exemplu Tipografie: combinații de fonturi Google și Tipografie: Combinații de fonturi Google Volumul 2. Căutați „împerecherea fonturilor” pe site-uri precum Behance și Dribbble.

Alegeți fonturile

Înarmat cu cercetare și inspirație, sunteți gata să vă alegeți tipul. Când vine vorba de alegerea tipului, rețineți următoarele principii: lizibilitatea, lizibilitatea și scopul.

1611262510 152 Tipografia va poate face sau rupe designul un proces de
Înainte de a alege un font, căutați scopul dorit

Alegeți fonturi convenționale și ușor de citit. Evitați fonturile extrem de decorative în favoarea fonturilor simple și practice. De asemenea, țineți cont de scopul unui font. De exemplu, unele fonturi sunt mai potrivite pentru a fi antete decât pentru textul corpului.

Din acest motiv, înainte de a alege un font, căutați scopul dorit.

1611262510 705 Tipografia va poate face sau rupe designul un proces de
Asociați fonturi care contrastează unul cu celălalt

În ceea ce privește asocierea fonturilor, păstrați-l simplu cu maximum trei fonturi diferite. În plus, asociați fonturi care contrastează unul cu celălalt. Acest lucru vă va ajuta să ghidați ochii cititorilor, mai întâi către anteturi și apoi spre textele corpului. De asemenea, puteți crea contrast vizual folosind diferite dimensiuni de font, culori și greutăți.

Pentru fonturile web, puteți utiliza Google Fonts, Typekit, și Font Squirrel. Google Fonts este gratuit, Typekit și Font Squirrel au fonturi gratuite și plătite.

Determinați dimensiunile fontului

Următorul pas după stabilirea unei combinații de fonturi este determinarea dimensionării. Un instrument excelent pentru acest lucru este Scară modulară de Tim Brown, șeful tipografiei de la Adobe. Scara modulară este un sistem pentru identificarea unor rapoarte plăcute din punct de vedere istoric pentru a crea scale pentru a determina dimensiunile tipului.

1611262511 264 Tipografia va poate face sau rupe designul un proces de
Scara modulară este un sistem pentru identificarea unor rapoarte plăcute din punct de vedere istoric pentru a crea scale pentru a determina dimensiunile tipului

De exemplu, puteți utiliza o scală bazată pe raportul auriu. Iată primele cinci opțiuni pentru dimensiunea fontului calculat:

Golden Ratio (1:1.618)
1.000 x 1.618     = 1.6181.618 x 1.618     = 2.6182.618 x 1.618     = 4.2364.236 x 1.618     = 6.8546.854 x 1.618     = 11.089

O problemă pe care s-ar putea să o întâlniți este că raportul dvs. este prea mare. Aruncați o privire la ceea ce se întâmplă cu intervalele ulterioare ale scalei noastre pe baza raportului auriu.

Golden Ratio (1:1.618)
...11.089 x 1.618    = 17.94217.942 x 1.618    = 29.0329.030 x 1.618    = 46.97146.971 x 1.618    = 75.99975.999 x 1.618    = 122.966

După cum puteți vedea, intervalele dintre numere încep să devină prea mari. Pentru majoritatea interfețelor, aveți nevoie de intervale mai mici. Din fericire, Scară modulară are o varietate de rapoarte bazate pe geometrie, natură și muzică.

Minor Second    15:16 Major Second    8:9Minor Third     5:6Major Third     4:5...

Deci, în loc să utilizați raportul auriu, puteți utiliza un raport care să producă intervale mai mici, cum ar fi al patrulea perfect.

Perfect Fourth (3:4)
...9.969  x 1.333     = 13.28813.288 x 1.333     = 17.71317.713 x 1.333     = 23.61223.612 x 1.333     = 31.47531.475 x 1.333     = 41.95641.956 x 1.333     = 55.927

După ce te-ai stabilit pe o scală, poți alege dimensiunile fonturilor din listă și le rotunjești la cea mai apropiată zecimală.

Font Sizes
Header 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14px
Body: 17pxCaption: 14px

Metoda Modular Scale utilizează precizie matematică pentru a genera dimensiuni de font. Cu toate acestea, este doar un ghid. Folosiți această metodă ca punct de plecare și apoi ajustați dimensiunile cu ochiul.

Creați un ghid de stil de tipografie

Ultimul pas al procesului este de a crea un ghid de stil pentru tipografia dvs. pentru a ajuta la standardizarea tipului în toate desenele.

1611262511 373 Tipografia va poate face sau rupe designul un proces de
Stiluri partajate în Sketch

În programe precum Schiță, puteți crea stiluri de text partajate pentru a insera rapid text cu stiluri deja aplicate din ghidul dvs.

În acest pas al procesului, puteți modifica și finaliza atributele textului, cum ar fi culoarea, greutatea și dimensiunea.

Un cuvânt despre culoare: atunci când alegeți culoarea, țineți cont de paleta de culori. Alegeți culori pentru tipul dvs. care se armonizează cu paleta de culori.

1611262511 800 Tipografia va poate face sau rupe designul un proces de
Utilizați ghiduri de stil pentru a standardiza tipul în toate desenele

În ghidul de stil, asigurați-vă că includeți cel puțin următoarele lucruri: definiții ale fonturilor, dimensiuni ale fontului, culori ale fontului și exemple de utilizare.

Regulile de tipografie Google Design materiale este un bun exemplu de ceea ce trebuie inclus într-un ghid de stil. Câteva alte exemple includ ghidurile de tipografie ale Mailchimp, măr, și Focus Labs.

Tipografia se referă la experimentare. Este atât o știință, cât și o artă.

Te provoc să ieși din zona ta de confort și să explorezi tipul de design.

Care sunt fonturile tale preferate? Lasă-mi o notă sau trimite-mi o tweet pe Twitter.

Dacă ți-a plăcut acest articol, s-ar putea să te bucuri și tu CSS în Javascript cu Afrodita, o bibliotecă a Academiei Khan.

CSS în Javascript: Viitorul stilului bazat pe componente
Săptămâna aceasta, vreau să vă prezint conceptul de CSS în Javascript cu Aphrodite by Khan Academy. Afrodita permite …medium.com

Mă puteți găsi pe Medium unde public în fiecare săptămână. Sau poți să mă urmărești mai departe Stare de nervozitate, unde postez divagări nesensibile despre design, dezvoltare front-end și realitate virtuală.

PS Dacă v-ar plăcea acest articol, ar însemna mult dacă faceți clic pe? și împărtășiți cu prietenii.

1611262511 213 Tipografia va poate face sau rupe designul un proces de
1611262512 848 Tipografia va poate face sau rupe designul un proces de