Dimensiunea fontului utilizat pe o pagină web este mult mai importantă decât v-ați fi așteptat. Destul de frecvent vedem un site web în care textul se vede bine în browser dar pe dispozitive mobile nu. Această problemă apare atunci când dimensiunea fontului nu este stabilită în corespondență cu locul în care va fi afișat textul. Cu toate acestea, o puteți rezolva cu ușurință prin stabilireadimensiunii textului în funcție de dispozitivul pe care va fi afișat și valorile cuprinse într-o scară tipografică.
Ce este o scară tipografică?
O scară tipografică vă ajută să vizualizați dimensiunile, spațiul și proporțiile elementelor unui text. Aceasta include totul, de la stilul textului din paragraful principal până la titluri, subtitluri, subtitrări și orice alt element de text.
Scara tipografică ajută la determinarea dimensiunii și a plasării elementelor dintr-un text, la relația unui față de celălalt. Vă ajută să creați armonie și ritm în design. De asemenea, vă ține departe de probleme stilistice, deoarece elementele de text corespund elementelor CSS. Astfel încât fiecare parte a designului va folosii aceleași elemente de tipografie.
Setați un font și o dimensiune pentru acesta, apoi construiți scara în jurul acestuia. Nu sunteți sigur de unde să începeți? Google are o recomandare utilă:
- Utilizați o dimensiune de bază a fontului de 16 pixeli. Ajustați mărimea fontului în funcție de proprietățile acestuia.
- Utilizați dimensiuni mai mici și mai mari decât dimensiunea de bază pentru a defini scara tipografiei.
- Textul are nevoie de spațiu vertical între caractere. Utilizați înălțimea de linie implicită a browserului de 1,2 em. Vedeți cum să îmbunătățiți textul unui site.
- Restricționați numărul de fonturi utilizate și scara tipografiei.
Creați armonie și ritm între mărimea fontului și textul propriu-zis
O scară tipografică ajută utilizatorii să se deplaseze prin text cu ușurință și creează armonie între ideile principale și cele secundare ale acestuia. Dar, cum începeți să utilizați o scară tipografică pentru a seta mărimea fontului de pe site-ul dvs.?
UX Matters are unele dintre cele mai bune cercetări disponibile cu privire la dimensiunile minime ale textului în funcție de dispozitiv. Cu toate acestea, Steven Hoober recomandă să începeți cu cel puțin 40 la sută mai mare decât minimele recomandate. În plus, stilurile de conținut îmbunătățite pot ajunge cu până la 80 la sută peste minim. Însă, ar trebui să fiți precaut cu caracterele excepțional de mari. Mai jos veți vedea dimensiunile recomandate, exprimate in puncte, pentru textul unui site. Pentru a le convertii in pixel folosiți un convertor online.
| Tip de dispozitiv | Dimensiune minima | Recomandare 40% (ajustată pentru o utilizare ușoară) | 80% maxim (ajustat pentru o utilizare ușoară) |
| Telefon mic | 4 | 5,6 (6) | 7,2 (7,5) |
| Telefon mare | 6 | 8,4 (8,5) | 10,8 (11) |
| Tabletă | 7 | 9,8 (10) | 12,6 (13) |
| Tabletă mare | 8 | 11,2 (11,5) | 14,4 (14,5) |
| Laptop/Desktop | 10 | 14 (14) | 18 (18) |
Cel mai simplu mod de a formata textul unei pagini web este să utilizați procente atunci când stabiliți mărimea fontului. Astfel, odată ce setați dimensiunea în procente textul se va adapta în funcție de dimensiunea dispozitivelor pe care va apărea.
Instrucțiuni privind numărul de caractere și spațierea pe rând a textului
Există și alte reguli la care se uită designerii atunci când vine vorba de scara tipografică. Una dintre regulile de bază a spațierii este reprezentată de numărul caracterelor prezente pe un rând. Mai mult, numărul caracterelor asigură și vizibilitatea textului, astfel:
- Pentru desktop și dispozitivele mari: 60 până la 75 de caractere pe rând.
- Pentru telefoane și dispozitivele mici: 35 până la 40 de caractere pe rând.
Rețineți că vizibilitatea pe ecrane mai mici se bazează pe mărimea fontului mai mare și un număr de caractere mai redus pe rând.
Aceeași idee este valabilă și pentru spațiere. Aveți nevoie de mai mult spațiu între rândurile de text atunci când dimensiunea ecranului este limitată pentru a facilita citirea și scanarea conținutului de către utilizatori. Luați în considerare adăugarea cu 25% mai multă spațiere între linii pe dispozitive mai mici decât pentru tipografia desktop.
Dimensiunea și distanța suplimentară ajută la ameliorarea acelui sentiment de strâns sau adunat pe care utilizatorii îl pot simți atunci când încearcă să citească pe dispozitive mai mici. Deoarece ecranul este mic, fluxul cititorului și vizibilitatea sunt vitale pentru a menține utilizatorii pe pagină.
Crearea unei scări tipografice optime pentru site-ul dvs.
Cea mai bună opțiune este să utilizați un design receptiv cu interogări media. Aceasta este opțiunea designer-dezvoltator care va oferi cel mai mare nivel de control asupra specificațiilor textului.
Opțiunea ușoară este să începeți cu o temă pentru site-ul dvs. Asigurați-vă că optați pentru o opțiune complet receptivă. Când utilizați o temă receptivă de înaltă calitate, majoritatea presupunerilor sunt eliminate pentru dvs. Verificați totul pentru a vă asigura că mărimea fontului pe dispozitivele mobile corespunde standardelor alese pentru respectivul site.
Instrumente utile pentru a crea o scară tipografică
Există o serie de instrumente disponibile pentru a vă ajuta să vedeți impactul vizual al unei scări de tipografie. Iată câteva dintre cele mai bune și mai ușoare de utilizat.
- Type Scale. Introduceți text și jucați-vă cu opțiuni precum dimensiunea, scara și fontul chiar pe ecran. Editați codul direct din instrument.
- Modular Scale. Vă ajută să determinați dimensiunile pentru fontul dvs. Vă permite descărcarea rezultatele ca plugin Sass sau JS ori vizualizarea acestora direct pe ecran.
- LGC Type Scale Calculator. Este instrumentul care optimizează dimensiunea, înălțimea liniei, lățimea și caracterele pe linie folosind raportul de aur al tipografiei.
O scară tipografică potrivită va oferii un aspect elegant și bine gândit designului dvs. Aceasta contribuie la vizibilitatea și utilizarea generală a site-ului prin menținerea unei dimensiuni constante a fontului pe care îl utilizați.