Cum se face textul să fie redat perfect

Selectarea unui tip de text frumos este inutilă dacă pare urât pe ecran. Pentru a evita textul urât - sau mai rău - ilizibil, ar trebui să testați întotdeauna dacă fontul funcționează bine pe dispozitivele pe care vizitatorii dvs. le folosesc. S-ar putea să fii surprins; majoritatea vizitatorilor dvs. nu folosesc probabil același dispozitiv pe care îl utilizați pentru a proiecta și dezvolta. De fapt, marea majoritate a oamenilor care navighează pe internet utilizează mașini Android și Windows.

Utilizarea sistemului de operare la nivel mondial, conform StatCounter Global Stats (aprilie 2017). Dispozitivele Apple reprezintă o mică parte din utilizarea globală, în timp ce Android și Windows domină.

Utilizarea sistemului de operare la nivel mondial, conform StatCounter Global Stats (aprilie 2017). Dispozitivele Apple reprezintă o mică parte din utilizarea globală, în timp ce Android și Windows domină.

Cel mai bun mod de a testa modul în care se comportă un font este să setați un exemplu de text în font și să-l încercați pe toate dispozitivele pe care le vizați. Redarea defectuoasă se observă în special pe greutăți subțiri.



De exemplu, un font care se redă bine pe macOS poate părea fragil pe Windows (vezi imaginea de mai jos). Este important să utilizați dispozitive reale, deoarece instrumentele de testare a browserului online și mașinile virtuale sunt adesea inexacte (mai multe despre asta mai târziu).

cele mai bune laptopuri pentru artiști cu un buget redus

Jubilat Thin pe Windows 7 (stânga) și macOS (dreapta). Rețineți că pe macOS textul pare „mai greu” decât pe Windows 7.

Dacă nu aveți încă conținutul site-ului dvs. (tsk!), Dați-i lui Tim Brown Specimen de font web o rotație. Setează conținutul la mai multe dimensiuni de text și cu culori de fundal diferite. Nu este un înlocuitor pentru conținutul real, dar o va face într-o mică măsură.

Uneori ai noroc, iar fontul pe care l-ai ales este conceput în mod explicit pentru ecrane: ScreenSmart de la Hoefler & Co, eText-ul Monotype și Reading Edge ale Font Bureau sunt exemple de colecții special concepute cu ecrane în minte și ar trebui să arate frumos peste tot. Desigur, merită să verificați dublă redarea textului, indiferent de originea fontului.

Dar exact de ce textul arată diferit de la un browser la altul? Pentru a răspunde la această întrebare, va trebui să facem o ocolire rapidă în detaliile înțepenitoare ale redării textului.

Rasterizarea și antialiasing

Procesul de transformare a contururilor fontului în pixeli se numește rasterizare. Motorul de redare a textului sistemului de operare plasează conturul (adică forma) fiecărui caracter la dimensiunea dorită a fontului pe o grilă de pixeli. Apoi, colorează toți pixelii al căror centru este în interiorul conturului (vezi imaginea de mai jos).

cum să desenezi o fată pinup

De la curba Bézier la pixeli. În stânga este conturul personajului „a”. În mijloc, acel contur este suprapus pe o grilă de pixeli; orice pixel al cărui centru este în interiorul conturului este pornit. În dreapta este rasterizarea rezultată.

În acest exemplu, un pixel este fie activat, fie dezactivat, indiferent cât de mult din contur este prezent în pixel. Această aproximare a contururilor matematic perfecte se numește aliasing; antialiasing încearcă să atenueze aparițiile asemănătoare unor scări cauzate de rezoluția limitată a ecranelor.

Ideea din spatele antialiasing-ului este de a afla cât de mult din contur este prezent în fiecare pixel și să-l reprezinte cu o valoare în tonuri de gri. Cu alte cuvinte, dacă conturul acoperă 50% dintr-un pixel, folosește 50% din negru pentru a colora acel pixel. Dacă pixelul se află în întregime în contur, se folosește 100% negru și așa mai departe. Acest lucru duce la o redare antialiased care reduce aliasing-ul (vezi imaginea de mai jos). Veți vedea adesea termenul „antialiasing în tonuri de gri” folosit pentru a descrie acest efect.

Antialiasarea utilizând valori în tonuri de gri pentru a reprezenta acoperirea conturului fiecărui pixel produce rezultate mai bune.

Antialiasarea utilizând valori în tonuri de gri pentru a reprezenta acoperirea conturului fiecărui pixel produce rezultate mai bune.

În timp ce antialiasingul îmbunătățește calitatea redării textului, este posibil să îmbunătățiți rezultatul în continuare folosind antialiasing subpixel. Antialiasarea subpixel utilizează caracteristicile ecranelor pentru a crește rezoluția textului rasterizat. Fiecare pixel dintr-un ecran este format din trei subpixeli alungite: roșu, verde și albastru (există alte configurații, dar se aplică aceleași principii). Sistemul de operare poate controla individual aceste subpixeli; antialiasingul subpixel exploatează acest lucru prin aplicarea calculului de acoperire la fiecare subpixel (a se vedea imaginea de mai jos).

Prin direcționarea subpixelilor individuali, antialiasarea subpixel crește în mod eficient rezoluția textului redat. Culorile pe care le percepe ochiul liber (stânga) sunt rezultatul setării valorilor individuale de acoperire pentru fiecare subpixel (dreapta); subpixelele pentru roșu, verde și albastru se combină pentru a forma o singură culoare perceptibilă.

Prin direcționarea subpixelilor individuali, antialiasarea subpixel crește în mod eficient rezoluția textului redat. Culorile pe care le percepe ochiul liber (stânga) sunt rezultatul setării valorilor individuale de acoperire pentru fiecare subpixel (dreapta); subpixelele pentru roșu, verde și albastru se combină pentru a forma o singură culoare perceptibilă.

Diferența dintre aceste opțiuni de redare a textului devine evidentă atunci când începeți să lucrați la dimensiuni mai mici de text. Fără antialiasing, personajele își pierd rapid contururile distinctive. Antialiasingul pe nivele de gri face personajele neclare, dar își menține forma. Antialiasing-ul subpixel redă caractere ascuțite, dar introduce, de asemenea, unele margini de culoare în jurul marginilor personajului.

Sfaturi antialiasing

Puteți modifica setările antialiasing prin intermediul standardului -webkit-font-smoothing și -moz-osx-font-smoothing Proprietăți CSS. Din păcate, multe framework-uri și biblioteci CSS folosesc antialiased și scara tonurilor de gri valori pentru a face textul să pară mai ușor pe macOS. Cu toate acestea, majoritatea dezvoltatorilor și designerilor nu realizează că acest lucru dezactivează antialiasing-ul subpixel și face ca textul să pară mai estompat, afectând astfel lizibilitatea.

Schimbarea redării textului preferate de altcineva pentru a fi mai puțin lizibilă este foarte puțin considerabilă. Dacă trebuie să aveți un text mai ușor, utilizați o greutate mai ușoară în loc să dezactivați redarea subpixel.

Motoare de redare a textului

Majoritatea sistemelor de operare folosesc propriul motor propriu de redare a textului, în timp ce altele folosesc același motor open-source (deși nu neapărat cu aceeași configurație). Cu toate acestea, toate acestea susțin antialiasing și antialiasing subpixel, dar diferă ușor în implementarea lor. În multe sisteme de operare, alegerea metodei antialiasing este selectabilă de către utilizator. Pe Windows, de exemplu, antialiasarea subpixel se numește ClearType; pe macOS, se numește LCD Font Smoothing.

În prezent există patru motoare majore de redare a textului: interfața grafică a dispozitivului (cunoscută și sub numele de GDI) și DirectWrite pe Windows; Core Graphics pe macOS și iOS; și FreeType open-source pe Linux, Chrome OS și Android.

În general, un browser va folosi motorul de redare a textului care este nativ pentru sistemul de operare pe care rulează. Chrome, de exemplu, folosește DirectWrite pe Windows, Core Graphics pe macOS și FreeType pe Android. Windows este unic prin faptul că oferă două motoare de redare a textului: GDI și noul DirectWrite.

