Share
Când utilizați tipografia pe web, trebuie să aveți în vedere multe lucruri pentru a crea o pagină care oferă acces clar la conținut și o prezintă în mod lizibil. De obicei, acest lucru poate fi împărțit în două găleți: Diviziune și Lizibilitate. Citibilitatea se referă la modul în care sunt aranjate cuvinte și blocuri de tip pe o pagină. Legibilitatea se referă la modul în care este proiectată o tipă de tip și la cât de bine se poate distinge un personaj individual de celălalt. De dragul acestui articol, voi vorbi un pic despre ambele, sugerând anumite tehnici specifice pentru a vă îmbunătăți tipografia.
Să vorbim mai întâi despre lizibilitate. Este important să înțelegeți ce face un text mai lizibil decât altul. Când alegeți un tip de text, totul depinde de modul în care intenționați să îl utilizați. Puneți-vă câteva întrebări de bază: la ce dimensiune va fi folosit textul? Va apărea ca o copie a corpului sau un titlu? Trebuie să fie un cărucior sau va fi folosit mai mult ca bomboane ochi? Va fi asociat cu un alt font? Aspectul literei completează subiectul?
De asemenea, este important să rețineți că diferite tipuri de fonturi au fost concepute pentru utilizări diferite. De exemplu, Garamond-ul original a fost conceput pentru a fi foarte lizibil când este imprimat într-un corp amplu de text. Unii spun, de asemenea, că a fost cel mai ecologic font din epoca sa, conservând utilizarea de cerneală. Bell Centennial este un tip de stil comandat de AT & T în anii 1970, conceput pentru a fi utilizat în directoarele telefonice. Aceste directoare au fost făcute din hârtie ieftină și, din acest motiv, Bell Centennial a fost conceput astfel încât să poată fi răspândit cerneala în timpul procesului de imprimare. Pe partea digitală, există fonturi care au fost proiectate special pentru ecran, cum ar fi Georgia și Verdana. Azura este un font relativ recent conceput special pentru citirea textului pe ecran.
Pe scurt, vă ajută să cunoașteți contextul intenționat al tipului de text pe care îl utilizați. Unele fonturi sunt într-adevăr destul de flexibile, includ mai multe greutăți și pot fi utilizate în mai multe moduri. Altele sunt mai constrânse, concepute pentru a fi utilizate foarte specific.
Acest lucru ne conduce în primul dintre câteva lucruri de reținut legate de lizibilitatea tipului:
Unele tipuri de fonturi au fost concepute pentru a fi utilizate la scară mare, cum ar fi în titluri. De obicei, aceste tipografii sunt mai puțin ușor de citit la dimensiuni mai mici și nu ar trebui folosite pentru copie corporală. Acestea sunt numite afișați fețele. Tipul de text prezentat mai jos, Knockout, este una dintre fețele mele de afișare preferate.
Alte fonturi sunt proiectate special pentru a fi utilizate în zone mari de copie mai mică a corpului. Acestea se numesc fețe de text sau de corp.
Există multe variații între ele. În mod obișnuit, ceea ce fac este să găsesc o față pe care cred că este potrivită pentru sarcină, având în vedere că am de gând să o împerechez cu un alt font și să o încerc. Am eliminat deja toate fonturile pe care nu cred că sunt potrivite pentru această sarcină, dar dacă tocmai începeți, este posibil să faceți o încercare și o eroare.
Deci, care este mai lizibil: serif sau sans-serif? Istoria ne spune că fețele serifului au fost întotdeauna considerate mai lizibile, deoarece acestea erau aproape întotdeauna folosite în imprimare pentru pasaje mari de text. Fețele serifului permit ochiului să curgă mai ușor peste text, îmbunătățind viteza de citire și diminuând oboseala ochilor.
Acestea fiind spuse, există multe fețe sans-serif lizibile. Online se pare că fețele sans-serif sunt folosite mai mult pentru textul corporal ca niciodată. Cred că există mai multe motive pentru acest lucru. Formele mai simple de scrisori par să funcționeze mai bine cu tendințele de design actuale și se pot simți mai moderne. De asemenea, de obicei, nu citim pasaje mari de text pe un site web, astfel încât fonturile sans-serif se potrivesc foarte bine în bucăți scurte de copiere.
Trebuie remarcat faptul că există o dezbatere pe această temă - un punct de vedere este acela că fețele serifului nu reduc lizibilitatea pe scară largă a imaginilor în sens larg. Alții cred că nu există nici o diferență. Poziția pe care o iau întotdeauna este, se simte bine? Am citit o secțiune de tip setată așa cum am proiectat-o?
O altă caracteristică de notat este x-height. Acest lucru se aplică, de obicei, la utilizarea tipului la dimensiunile textului corpului. Înălțimea x este, bine, măsurarea înălțimii literei "x" într-un font dat. Nu ia în considerare înălțimea ascendenților sau descendenților. S-ar putea să fiți surprinși să aflați câtă diferență există în înălțimea x de la o față la alta. Atunci când sunt utilizate mici, tipografii cu înălțimi mai mari x sunt de obicei mai ușor de citit.
Înțelegerea este despre aranjarea cuvintelor și a grupurilor de cuvinte într-un mod care să permită cititorului să acceseze conținutul cu ușurință și într-un mod care are sens. Este într-adevăr o formă de artă, care este îmbrăcată în timp, pe măsură ce se găsesc combinații de succes.
Din experiența mea, acest lucru tinde să fie unul dintre cele mai grele concepte de a înțelege atât începătorii, cât și designerii deopotrivă. Chiar și designerii condus uneori se luptă cu modul în care să aranjeze cel mai bine tipografia într-un aspect. Acum, când cele două denumiri încep să se îmbine în ceea ce privește designul web, este important să începeți să înțelegeți conceptul de lizibilitate. Iată câteva lucruri de reținut:
Una dintre cele mai frecvente "greșeli" tipografice pe care le văd astăzi pe web este spațierea necorespunzătoare a tipului. Ceea ce mă refer aici sunt situațiile în care un text bloc nu are suficientă marjă, subtexte și text corporal corelat, care nu sunt grupate vizual împreună și așa mai departe. Spațierea corectă (combinată cu ierarhia) permite cititorului să scaneze textul și să îl acceseze la punctele dorite.
Nu este o regulă tare și rapidă, dar mi se pare că relația dintre spațierea paragrafelor (spațiul suplimentar plasat înainte sau după un paragraf), spațiul în jurul unui bloc de tip și spațierea literelor pot fi corelate proporțional cu linia înălțimea unui paragraf. Înălțimea liniei este definită ca distanța verticală dintre liniile de text. De exemplu, dacă înălțimea liniei unui paragraf este setată la 2em și un paragraf cu același text este setat la 1.5em, primul paragraf va necesita mai mult spațiu între paragrafe și probabil o marjă mai mare în jurul acestuia.
O mare parte din acest lucru se face prin ochi, mai degrabă decât o formulă exactă, dar eu folosesc o regulă bună de degetul mare atunci când vine vorba de relația dintre spațierea paragrafului la înălțimea liniei. În mod obișnuit, distingerea paragrafelor mele (care pe web se traduce la marginea sau la umplutura plasată în partea de sus sau de jos a unui paragraf) în jurul jumătății înălțimii liniei. Acest lucru tinde să ajute la pasajele textului "țineți împreună", mai degrabă decât să folosiți întoarcerea completă a greșelilor între fiecare paragraf, creând cantități mari de spațiu între paragrafe.
Evident, trebuie avut grijă ca textul să nu fie prea mic. De asemenea, este important să rețineți că vârsta publicului dvs. poate varia, de aici și calitatea vederii. În general, este bine să stați în jur de 13px sau .813em la cel mai mic. În prezent, prin implementarea mai largă a site-urilor responsabile, există o tendință care se îndreaptă spre o copie mai mare a corpului. În RWD, este, de asemenea, important să rețineți că diferite dimensiuni de text pentru diferite dispozitive pot avea sens. De exemplu, poate avea sens să crească mărimea copiei corporale pe o lățime a telefonului mobil, spre deosebire de lățimea unui desktop.
O altă practică obișnuită care împiedică lizibilitatea tipului permite liniilor orizontale de tip pe o pagină să devină prea largi. Această distanță este menționată ca măsură (uneori, de asemenea, lungimea liniei). Dacă o linie de tip este prea lungă, este o citire obositoare și o întindere pentru ochiul cititorului de a reveni la marginea din stânga a blocului de text pentru următoarea linie. De asemenea, este intimidant să vedeți un bloc de text aranjat în acest fel și unii cititori ar putea să nu încerce să o citească.
Care este lățimea maximă a blocului de text? Ei bine, totul depinde de dimensiunea textului. Cu cât textul este mai mare, cu atât linia poate fi mai lungă (din nou tot acest lucru). În opinia mea, în general, aproximativ 70 de caractere sunt atâta timp cât doriți să fiți. În medie, pentru textul de dimensiuni reduse, încerc să stau în termen de 45 de minute.
Spațierea cu litere (denumită și urmărire) este creșterea sau scăderea constantă a distanței dintre formularele de litere dintr-un cuvânt sau un bloc de text. Nu trebuie să fii confundat cu kerning-ul, care se referă la ajustarea distanței dintre caracterele individuale. Distanta dintre litere poate fi folosita pentru a ajusta densitatea unui bloc de text sau a unui titlu individual sau subcapitol.
Evident, distanța dintre litere afectează lizibilitatea textului. Prea mult sau prea puțin și lizibilitatea vor fi compromise. Cu toate acestea, există momente în care, după părerea mea, este necesară o spațiere a literelor. După cum puteți vedea în graficul de mai jos, îmi place să adaug spațierea generoasă a literelor la subcapitole sau expresii de text cu majuscule. Mi se pare mai ușor să citești textul cu majuscule atunci când caracterele au un spațiu suplimentar în jurul lor. De asemenea, în funcție de tipul de amprentă utilizat, îmi place să măresc spațiul dintre litere în copie corporală.
Se poate părea evident că contrastul de tip bun este esențial pentru lizibilitate. Faptul este că designerii (inclusiv eu) împing mereu limitele contrastului. S-ar putea să ne dorim ca o anumită secțiune de text să fie mai puțin proeminentă sau să creăm "straturi" de ierarhie în designul nostru. Indiferent de situație, rețineți că contrastul ecranului, mai ales atunci când vine vorba de forme mici, fine precum textul corpului, variază foarte mult de la ecran la ecran. Cel mai bine este să erați pe marginea unui contrast "prea mult".
Așa cum am discutat deja în această serie, ierarhia joacă un rol important în citirea conținutului. O ierarhie de succes organizează conținutul în părți digerabile și permite cititorului să scaneze și să acceseze cu ușurință textul.
Începeți să vă gândiți să folosiți aceste concepte de lizibilitate și lizibilitate în proiectele dvs. Cu cât faci mai mult, cu atât vei obține mai bine.
Accentsconagua