Cele mai bune 20 de tutoriale de tipografie pentru web designeri

Unii designeri de web pot considera că tipografia este printre cele mai puțin importante elemente ale designului web, dar poate crea sau rupe experiența utilizatorului în mai multe moduri.

Opțiunile bune de tipografie pot consolida lizibilitatea, lizibilitatea, identitatea mărcii, accesibilitatea și rata de conversie. Opțiunile greșite de tipografie, pe de altă parte, pot slăbi acești factori și pot distruge experiența utilizatorului.

Tipografia, deci, este un aspect important al designului web și ceva pe care fiecare designer ar trebui să îl învețe atunci când începe o afacere de design web. Din fericire, web-ul este plin de tutoriale utile de tipografie și cursuri pentru designeri de web.

În acest articol, vom examina 20 de tutoriale de design web. În timp ce multe dintre aceste tutoriale sunt disponibile gratuit online, am inclus și câteva cursuri online plătite. La urma urmei, atunci când încercați să găsiți lucrări de proiectare web, trebuie să vă puteți distinge și să aveți un certificat de finalizare de la o instituție sau furnizor de cursuri recunoscut.

De la termeni de tipografie de bază până la optimizarea fonturilor cu CSS, am completat cele mai bune tutoriale de tipografie pentru designeri.

Nivel de abilități: începător până la mediu

Durata: 30 de minute

Cost: gratuit

Acest tutorial de tipografie provine de la Elementor, ceea ce înseamnă că veți învăța mai mult decât să folosiți tipografia în designul web. Veți învăța cum să puneți toate acestea în practică - lucruri precum formatarea, stabilirea ierarhiei vizuale, crearea unui sistem de proiectare și așa mai departe - în contextul WordPress și Elementor.

Nivel de abilități: începător până la mediu

Lungime: 17:31

Cost: gratuit

În unele cazuri, WordPress nu va avea fonturile specifice pe care doriți să le utilizați. Deci, cu acest tutorial de tipografie de la Elementor, veți afla care sunt opțiunile dvs. pentru a adăuga fonturi personalizate pe un site WordPress. Le puteți adăuga manual la WordPress utilizând CSS sau le puteți încărca în Elementor și le puteți utiliza din editor.

Nivel de abilități: începător până la mediu

Lungime: 6:50

Cost: gratuit

În acest videoclip de la Elementor, veți afla totul despre caracteristica Global Settings din editorul Elementor. Acest tutorial vă va arăta cum să utilizați această caracteristică pentru a seta atât culori, cât și fonturi și apoi urmăriți cum se aplică la nivel de site. Deci, dacă doriți să economisiți timp în actualizarea fonturilor dvs. și doriți să aduceți o mai mare consistență fiecărui site pe care îl creați, acest scurt tutorial video este un lucru obligatoriu.

Nivel de abilități: începător

Lungime: 10:33

Cost: gratuit

Numele acestui tutorial video de la Envato Tuts + este oarecum înșelător. Ceea ce ar trebui să fie numit este „Ghidul final pentru terminologia tipografică de bază”. Acestea fiind spuse, dacă sunteți nou în tipografie, acesta este un prim pas important pe care trebuie să îl faceți. Familiarizați-vă cu termenii legați de tipografie, fonturi, tipuri de fișiere, structura de tipare, tipografiere și multe altele.

Nivel de abilități: începător

Durată: citire de 18 minute

Cost: gratuit

Acest tutorial de tipografie de la Hubspot este o altă introducere utilă la tipografie în design. Veți învăța termeni obișnuiți, diferite stiluri de tipografie, precum și de unde să vă sursați fonturile.

Nivel de abilități: începător

Durată: 8 ore

Cost: gratuit

Dacă căutați ceva mai aprofundat pentru introducerea dvs. la tipografie, acest curs de la California Institute of the Arts este o alegere bună. Nu există niciun cost pentru înscrierea la acest curs, ceea ce reprezintă un plus imens, deoarece veți obține o mulțime de informații utile din acesta. Veți afla despre istoria tipografiei, structura acesteia, cum să o folosiți pentru a spune o poveste, manipularea aspectului ei și multe altele.

Nivel de abilități: începător

Durata: 15 minute

Cost: gratuit

Dacă sunteți nou în proiectare, acest tutorial de la Envato Tuts + va servi ca o introducere excelentă în psihologia fonturilor. Similar psihologiei culorii, veți afla răspunsurile emoționale comune și asocierile cu anumite tipuri de fonturi și veți primi sfaturi despre cum să le utilizați în avantajul dvs.

Nivel de abilități: începător până la mediu

Durată: 6,5 ore

Cost: 109,99 USD

Acest curs Udemy de tipografie web este predat de Rob Sutcliffe de la Interface School. Aceasta este o prezentare destul de tehnică a tipografiei, examinând diferitele tipuri de clasificări, sfaturi despre alegerea și asocierea fonturilor, făcând tipografia dvs. web lizibilă și receptivă și multe altele.

Pentru a profita la maximum de acest curs, ar trebui să aveți câteva cunoștințe practice de HTML, CSS și JavaScript. Asta nu înseamnă că nu ar trebui să vă înscrieți dacă sunteți un nou designer - aveți acces pe tot parcursul acestuia, astfel încât să vă puteți întoarce la el după ce vă perfecționați abilitățile în acea zonă.

Nivel de abilități: începător

Durată: 13 ore

Cost: gratuit

Acest curs de la Universitatea din Colorado Boulder este disponibil pe site-ul web Coursera. Acesta este un curs lung, în timpul căruia veți învăța cum să manipulați elementele textuale pentru a spune o poveste cu designul dvs. Cursul trece peste elementele de bază și apoi se ramifică în spațiere tipografică, alegând fonturi, împerechere fonturi și multe altele.

Nivel de abilități: intermediar

Durată: 8,5 ore

Cost: 99,99 USD

Muhammad Ahsan Pervaiz este creatorul acestui curs de 4,5 stele Udemy despre tipografie. Dacă doriți să primiți instruire cuprinzătoare despre elementele de bază ale tipografiei, personalizarea tipografiei, alegerea și asocierea fonturilor și multe altele, acesta este un curs fantastic de urmat. Exercițiile sunt încorporate în curs, astfel încât veți obține, de asemenea, experiență practică în implementarea a tot ceea ce învățați pe măsură ce mergeți mai departe.

Nivel de abilități: începător

Lungime: 12:55

Cost: gratuit

Multe dintre tutoriale și cursuri pe care le-ați văzut pe această listă până acum au atins subiectul tipurilor de fonturi. Cu toate acestea, acest tutorial Envato Tuts + trece foarte profund pe subiect, descompunând diferitele tipuri și subcategorii de fonturi. Învățând cum să identificați diferențele în structura fiecăruia, veți avea mult mai ușor să alegeți stilurile de tipografie potrivite pentru site-urile dvs.

Nivel de abilități: începător

Lungime: 9:58

Cost: gratuit

Acest tutorial de tipografie de la Flux are ca scop găsirea fonturilor de calitate pentru site-urile dvs. web. Discuția se învârte în principal în jurul modului în care designerii de web pot face căutări de fonturi de calitate înaltă și site-uri web din care să-și obțină fonturile. Deoarece, chiar dacă înțelegeți tipul de font de care aveți nevoie, un font slab făcut (chiar dacă se potrivește cu acel stil) ar putea anula toată munca grea. Acest tutorial vă va ajuta să evitați această problemă.

Nivel de abilități: începător

Durata: 10 minute

Cost: gratuit

Acesta este un ghid practic de la Google Design despre cum să determinați ce fonturi web sunt cele potrivite pentru fiecare site web pe care îl creați. Tutorialul vă va conduce printr-o serie de factori, cum ar fi domeniul de aplicare al proiectului și designul multilingv, și apoi vă va îndrepta către Google Fonts care răspund nevoilor proiectului dvs.

Nivel de abilități: începător

Lungime: 7:35

Cost: gratuit

În acest ghid pas cu pas de la Satori Graphics, veți primi îndrumări practice și sfaturi despre alegerea fonturilor pentru proiectele dvs. Deși aici se pune un accent puternic pe designul grafic, puteți aplica aceiași cinci pași pentru alegerea și asocierea fonturilor pentru orice lucru la care lucrați, fie că este un site web, o aplicație, o siglă sau un alt tip de garanție de marcă.

Nivel de abilități: începător

Lungime: 9:41

Cost: gratuit

Acest tutorial YouTube de la Flux vă va învăța cum să vă îndepărtați de alegerea fontului pe baza presupunerilor sau a ceea ce vă spune intestinul. În schimb, veți aborda selecția fontului pe baza utilitarismului. Și veți primi ajutor pentru găsirea turnătorilor de fonturi care furnizează mostre grafice, astfel încât, din nou, nu purtați doar ceea ce vă spune intestinul despre cât de bine va arăta un font.

Nivel de abilități: începător până la mediu

Durată: 1 oră

Cost: gratuit

Asocierea fonturilor este cu siguranță o artă. Deci, dacă veți învăța cum să o faceți, ar trebui să fie de la unul dintre liderii din spațiul de proiectare. Acest ghid de buzunar a fost creat de Tim Brown, șeful tipografiei pentru Adobe Typekit și Adobe Type. Acest ghid vă va învăța cum să determinați ce joburi aveți nevoie pentru a îndeplini fonturile dvs., cum să alegeți un font de ancorare, cum să identificați fonturi care completează ancora și apoi să vă judecați în mod obiectiv împerecherea.

Nivel de abilități: începător

Durata: 10 minute

Cost: gratuit

Acest tutorial simplu de la ThemeIsle vă va oferi două opțiuni pentru schimbarea fonturilor în WordPress. Puteți selecta fonturi web din WordPress Customizer. Sau puteți instala pluginul Easy Google Fonts și puteți seta Google Fonts utilizând Customizer. Deși este inclusă o opțiune bonus, cel mai bine este să folosiți setările universale ale fonturilor WordPress, mai degrabă decât să schimbați fonturile după bloc sau pagină.

Nivel de abilități: intermediar până la avansat

Durata: 11 minute

Cost: gratuit

Edoarda Cavazza a scris acest articol grozav pentru Smashing Magazine, care se ocupă cu utilizarea CSS pentru a îmbunătăți lizibilitatea și accesibilitatea tipografiei site-ului dvs. web. În mod specific, acest tutorial intră în utilizarea spațiului pentru a crea cel mai bun tip de experiență de citire pentru vizitatori. Dacă nu ați aflat încă despre kerning, conducere sau urmărire sau nu aveți o înțelegere de bază a CSS, începeți la începutul acestei liste de tutoriale de tipografie și reveniți la acesta mai târziu.

Nivel de abilități: intermediar până la avansat

Durata: 20 minute

Cost: gratuit

Fonturile variabile sunt un lucru relativ nou, dar câștigă rapid suport la nivel de browser, ceea ce înseamnă că este timpul ca proiectanții și dezvoltatorii să înceapă să le folosească (dacă nu ați făcut-o deja). Așa cum explică echipa Google Developers în acest ghid pentru fonturi variabile, sunt foarte valoroase atunci când vine vorba de performanța site-ului web, deoarece vă permit să salvați diferite variații ale unui font într-un singur fișier. Pentru a afla cum să faceți acest lucru, veți avea nevoie de cunoștințe despre CSS.

Nivel de abilități: începător până avansat

Lungime: 30:14

Cost: gratuit

Acesta este un tutorial interesant, deoarece nu este deloc un tutorial. Pe parcursul a 30 de minute, veți urmări cum The Futur evaluează tipografia utilizată în crearea propriului manual de tipografie. În timp ce evaluează manualul tipărit, este totuși un exercițiu util de urmat, deoarece vă va învăța cum să vă revizuiți propria lucrare și să vă obișnuiți să faceți alegeri mai inteligente pentru tipografia dvs. de la început.

După ce ați petrecut ceva timp cu aceste tutoriale de tipografie și ați avut o bună abordare a elementelor esențiale, este timpul să puneți totul în practică.

Un lucru de reținut este că tipografia, ca orice altceva din design, va evolua în timp. Principiile și liniile directoare fundamentale vor rămâne aceleași, dar în ceea ce privește gusturile oamenilor în tipografie, așteptați-vă să se schimbe.

Așadar, asigurați-vă că, pe lângă stăpânirea elementelor de bază ale tipografiei, veți fi la curent cu tendințele tipografiei.