Există multe dimensiuni diferite ale ecranului. Și trebuie să vă asigurați claritatea textului pe cele mai mici și cele mai mari ecrane. De exemplu, folosind dimensiunea fontului HTML.
Asigurați-vă că dimensiunea fontului este potrivită pentru orice dispozitiv
Există mai multe moduri de a face acest lucru:- Instalați o temă / un șablon adaptiv;
- Folosirea cererilor de proiectare adaptabila / media (CSS);
- Dezvoltarea diferitelor versiuni ale site-ului.
1. Achiziționarea unei teme sau a unui șablon adaptiv
Google recomandă un design adaptabil. Cu ajutorul unei teme adaptabile, problema cu dimensiunile fontului va fi rezolvată.
2. Utilizarea interogărilor media / Design adaptiv
Dacă aveți experiență cu CSS. și nu vă este frică să învățați cum să gestionați, astfel încât textul să fie ușor de citit pe orice dimensiune a ecranului.
Cum funcționează dimensiunea fontului
Dimensiunea fontului stilului HTML este declarată într-un fișier CSS. Dacă dimensiunea fontului nu este declarată, browserul va utiliza valoarea implicită, care este de obicei 16 pixeli.
În CSS, setarea dimensiunii fontului este după cum urmează:
Pentru dimensiunea fontului, puteți utiliza diferite unități de măsură: pixeli (px), puncte (pt), em și procente (%).
Când vine vorba de alegerea unui font și a unui design adaptabil, Google recomandă următoarele:- Utilizați dimensiunea fontului de bază - 16 pixeli în CSS. Ajustați alte dimensiuni, după cum este necesar, utilizând proprietățile fontului;
- Pentru a determina scala tipografică, utilizați dimensiunile relative la scara de bază;
- Pentru text, trebuie să specificați un spațiu vertical între caractere. Recomandarea generală este să utilizați înălțimea liniei de 1.2 em. care în mod implicit este utilizat de browsere;
- Utilizați un număr limitat de fonturi și scale tipografice.
Utilizați dimensiunea fontului de bază a CSS la 16 pixeli
Această recomandare spune că dimensiunea fontului pentru pagină ar trebui declarată în mod explicit - 16 px. Aceasta înseamnă că trebuie să utilizați valoarea dimensiunii fontului HTML CSS. care stabilește dimensiunea fontului la 16 pixeli pentru întreaga pagină. Acest lucru se face de obicei prin elementul "body" sau "html".
Pentru a determina scala tipografică, utilizați dimensiuni relative la dimensiunea de bază
Acum, că avem o dimensiune a fontului de bază pentru întreaga pagină, trebuie să setăm alte dimensiuni ale fontului la elementele H1. H2, etc. afișat mai mult decât cel de bază.
În imaginea de mai sus, dimensiunea fontului HTML pentru H1 este declarată ca fiind "250%". Textul H1 va fi de două ori și jumătate mai mare decât cel de bază în 16 pixeli. Aceasta este "mărimea relativă". Datorită acestui lucru, ori de câte ori declarăm dimensiunea fontului, acesta va fi întotdeauna setat de mai multe ori mai mare, mai mic sau cu aceeași dimensiune ca și fontul de bază:
Acest lucru asigură că indiferent cât de mare este o pagină afișată pe ecran, raportul dimensiunii fontului va rămâne întotdeauna același. De exemplu, dimensiunea fontului H1 va fi întotdeauna de două ori și jumătate mai mare decât fontul de bază. Acest lucru va asigura, de asemenea, inteligibilitatea textului pe ecrane mobile sau mici.
Pentru text, trebuie să specificați un spațiu vertical între caractere și, probabil, pentru fiecare font trebuie să fie ajustat:
Un alt aspect important al lizibilității fonturilor este spațiul dintre liniile de text. În CSS, această proprietate se numește "line-height".
Google recomandă utilizarea înălțimii liniei 1.2. care este utilizat în mod implicit în browsere. Aceasta înseamnă că distanța dintre liniile de text va fi de 1,2 ori mai mare decât dimensiunea fontului stilului HTML.
Pentru a face acest lucru, trebuie să declare înălțimea liniei în CSS:
Probleme cu listele de link-uri
Pentru link, aveți nevoie de mai mult spațiu pe ecranele dispozitivelor mobile. Aceasta poate fi o problemă atunci când link-urile sunt plasate în liste numerotate sau cu marcatori.
Pentru a rezolva această problemă, încercați:
Utilizați un număr limitat de fonturi și scale tipografice
Cum se poate face un font lizibil pe orice dispozitiv
Dimensiunea textului este controlată de solicitările media care sunt publicate pentru diferite dimensiuni ale ecranului. Putem spune că pentru dispozitivele mobile se stabilește o mărime de text, iar pentru calculatoarele staționare un altul.
Luați în considerare un exemplu de interogare media care stabilește dimensiunea fontului.
Acest font va fi pe deplin citit pe toate tipurile de dispozitive. Mai ales dacă urmați toate recomandările de mai sus.
Problemele pot apărea atunci când stilurile sunt setate astfel încât pe dispozitivele staționare fontul să fie mai mic. În acest caz, pe dispozitivele mobile acest text va fi și mai mic:
În această situație, va trebui să modificați solicitarea mass-media. În primul exemplu, dimensiunea fontului stilului HTML a fost aceeași (100%) pentru computerele staționare și dispozitivele mobile.
Luați în considerare o interogare media care va specifica text mai mic, dens pentru PC, dar mai ușor de citit pentru ecrane mai mici.
Acest cod determină faptul că textul trebuie să aibă o dimensiune a fontului de 90% din dimensiunea implicită pentru computerele staționare. Dar pe dispozitive mobile dimensiunea va fi de 110%:
Aceasta înseamnă că textul va fi ușor de citit pe ecrane de diferite dimensiuni.
3. Crearea diferitelor versiuni ale site-ului
Traducerea articolului "Utilizarea dimensiunilor lizibile ale caracterelor" a fost pregătită de echipa prietenoasă a proiectului Saitostroenie de la A la Z.
Articole similare
Trimiteți-le prietenilor: