Dimensiunea fontului pe site-ul web cu design responsive?

În acest articol, vom alege dimensiunea fontului pe care să o utilizăm în website la afișarea pe dispozitivele mobile.
Tudor Ciobanu
19 noiembrie, 2020

· 6 minute pentru a citi

Alegerea dimensiunilor fontului pentru un site mobil nu este o știință exactă. În schimb, vă pot oferi câteva îndrumări (cu explicații) pentru a vă ajuta în propriul proces de proiectare.

Fonturile conținutului trebuie să aibă aproximativ 16 px

comparația Proxima Nova vs. Caslon vs. Futura la dimensiunea 16px

Înțelegând că diferite fonturi pot fi mai mult sau mai puțin lizibile având aceeași dimensiune, 16 px este o alegere bună pentru a începe atunci când alegeți dimensiunea implicită a fontului mobil. Prin „implicit” sau „principal”, mă refer la dimensiunea la care sunt setate majoritatea paragrafelor, etichetelor, meniurilor și listelor. (Să presupunem că ați ales deja un font – și aveți o justificare bună pentru a face acest lucru)

În cele din urmă, doriți ca textul website-ului afișat pe telefonul mobil (atunci când este ținut la o distanță naturală) să fie la fel de lizibil ca textul dintr-o carte bine tipărită (atunci când este ținut la o distanță naturală – de obicei puțin mai îndepărtată).

Un proces pentru a atinge acest obiectiv:

  1. Începeți cu 16 px
  2. Luați în considerare micșorarea fontului dacă aveți o pagină cu interacțiuni sau un font cu caractere deosebit de mari, ușor de citit (cum ar fi Proxima Nova).
  3. Pe de altă parte, sunteți mult mai liber în explorarea dimensiunilor mai mari de 16 px, și mai ales dacă aveți o pagină plină cu text-grea sau (B) un font care este foarte dificil de citit la dimensiunea dată (cum ar fi Futura).

Deși există o oarecare subiectivitate la cea mai bună dimensiune a fontului principal de utilizat pe pagină, următoarea regulă este mai obiectivă și mai argumentată.

Dimensiunile de introducere a textului trebuie să fie de cel puțin 16 px

Asta e important. Dacă proiectați un site web sau o aplicație care poate fi vizualizat pe dispozitive mobile, există doar o regulă strictă: utilizați o dimensiune a fontului de introducere a textului de la cel mai puţin 16px .

Dacă casetele pentru text a formularelor au o dimensiune mai mică a fontului, browserele iOS vor face zoom spre textul mic, ascunzând adesea o parte din conținut, forțând utilizatorul să micșoreze manual după utilizarea casetei de text.

Vi s-a întâmplat așa ceva sau nu ?:

Browserul mobil se apropie de dimensiunea fontului sub 16px
Animația este oferită de Ste Grainer . Puteți citi articolul său despre fenomenul de zoom automat aici .

Acesta este un motiv puternic pentru a face dimensiunea fontului principal de 16 px sau mai mare, de asemenea. Poate părea ciudat să ai un text de control al formei mai mare decât textul de paragraf ☝️

Textul secundar ar trebui să fie cu aproximativ 2 dimensiuni mai mic decât textul paragrafelor

Pentru textul secundar  – cum ar fi etichete mai mici, subtitrări etc. – utilizați o dimensiune cu câteva unități mai mici – cum ar fi 13 px sau 14 px. NU recomand să coborâți cu o singură dimensiune a fontului, va fi prea ușor să-l confundați cu textul normal. În plus, atunci când textul este mai puțin important, doriți să îl stilizați astfel încât să comunicați clar importanța mai mică – folosind adesea, să zicem, o nuanță mai deschisă de gri.

Verificați întotdeauna proiectele dvs. pe un dispozitiv real

Standardul de aur al alegerii dimensiunilor fonturilor mobile este de a vizualiza proiectele pe un dispozitiv real. Nu pot recomanda această practică suficient de mult, deoarece un design de aplicație mobilă se simte pe ecranul laptopului este mult diferit decât atunci când îl ții în mână. Ca designer începător, am fost șocat aproape de fiecare dată când am deschis pe mobil o pagină pe care am proiectat-o ​​pe desktop. Dimensiunile fontului, spațiere … totul era nepotrivit. Așadar, utilizați Sketch Mirror sau Figma Mirror sau orice altă aplicație are sens pentru dvs., dar vizualizați proiectele pe dispozitiv mobil.

Familiarizați-vă cu stilul Material Design și cu standardele iOS

Nu strică niciodată să știi ce fac cele mai mari sisteme de proiectare din oraș. De exemplu:

  • Dimensiunea implicită a fontului Material Design este 16px Roboto și dimensiunea secundară a fontului este 14px (mai multe despre stilul Material Design)
  • Dimensiunea implicită a fontului iOS este de 17 px SF Pro și dimensiunea secundară a fontului este de 15 px (mai multe despre stilul iOS)

Trebuie să le copiați? Nu, dar nu strică niciodată să ai o linie de bază cu care să compari.

16 px – minim absolut pentru textele lungi

Pentru paginile cu mult text, doriți dimensiuni mai mari de caractere. Dacă oamenii citesc texte lungi pe paginile site-ului tău, fii drăguț: nu-i face să-și încordeze ochii. Deci, fiecare font este diferit, chiar la aceeași dimensiune, dar oricum:

  • 16 px – minim absolut pentru paginile cu conținut ridicat de text
  • 18 px – o dimensiune mai bună a fontului pentru a începe.
  • 20px și mai mare – s-ar putea simți ciudat de mare la început, dar merită întotdeauna încercat în aplicația dvs. de design. Cel mai bine aranjat site de pe Internet, Medium.com, are o dimensiune implicită a textului articolului de 21 px.

14 px pentru paginile cu interacțiune

Pentru paginile cu interacțiune, dimensiunile mai mici ale textului sunt perfect acceptabile. De fapt, în funcție de cantitatea de date pe care o ia utilizatorul deodată, chiar și textul de 18 px este incomodabil de mare. Uită-te la căsuța de e-mail (web), uită-te la Twitter, uită-te la orice aplicații pe care le folosești care necesită citire, uită-te la aplicații care îți arată date – vei fi greu să găsești paragrafe susținute de text de 18 px. În schimb, 14px-16px este norma. Dar nu va exista o singură dimensiune a fontului. Probabil vor exista dimensiuni mai mici pentru lucrurile mai puțin importante și dimensiuni mai mari pentru cele mai importante lucruri (titluri și subtitrări și sub-subtitrări etc.) și totul va fi amestecat într-o cașă mare.

Cât de puține dimensiuni de fonturi sunt posibile

Una dintre cele mai mari greșeli de tipar de la designerii UI începători este de a folosi de prea multe dimensiuni de font. Chiar și cele mai complicate pagini de interacțiune pot arăta de foarte bine, cu aproximativ 4 dimensiuni de fonturi în total.

Să o descompunem:

  1. Dimensiunea fontului titlului. Aceasta este cea mai mare dimensiune a fontului de pe pagina dvs. Folosiți-l pentru titlul paginii sau al secțiunii. Dacă aveți atât titluri, cât și titluri de secțiuni, ar trebui să folosiți cu siguranță două dimensiuni diferite aici.
  2. Dimensiunea implicită a fontului. Aceasta este cea mai comună dimensiune a fontului pe pagina dvs. și ar trebui să fie utilizată pentru tot textul site-ului – precum și pentru majoritatea controalelor, cum ar fi casetele de text, meniurile derulante, butoanele și meniurile. Eroarea cheie pe care o fac designerii aici este aceea de a folosi mai multe dimensiuni de font pentru elemente care ar trebui să aibă toate o dimensiune de font.
  3. Dimensiunea fontului secundar. Aceasta este o dimensiune a fontului – de obicei cu aproximativ 2 unități mai mici decât dimensiunea implicită a fontului – pe care o utilizați pentru detalii mai puțin importante ale site-ului. Informații și elemente de sprijin, uneori subtitrări etc.
  4. Dimensiunea fontului terțiar / subtitrare / etichetă / wildcard . De foarte multe ori veți avea nevoie de încă o dimensiune a fontului. Uneori se datorează faptului că informațiile dvs. sunt atât de ierarhice încât aveți nevoie de un stil terțiar chiar mai redus decât stilul secundar. Alteori, puteți utiliza majuscule pentru etichete sau butoane – și datorită greutății vizuale crescute a majusculelor, doriți să utilizați o dimensiune puțin mai mică pentru textul însuși. Așadar, această a patra dimensiune a fontului este un fel de moft. Nu orice design are nevoie de el, dar mulți o fac.

Singurul meu avertisment: pe cât e posibil, păstrați consistența.

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on email

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *