Cum alegi font-ul și mărimea textului site-ului tău – Typography

Un font ales cu atenție aduce multe avantaje. Textul dintr-un site captează foarte multă atenție. Dacă textul este ușor de citit, ai mai multe șanse ca utilizatorii să consume toată informația. Nu trebuie să fii designer web ca să îmbunătățești lizibilitatea site-ului tău, uite câteva sfaturi.

Statistici și informații pe care le-am găsit relevante și trebuie luate în calcul în alegerea fontului și a dimensiunii acestuia:

1. La 40 ani, în retină mai ajunge doar 50% din lumina care ajunge la 20 ani, iar la 60 ani, doar 20%, adică vederea scade considerabil
2. Oamenii stau la o distanță de 40-50 cm față de monitor, e distanța la care se poate citi foarte bine, iar ochii nu se simt obosiți.
3. Dimensiunea de 16 pixeli a textului este aproximativ egală cu cea a textului unei cărți citită de la o distanță obișnuită.
4. Cel puțin 1 din 10 cititori are probleme cu ochii, iar alți câțiva au probleme în citirea unui text mai mic de 16px. Deseori, nu îți dai seama că citești cu greutate un text, dar de câte ori te-ai apropiat de ecran pentru a citi mai bine?
5. Font-ul este în top 3 lucruri pe care un cititor obișnuit le analizează la un site, pe lângă culori și imagini.
6. Niciodată nu strică spațiul alb, ajută mult la concentrarea atenției pe text.
7. Text-align justify a apus de mult, aliniază la stânga.

Font Family

Nu folosi mai mult de 3 fonturi în site, chiar și 3 sunt multe. Fontul principal trebuie să fie simplu, iar fontul titlurilor de obicei e diferit și iese în evidență.

Click pe imagini pentru mărire

Infografic aparținând Designmantic.com

Google Fonts ar trebui să fie suficient pentru găsirea unor fonturi plăcute, în concordanță cu orice design. E foarte ușor de folosit și simplu de integrat în orice site. Fiecare font trimite și un mesaj în subconștient, care te poate ajuta să transmiți o anumită emoție și să construiești o identitate în jurul unui brand. Trebuie să alegi un font care se potrivește cu mesajul pe care vrei să îl transmiți, tu sau brandul tău, și care se potrivește audienței și cititorilor tăi.

Infografic aparținând crazyegg.com

Cum poți testa dacă un font e potrivit? Roagă 2, 3 cititori să se cronometreze citind articole cu fonturi diferite.

Font size

1pt = 1.33px – cele mai populare două unități de măsură pentru font-size.

10px este inacceptabil, 12 pixeli este prea mic, 15 pixeli cauzează probleme, 16 px e minimul ideal, eu folosesc 18px, iar 22px este maxim (în funcție de font, poate fi prea mare) . Ține cont că nu e ok să obligi cititorul să dea zoom-in sau zoom-out, în plus e posibil ca unii să nu știe cum să o facă. O variabilă foarte importantă atât în alegerea fontului cât și în alegerea dimensiunii acestuia este reprezentată de dimensiunea spațiului dedicat textului.

Optim, un rând ar trebui să conțină 10-12 cuvinte, adică 50-80 de caractere. Mai multe caractere pe rând produc confuzie, mai puține caractere sunt obositor de citit. Fiecare font se comportă în felul său la schimbarea dimensiunii sau la boldare. Vezi de la caz la caz.

De ce Facebook încă are fonturi de 14px și 12px? Nu pot să îmi explic și am întâlnit multe persoane care dau zoom-in, dar bănuiesc că dimensiunile pot fi mărite și de undeva de prin setări.
Citești acest articol scris cu fontul Open Sans de 18px. Open Sans este unul dintre cele mai uzuale fonturi care are diacritice, un subiect sensibil pe care îl voi trata într-un articol diferit.

Ce se schimbă pe mobile?

Trebuie să fii atent la proporțiile textului pe telefoanele mobile, distanța de la telefon la ochi este mult mai mică decât cea de la monitor la ochi. Ecranul este mult mai îngust, spațiul pentru text este limitat. Totul trebuie adaptat. Font-size-ul ideal și maxim pentru mobil e undeva la 16px. Textul principal nu prezintă nicio diferență în acest caz, dar titlurile trebuie să scadă în dimensiune, iar un titlu h1 de 48px ajunge pe mobil la maxim 32px.

Da, un text poate avea dimensiuni diferite în funcție de rezoluția pe care e citit. Tabele foarte utile cu informații pentru adaptarea textului pe dispozitivele mobile găsiți aici.

Typography

E vorba de combinația perfectă dintre toate cele menționate mai sus, font-family, font-size, distanța dintre caractere, distanța dintre rânduri, dintre paragrafe, dintre titluri, numărul de cuvinte pe rând, etc

Ca să nu mergi la ghici, încearcă acest tool care folosește rația de aur (golden ratio) pentru a afla care este științific dimensiunea fontului care te avantajează, bazat fie pe font-size-ul dorit, fie pe lățimea spațiului dedicat textului.

Un mod ușor de a identifica informații despre fontul folosit de un anumit site este prin instalarea și folosirea extensiei What font pentru Chrome.

Fun fact

Fraza „The quick brown fox jumps over the lazy dog” conține toate literele alfabetului, o veți găsi ca demo la majoritatea fonturilor.

Concluzie

Alegerea fontului și a tipografiei este unul dintre acele mici detalii care poate conta enorm în evoluția unui site și a unui brand. În cazul în care ai și materiale printate, ideal ar fi să folosești același font sau măcar ceva foarte asemănător pentru a crea o unitate între online și offline. Tu cum stai cu fonturile?