Toate browserele moderne folosesc DirectWrite, deci nu trebuie să vă faceți griji cu privire la salvarea GDI pentru o singură excepție: unele browsere se încadrează în redarea GDI inferioară dacă aparatul nu are hardware grafic dedicat. Instrumentele de testare online ale browserelor și mașinile virtuale nu au adesea hardware grafic dedicat, astfel încât redarea textului pe aceste instrumente nu este corectă.

cum să comercializați afacerea dvs. de design grafic

În mod ideal, tot textul este redat utilizând antialiasing subpixel, deoarece creează textul cel mai lizibil. Din păcate, acest lucru nu este întotdeauna posibil - de exemplu, antialiasingul subpixel este adesea dezactivat pe dispozitivele care pot fi rotite, cum ar fi tablete și telefoane. Când rotiți ecranul acestor dispozitive, subpixeli nu mai sunt aranjați în modelul așteptat de rasterizator și vor face ca antialiasing-ul subpixel să pară urât.

Lecturi suplimentare: de la selecție la optimizare, Manualul Webfont vă arată cum webfont-urile pot face web-ul un mediu mai divers din punct de vedere vizual, eficient și mai lizibil.

Lecturi suplimentare: de la selecție la optimizare, Manualul Webfont vă arată cum fonturile web pot face web-ul un mediu mai divers din punct de vedere vizual, mai eficient și mai lizibil.

De asemenea, browserele dezactivează antialiasarea subpixel în situații similare, de exemplu atunci când textul este rotit sau animat. În acest caz, textul rasterizat nu se mai potrivește cu aspectul subpixel al poziției originale a textului și ar trebui să fie rasterizat din nou. Acest lucru este costisitor, în special pentru animații, astfel încât majoritatea browserelor se încadrează în antialiasing la nivel de gri, care nu suferă de aceeași problemă și funcționează în orice orientare.

Unele browsere - Chrome pe macOS, de exemplu - dezactivează, de asemenea, antialiasing-ul subpixel pe ecranele de înaltă rezoluție pentru a oferi o experiență de utilizare mai consistentă. Alte browsere activează antialiasingul subpixel numai pentru textul mic, deoarece modificările minore în redarea textului sunt mai puțin vizibile la dimensiuni mai mari.

Există mai multe alte cazuri în care browserele dezactivează antialiasing-ul subpixel. Regulile pe care browserele le folosesc pentru a selecta metoda antialiasing sunt actualizate constant ca se găsesc noi cazuri de colț și probleme . Aceste modificări frecvente fac foarte dificilă urmărirea a ceea ce se întâmplă cu redarea textului. Ceea ce a folosit odată antialiasing subpixel poate reveni la scară de gri cu următoarea actualizare a browserului. Singura modalitate de a ști cu siguranță cum redă textul dvs. este să testați pe dispozitive reale.

Probabil că sunteți obișnuit să vă testați site-ul în mai multe browsere. Testarea redării textului mărește cantitatea de testare pe care trebuie să o faceți în varietate. Nu numai că trebuie să verificați toate combinațiile de sisteme de operare și browsere, ci și toate setările obișnuite de redare a textului.

Unele dispozitive pot fi preconfigurate pentru a utiliza antialiasing în tonuri de gri, în timp ce altele utilizează un mix de antialiasing în tonuri de gri și subpixel. Pentru a îngreuna și mai mult, nu este posibil să folosiți instrumente de testare a browserului online sau mașini virtuale, deoarece redarea textului diferă adesea de cea a dispozitivelor reale.

de ce tot schimbă colonelul

Când testați, utilizați întotdeauna un eșantion reprezentativ de conținut. O bibliotecă de modele este ideală pentru testarea redării tipului, deoarece include un eșantion larg de conținut: anteturi, text al corpului, etichete, culori de fundal și animație. Având exemple de conținut pe o singură pagină vă permite să verificați rapid toate combinațiile de stiluri și culori de fundal.

Căutați un text care nu este lizibil sau pare subțire pe unele sisteme de operare. Dacă găsiți o problemă, schimbați cu o greutate diferită în aceeași familie de fonturi, faceți textul mai întunecat sau alegeți un alt tip de caractere. Mult noroc.

Acest articol a fost publicat inițial în numărul 301 al net, cea mai bine vândută revistă din lume pentru designeri și dezvoltatori de web. Cumpărați numărul 301 sau abonați-vă la net .

Articole similare: