19 Abilități de tipografie Fiecare proiectant ar trebui să știe

Mai mult de 90% din toate informațiile web constau în text. Deși designerii petrec mult timp pentru a decide grafica, interfața și stilul paginii, este necesar un timp egal pentru alegerea tipografiei perfecte. Mai ales când vine vorba de dispozitive mobile, tipografia web-ului mobil necesită o atenție specială, deoarece vine cu 2 provocări majore - spațiu disponibil și dimensiune tipografică. Acest articol va transmite 19 sfaturi de tipografie necesare pentru deblocarea unei interfețe uimitoare impresionante pentru designul dvs. web mobil cu o experiență bogată a utilizatorului.

Dă-i un pic de spațiu

Tipografia mobilă nu se referă la aranjarea literelor pe ecran, ci la aranjarea lor într-un mod care să le facă lizibile utilizatorilor. Utilizați spațiul alb în mod corespunzător și acordați spațiu adecvat între litere, linii și paragrafe, astfel încât utilizatorul să poată citi conținutul în mod corespunzător, fără a fi nevoie să măriți.

Sfat bonus: Kerning

Kerning nu făcea parte din această listă până când nu am înțeles cât de importantă poate fi aceasta din perspectiva designului UI. Știm, așadar, din primul sfat că furnizarea de spațiu este necesară, dar Kerning o ocupă. Kerning este arta de a ajusta spațiul oferit între caractere pentru a face conținutul să iasă în evidență și ușor de citit în același timp. Există 3 tipuri de kerning, pentru care se poate opta.

Deși este vizibil în imaginea de mai sus, mai sunt multe de știut despre diferența dintre aceste tipuri diferite de kerning. Curios? Citește-l de pe acest blog, „Kerning: Don’t Cramp Your Style”.

Dimensiunea corespunzătoare a fontului

Puteți păstra fonturile desktop la o dimensiune de 14px, dar atunci când se face același lucru în mobil, poate rezulta conținut mai mic sau mai mare, în funcție de rezoluția dispozitivului. Verificați dimensiunea fontului pe toate rezoluțiile și utilizați interogări media, astfel încât tipografia rezultată a web-ului mobil să poată fi citită pe toate dispozitivele portabile cu rezoluții diferite.

Folosiți unități de măsură adecvate

Pentru dimensiunea fontului pe web-ul mobil, tipografia nu folosește puncte (pt). În schimb, utilizați ems sau rems. Acest lucru este preferat de majoritatea proiectanților, deoarece aceste unități fac conținutul scalabil, deoarece se bazează pe procent și nu pe orice dimensiune statică.

Alegeți Culori contrastante

Un contrast mai bun asigură o mai bună lizibilitate. În timp ce vă gândiți la culoarea tipografiei web mobile, gândiți-vă la comparația dintre luminos și întuneric. Dacă fundalul paginii este de culoare închisă, utilizați fonturi colorate strălucitoare. De exemplu, fonturile albe pe fundalul negru și invers.

Asigurați o mai bună lizibilitate

Există multe fonturi gratuite și interesante astăzi, dar dacă intenționați să le utilizați în conținutul dvs., ar trebui să verificați fiecare alfabet pentru a vă asigura că familia de caractere și dimensiunea pe care o utilizați fac ca aceste conținut să fie lizibile. Nu are rost să folosiți aceste fonturi cool dacă cititorul nu vă poate înțelege conținutul.

Aliniați textele în mod corespunzător

Alinierea este un factor important atunci când vine vorba de tipografia web mobilă. Creierului uman îi place să citească textul în blocuri pe ecran mic. De obicei, textele sunt aliniate la stânga ceea ce înseamnă că există o margine zdrențuită în partea dreaptă a blocului. Reglați-l corect și asigurați-vă că dacă utilizați alinierea „justificată”, nu rezultă un spațiu alb care nu este consecvent.

Setați conducerea

Tipografia în rețeaua web mobilă necesită o conducere constantă (spațiul dintre linii). Când este prea mic, într-un conținut mare, sfârșitul unei linii și începutul următoarei este dificil de urmat. Dacă este prea mare, rezultă spații de alb inutile. Asigurați-vă că nu întrerupeți curgerea lină a unei linii.

Găsirea locului tău dulce

Toate fonturile au un loc dulce. Combinația dintre dimensiunea fontului și cea mai importantă în care acestea asigură cea mai bună lizibilitate și mai puțină denaturare cauzată de anti-aliasingul implicit al browserului. Experimentează tipografia folosită și găsește acel loc dulce.

Utilizarea spațiului alb

Spațiile albe sunt adesea utilizate. În cazul CTA-urilor sau legăturilor cu clic, utilizați spațiu alb, astfel încât să poată fi distinse și făcute clic pe index sau thumb. Întrucât utilizatorul nu folosește un mouse ca într-un desktop, degetul mare sau indexul este considerat a fi cursorul, care are o grosime de aproximativ un milimetru. Gândiți-vă la asta și utilizați spațiile albe în mod eficient.

Luați lățimea ecranului în cont

În timp ce proiectați tipografia pe web-ul mobil, trebuie să vă gândiți la modul în care oamenii citesc texte. De obicei, există 2 tipuri de lățime într-un dispozitiv mobil, vertical și orizontal. Prin urmare, în timp ce proiectați tipografia, luați în considerare ambele lățimi și setați alinierea și distanțarea în consecință.

Faceți tipografia dvs. distinctă

Tipografia paginii tale web mobile ar trebui să aibă o caracteristică distinctă, fie prin aspect, fie prin culoare sau efecte suplimentare. Mai ales, în conținuturile pe care doriți să le citească utilizatorii, alegeți cu atenție tipografii pentru rubricile care îi fac să iasă în evidență de restul.

Verificați scalarea și proporțiile

Verificați conținutul în diferite dispozitive mobile de diferite rezoluții. De asemenea, măriți și măriți pentru a vă asigura că tipografia dvs. web mobilă se scalează și se potrivește cu întreaga lățime a ecranului. Răspunderea conținutului dvs. este o necesitate și trebuie să îl testați și să scrieți interogări media în cazul în care există vreo perturbare pentru o anumită rezoluție.

Ia funcționalitate în cont

Există multe elemente de text pe un site web mobil care permite utilizatorului să efectueze anumite acțiuni, cum ar fi să trimită un mesaj sau să facă un apel. Tipografia web-ului mobil ar trebui să fie proiectată cu atenție pentru a se asigura că utilizatorii înțeleg că un anumit text este de fapt un CTA sau execută o anumită funcționalitate.

Textul paginii este greu?

Dacă pagina dvs. este grea din punct de vedere al textului, cum ar fi un blog sau un articol de știri, este foarte mică interacțiune. Scopul principal al utilizatorului este să citească, să se asigure că tipografia web-ului mobil este proiectată în consecință.

Este interacțiunea paginii-grea?

Dacă pagina dvs. implică mai multe acțiuni de transfer și clicuri, împreună cu tastarea, editarea etc., ajustați textele în consecință. Asigurați-vă că dimensiunea fontului nu este mai mică de 18px, astfel încât utilizatorii să înțeleagă că se presupune că o anumită acțiune se întâmplă odată ce fac clic sau plasați pe text.

Design web responsiv

Așa cum am menționat anterior, pixelii trebuie evitați în timpul tipografiei web-ului mobil. Au un standard cu dimensiuni fixe. Folosiți în schimb em sau rem. Se bazează pe procente și scalabile. Când conținutul este vizualizat pe un dispozitiv mobil cu rezoluție diferită, acestea își ajustează dimensiunea în consecință. Nu uitați, conținutul textului paginii dvs. web responsive trebuie să fie scalabil și să ajusteze dimensiunea lor automat în funcție de lățimea ecranului. Puteți utiliza LambdaTest pentru a efectua testarea receptivă. Cu un singur clic, puteți verifica receptivitatea site-ului dvs. la peste 44 de dispozitive mobile cu diferite rezoluții.

Asocierea mai multor fonturi

În timp ce proiectați tipografia de web mobil, puteți combina diferite fonturi pentru titlu și paragraf, etichete etc. Dar asigurați-vă că acestea se potrivesc între ele. Amestecarea algerianului pentru titlu și comic fără MS pentru un alineat este o idee proastă.

Greutate font: grele sau ușoare?

Fonturile mobile sunt relativ mai mici în comparație cu desktopurile. Trebuie să aveți grijă pentru a le face lizibile sau făcute clic atunci când implică funcționalitatea lor. Cheia pentru a decide greutatea fontului este experimentarea. Deși în prezent, tipografia îndrăzneață și mare pentru web-ul mobil este o tendință, ar trebui să utilizați mai multe greutăți de fonturi și să testați aplicația prin diferite rezoluții pentru a vă asigura că nu există nicio perturbare nicăieri.

Păstrați fundalul în minte

Dacă fundalul este static și monocromatic, așa cum am menționat anterior, puteți utiliza culori de font cu contrast opus. Dar când fundalul este o imagine sau un videoclip, alegerea ideală ar fi experimentarea cu diferite culori și verificarea careia se potrivește corect și face conținutul lizibil.

Tipografia este o ambarcațiune delicată. Designerii își petrec adesea o viață în accentuarea abilităților tipografice. Cu fiecare nouă tipografie care aduce o nouă provocare, suntem siguri că sfaturile de tipografie mobilă menționate mai sus vor fi utile data viitoare când proiectați o nouă pagină web mobilă. De asemenea, nu uitați să efectuați teste de compatibilitate cu browserul pentru a vă asigura că tipografiile sau stilurile pe care le utilizați funcționează corect în toate browserele. LambdaTest poate fi utilizat pentru a efectua teste de compatibilitate a browserului pe mai mult de 2000 de browsere diferite și versiunile lor. Asigurați-vă că tipografia este acceptată pe toate browserele necesare și prezentați-le utilizatorilor dvs. experiența bogată a utilizatorului pe care o merită.

Publicat inițial la LambdaTest

Scris inițial de Arnab Roy Chowdhury

Citire ulterioară ...

Dacă vă place postarea, vă rugăm să aplaudați și să îi ajutați și pe alții să o găsească.