7 sfaturi rapide CSS pentru a îmbunătăți lizibilitatea unui site web
Publicat: 2020-08-24Fiecare site web necesită conținut textual pe care un vizitator îl poate citi și analiza. Acest conținut poate fi sub forma unui blog, articol sau conținut ușor de înțeles pe site, care explică diferite zone ale site-ului. Un vizitator pe un site citește anumite lucruri pe site în funcție de cerințele lor. Dar el sau ea poate citi conținutul numai atunci când textul de pe site este lizibil și ușor de citit. Fără lizibilitate, site-ul este doar o colecție de imagini, link-uri și alte elemente web. Prin urmare, indiferent cât de lungă sau scurtă este, conținutul site-ului ar trebui să fie suficient de lizibil. În calitate de dezvoltator web, ar trebui să știți ce tip de fonturi aveți nevoie sau ce fel de aliniere a spațiului este necesar. Acești parametri joacă un rol esențial care decide modul în care apare conținutul textual și se descompune pe o pagină web.
În zilele noastre, dezvoltatorii web folosesc CSS pentru a proiecta totul pe un site web, de la aspectul său, fonturile și fețele de font. Aici, acest blog se concentrează pe anumite sfaturi și trucuri CSS pe care le puteți urma pentru a menține și a îmbunătăți lizibilitatea site-ului web în timp ce utilizați CSS.
1. Unități:
Există diverse unități disponibile care vă ajută să gestionați dimensiunea fontului dintr-o bucată de text. Trebuie să înțelegeți care unitate este utilă în funcție de secțiunea de text de pe site-ul sau paginile dvs. web. Aceste unități pot fi determinate după ce înțelegeți cum doriți să definiți structura paginii web și alinierea textului pe aceasta. De asemenea, trebuie luați în considerare factori precum dimensiunile dispozitivului de vizualizare și preferințele cititorului. Prin urmare, când credeți că unitățile specifice fontului, em și rem sunt alegerile perfecte pe care vă puteți baza. Puteți utiliza ems pentru a defini setările marginii verticale în cadrul paragrafelor atunci când dimensiunea textului tinde să se schimbe. Dar tinde să creeze un blocaj dacă un font serif este înlocuit cu un font sans-serif într-o secțiune selectată. Mai mult, fonturile cu aceeași dimensiune pot apărea diferite pe măsură ce familiile lor se schimbă. În general, dimensiunea alfabetului minuscul „x” se referă la dimensiunea celorlalte caractere.
Când folosim CSS pentru a gestiona aspectul site-ului nostru, putem lua în considerare proprietatea „font-size-adjust” și putem reda fonturile de aceeași dimensiune. Din acest motiv, înălțimile caracterelor se pot potrivi până la înălțimea literelor mici. Puteți folosi acest fragment de cod pentru a vă asigura de factorii menționați mai sus:
@supports(ajustarea mărimii fontului: 1;)
{
Articol{
Ajustarea mărimii fontului: 0,5;
{
}
2. Înălțimea liniei:
Zona albă dintre textul negru definește tipografia, iar acest lucru este aplicabil atunci când suntem pe cale să proiectăm un site web sau o aplicație web. Ar trebui să acordăm multă atenție atunci când luăm în considerare înălțimea liniei, marginile și rupturile de linie. Puteți determina dimensiunea fontului pentru a optimiza înălțimea liniei depinzând de valoarea înălțimii x. În mod implicit, browserele furnizează înălțimea liniei ca 1,2, care este o valoare fără o unitate specifică. Această valoare este valoarea corectă pentru fonturile Times New Roman, dar nu se aplică în mod similar altor fonturi. Spațierea între linii nu crește liniar cu dimensiunea fontului și depinde de parametri precum tipul textului. Pentru conținutul de formă lungă, au fost testate fonturi specifice cu dimensiuni cuprinse între 8 și 14. Și acest lucru ne-a arătat că raportul dintre înălțimea x cu spațierea liniilor scade la 37,6. Aceste teste au fost efectuate pentru conținutul de formă lungă imprimat pe o bucată de hârtie.
Când luăm în considerare dispozitivele mobile sau ecranele altor dispozitive, am observat că conținutul de pe dispozitiv necesită o spațiere corectă între liniile textului. Prin urmare, pentru conținutul digital, raportul este menținut la 32. Cu CSS, puteți defini această valoare sub forma unui fragment de cod, după cum urmează:
P{
Înălțimea liniei: calc(1ex/0,32);
}
Acest cod vă permite să aveți o valoare optimă, indiferent dacă fontul provine din familia de fonturi sans-serif sau serif. Aceeași valoare este relevantă atunci când instrumentele legate de tipografie nu sunt disponibile.
3. Definiția scalei:
În subtitrările anterioare, am ajustat dimensiunea fonturilor și am folosit valori pentru a determina înălțimea liniei. Mergând mai departe, trebuie să determinăm scara tipografică pentru a pune cantitatea potrivită de spațiere între paragrafe atunci când luăm în considerare conținutul de formă lungă. După cum am stabilit deja, spațiul liniilor nu crește într-o formă liniară, dar este supus variației în funcție de structura textului. Când luăm în considerare titlurile cu dimensiuni uriașe de font, trebuie să avem un raport mai mare înălțime linie. Putem defini acest lucru folosind următorul cod CSS:
articolul h1
{
dimensiunea fontului: 2,5 em;
line-height: calc(1ex / 0,42);
marja: calc(1ex / 0,42) 0;
}
articolul h2
{
dimensiunea fontului: 2em;
line-height: calc(1ex / 0,42);
marja: calc(1ex / 0,42) 0;
}
articolul h3
{
dimensiunea fontului: 1,75 em;
line-height: calc(1ex / 0,38);
marja: calc(1ex / 0,38) 0;
}
articolul h4
{
dimensiunea fontului: 1,5 em;
line-height: calc(1ex / 0,37);
marja: calc(1ex / 0,37) 0;
}
articolul p
{
dimensiunea fontului: 1em;
line-height: calc(1ex / 0,32);
marja: calc(1ex / 0,32) 0;
}
Codul de mai sus vă ajută să setați înălțimea liniei în funcție de dimensiunea fontului în ceea ce privește titlurile. Mai mult decât atât, conținutul de formă lungă poate beneficia și de acest fragment de cod.
4. Spațierea cu litere și cuvinte:
Când lucrăm cu probleme de lizibilitate, nu ar trebui să uităm de persoanele care au dislexie și au alte dificultăți de învățare și provocări. Cercetările în jurul dislexiei de dezvoltare sunt încă în studiu, care afectează grav capacitatea de citire. Atunci când decideți factorii menționați mai sus, ar trebui să luați în considerare întotdeauna aceste studii științifice. Tipografia dvs. poate determina efectele și consecințele modului în care cititorii vă citesc conținutul.
A existat o dovadă clară care demonstrează că formele de glif cu niveluri ridicate de fonturi de lizibilitate nu ajută la citire, dar distanța dintre caractere ajută. Prin urmare, ar trebui să oferim paginilor web instrumentele care vă permit să măriți sau să micșorați distanța dintre caractere și să modificați dimensiunea fonturilor pentru a îmbunătăți lizibilitatea. Ar trebui să acordați atenție faptului că aceste controale ar trebui să mărească dimensiunea dintre caractere pe măsură ce dimensiunea fontului crește. La fel se întâmplă și cu scăderea dimensiunii fontului. Vă puteți concentra pe spațierea dintre litere și pe spațierea cuvintelor folosind „spațierea literelor” și „spațierea cuvintelor” în fragmentele de cod CSS.
Dar atunci când utilizați „spațiere între litere”, nu ia în considerare condițiile și tinde să rupă kerningul fonturilor. Acest lucru duce la redarea spațiilor neoptimale pe pagina web. Pentru a face față acestui dezavantaj, putem folosi fonturi variabile pentru a controla modul în care sunt redate fonturile pe pagina web. Designerii fonturilor ar trebui să parametrize spațierea într-o variabilă. Acest lucru ajută la determinarea greutății fontului și a formei glifului care se poate scala în funcție de obiceiurile în schimbare ale cititorului.
5. Lățimea și alinierea:
Într-un format de text digital, lățimea unui paragraf este definită ca numărul de caractere și spațierea pe linie. Un ochi uman este folosit pentru a citi în jur de șapte până la opt litere atunci când începe să citească o bucată de text. Mai mult, un ochi uman nu poate reuși să citească decât câteva repetări care apar consecutiv. Prin urmare, rupturile de rând în orice parte a scrisului sunt esențiale. Trebuie să luați în considerare modul în care focalizarea cititorului se mișcă în timp ce citiți o bucată dintr-un text. Se desfășoară de la sfârșitul liniei până la începutul rândului următor al textului. Prin urmare, menținerea unui anumit număr de caractere în funcție de tipul de text este esențială. În general, un paragraf conține rânduri care conțin 60 până la 70 de caractere într-un singur rând. Unitatea „ch” este folosită pentru a seta această valoare în timp ce atribuiți lățimea paragrafului folosind CSS. Următorul cod în CSS definește valoarea „ch”:
P
{
Latime: 60ch;
Lățimea maximă: 100%;
}
Justificarea textului este, de asemenea, crucială atunci când avem de-a face cu paragrafe. Asistența privind separarea prin silabe nu este optimă atunci când browserele se schimbă. Prin urmare, ar trebui verificat cu mult înainte. Dacă asistența pentru separare prin silabe nu este disponibilă, ar trebui să evitați să justificați textul, deoarece spațiul orizontal ar fi un obstacol în timp ce citiți. Vă oferim codul CSS atunci când suportul pentru separarea în silabe este disponibil și indisponibil:
/* în cazul în care este disponibilă separarea prin silabe:*/
p[lang="ro"]
{
text-align: justificare;
cratime: auto;
}
/*Cod CSS atunci când nu aveți suport pentru silabe*/
p[lang="it"]
{
text-align: stânga;
cratime: niciuna;
}
Limbile care nu vin cu suport nativ pot avea silabe manuale. Puteți utiliza diverse părți de server și de client pentru a injecta „‐” factor. Acest lucru indică unde poate permite ca jetonul să fie spart. Acest caracter este invizibil, cu excepția cazului în care este plasat la sfârșitul rândului, unde este afișat sub forma unei cratime. Pentru a folosi acest lucru, trebuie să setăm parametrii „cratime: manual CSS”.
6. Contrastul primului plan:
Cel mai fundamental factor de luat în considerare atunci când vine vorba de lizibilitate este contrastul de culoare dintre fundal și culoarea selectată a fontului. WCAG, cunoscut și sub numele de Ghid de accesibilitate a conținutului web, are o listă specială de linii directoare predefinite pentru diferite standarde. Acesta definește contrastul corect de culoare necesar între fundal și textul aplicației web sau al unui site web. Puteți calcula contrastul folosind diverse instrumente disponibile atât pentru proiectare, cât și pentru dezvoltare. Există validatoare automate disponibile pe piață, dar nu funcționează la fel de precis ca testul real.
Când folosim CSS pentru a defini contrastul de culoare, putem folosi o declarație „calc” pentru a calcula dinamic culoarea fontului pentru a oferi cel mai bun contrast de culoare. Acesta este calculat în timp ce ia în considerare culoarea temei și a fundalului. Codul CSS care utilizează factorul „Calc” este următorul:
articol
{
–roșu: 230;
–verde: 230;
–albastru: 230;
–aa-luminozitate: (
(var(–roșu) * 299) +
(var(–verde) * 587) +
(var(–albastru) * 114)
) / 1000;
–aa-culoare: calc((var(–aa-luminozitate) – 128) * -1000);
fundal: rgb(var(–roșu), var(–verde), var(–albastru));
culoare: rgb(var(–aa-color), var(–aa-color), var(–aa-color));
}
În funcție de parametrii de interogare media, puteți, de asemenea, lăsa utilizatorul să comute între temele întunecate și cele deschise, în funcție de preferințele utilizatorului. Puteți utiliza „prefer-color-scheme” în CSS pentru a activa comutarea între temele luminoase și cele întunecate, după cum urmează:
@media (preferă-schema-de-color: întuneric)
{
articol
{
–roșu: 30;
–verde: 30;
–albastru: 30;
}
}
7. Adăugarea de umbră la fonturi:
Deși avem o variație semnificativă între fonturile web din care să alegem, este ușor să ne ocolim de la selectarea fonturilor tradiționale care definesc abordarea standard și consistența. Dar, există anumite dezavantaje care vin cu alegerea fonturilor web personalizate. De exemplu, toate dispozitivele redă fonturile într-un mod diferit. Se știe că computerele Apple creează fonturi perfecte pentru pixeli folosind tehnici anti-aliasing. Dar, cu Windows, ele favorizează abordarea în care lizibilitatea primește o importanță mai mare. Prin urmare, dacă te uiți la același text pe dispozitivele Apple și Windows, atunci fonturile pot arăta diferit într-o anumită măsură.
Pentru a depăși această problemă, fonturile web vin în ajutor. Fonturile web se redau bine pe web așa cum apar inițial. Dar, pentru fonturile web personalizate recent lansate, fonturile nu sunt redate conform așteptărilor noastre. Prin urmare, arată diferit pe diferite dispozitive. Uneori, fonturile arată ușor diferit și la schimbarea browserelor. În astfel de cazuri, ar trebui să aplicați umbră fonturilor. Cu următorul cod CSS, puteți implementa umbre în fonturi:
h1 { /* Selectorul dvs. */
font-family:”Unele fonturi personalizate”, serif;
text-shadow:0 0 1px transparent;
/* Sau, dacă trebuie să aplicați o umbră tare de 0px,
* puteți utiliza mai multe umbre de text */
text-shadow:0 0 0 #f00, 0 0 1px transparent;
}
Concluzie:
Cititul este o activitate plină de complexități și devine și mai complicată atunci când cititorul are dizabilități de citire. Când vizați dezvoltarea unui site web, trebuie să aveți grijă de cititorii obișnuiți, inclusiv de cititorii cu dizabilități. Prin urmare, acest blog discută problemele de bază care trebuie tratate folosind CSS, luând în considerare lizibilitatea site-ului.