Probabil ați auzit că tipografia bună este invizibilă, dar este mai corect să spunem că tipografia bună face lecturarea mai ușoară.
Când ochiul călătorește de-a lungul unei linii de text, o face în salturi, numite sacade. Acesta nu citești litere, sau chiar cuvinte, citești doar unele părți ale cuvintelor și creierul tău umple ceea ce se așteaptă să găsească. Dacă creierul este surprins, trimite ochii înapoi pentru a verifica dacă presupunerea sa a fost corectă. Tipografia bună minimizează munca pe care o au ochii tăi, creând o curgere lină de-a lungul liniei.
Dispozitivele mobile au provocări pentru orice tipograf: spațiul este limitat, iar lumina ambientală este adesea slabă. Dar făcând ajustări simple la tehnicile pe care le folosim deja pentru Web, putem îmbunătăți vizibilitatea pe dispozitivele mobile.
1. Oferă-ți spațiu
Tipografia nu se referă la aranjarea de mici linii ondulate pe un ecran. Tipografia este în mare măsură despre spațiul din interiorul și din jurul lor.
Pentru a înțelege acest lucru, vă ajută să înțelegeți de unde provin fonturile: gaura din mijlocul unui „o” (și un „b”, „c”, „p”, etc.) se numește „contor”. Când fonturile erau sculptate din metal pentru a fi utilizate în presele originale de tipar, acele contoare au fost create de un poanson de metal care a fost sculptat și apoi introdus într-o placă. Primii designeri de tipare lucrau de fapt cu formele care nu se imprimau. Tipografia se datorează mult mai puțin formelor de litere în sine, decât spațiului pe care le încadrează.
Când vorbim despre ierarhie, de obicei ne referim la <h1> până la <p> și, eventual, la <h6>. Dar există o ierarhie suplimentară care afectează fluxul unei linii sau al unui paragraf. Spațiul dintre litere este mai mic decât spațiul dintre cuvinte, spațiul dintre cuvinte este mai mic decât spațiul dintre rânduri și așa mai departe.
Pentru o vizibilitate optimă pe mobil, acordați o atenție deosebită ierarhiei spațiale. Gruparea caracterelor în cuvinte, rânduri și paragrafe este cu atât mai esențială în lumina naturală.
2. Obținerea lungimi unui rând
Măsura este lungimea unui rând dintr-un text. Mai precis, este lungimea ideală pentru o linie de text, deoarece este rar ca fiecare linie să se potrivească exact.
Măsura ideală general acceptată pentru o citire confortabilă este de aproximativ 65 de caractere. Lungimea fizică a măsurii va depinde de designul caracterului, de urmărire și de textul exact pe care îl utilizați. Nu există un standard acceptat în mod obișnuit pentru măsurarea pe ecranul mobil. În mod tradițional, coloanele înguste de text din ziare sau reviste aspiră la 39 de caractere. Deoarece această măsură ideală a fost testată de-a lungul secolelor, ne servește bine pentru tipografia mobilă.
3. Slăbiți, apoi strângeți conducătorul
Leading este spațiul dintre linii și, atunci când este stabilit prea strâns, face ca sacada să sară de la sfârșitul unei linii la începutul următoarei dificil de urmat. Atunci când sunt stabilite prea liber, golurile dintre cuvinte vor începe să se alinieze, creând ceea ce se numește de obicei râuri, întrerupând curgerea lină a liniei.
Standardul obișnuit pentru conducere este în jur de 1,4 em, totuși, din experiența mea, este prea strâns pentru ecrane. Una dintre caracteristicile cheie ale unui tip de caractere care funcționează bine pe ecran este contoarele mari, iar contoarele mari necesită un pic de conducere în plus pentru a menține ierarhia spațială. .
Inversarea acestei reguli, o măsură mai scurtă necesită mai puțină conducere. Așa că, deși probabil că vă veți seta liderul un pic mai relaxat pentru stilurile desktop, nu uitați să-l strângeți pentru ecranele mobile.
4. Găsiți locul ideal
Toate fonturile au cel puțin un punct de mijloc. O combinație între dimensiunea la care se reproduc cel mai bine pe ecran și punctul în care anti-aliasing-ul aplicat în browser distorsionează cât mai puțin designul fontului.
Punctul favorabil este de obicei punctul în care cele mai multe linii se aliniază cu grila de pixeli. Fonturile de pixeli, dacă vă amintiți, funcționau doar atunci când erau dimensionate la punctul lor de mijloc.
Abordarea standard pentru designeri este de a aranja text folosind o grilă de bază. Pentru mobil trebuie să folosim în schimb înălțimea x (înălțimea x este literalmente înălțimea „x” minuscul). Știm din studiile de vizibilitate că creierul recunoaște partea de sus a cuvintelor, nu partea de jos. Pentru a obține un flux mai mare de sacadare, trebuie să ne asigurăm că partea de sus a personajelor noastre este cel mai strâns aliniată la pixeli.
5. Nu-ți pierde marginea unui bloc de text
Cea mai mare parte a ceea ce citiți este aliniat la stânga (cel puțin pentru limbile bazate pe latină).
Când ochii tăi sar de la un capăt la altul al liniei, creierul este mai capabil să judece unghiul și distanța următorului salt, dacă toate săriturile sunt consecvente. Gândește-te la asta ca alergând peste pietre, este mult mai rapid dacă sunt distanțate în mod constant. Din acest motiv, marginea din stânga a textului ar trebui să fie plată, fiecare linie începând cu același loc.
Ca rezultat, nu ar trebui să aliniați la centru mai mult de două sau trei linii de text.
Adesea, textul este justificat, ceea ce înseamnă că cuvintele de pe linie sunt distanțate în mod egal, astfel încât să nu existe cârpă pe ambele părți. (Bănuiesc că textul justificat este la modă, deoarece designul responsive i-a învățat pe designeri să gândească în blocuri.) Textul justificat are ca rezultat spații albe inconsecvente și, în cele mai rele cazuri, duce la câteva cuvinte pe o linie, ceea ce este serios deranjant. Problema cu textul justificat este exacerbată de o măsură mai scurtă, astfel încât textul justificat poate fi ilizibil pe mobil.
Textul ragged dreapta are un avantaj suplimentar pe mobil: textul este adesea citit în situații care distrag atenția, iar cititorii se îndepărtează frecvent de text – pentru a verifica numele unei stații sau pentru a răspunde la un apel. O cârpă creează o formă aleatorie pe coloana din dreapta, care ajută ochiul să-și relocalizeze ultima poziție, cu o recitire minimă.
6. Reduce contrastul
În timp ce dorim să încurajăm contrastul dintre text și fundal, dorim să-l reducem între diferitele niveluri de tip. Motivul este că creierul nostru judecă importanța în funcție de context. Titlurile dvs. pot fi de două, sau chiar de trei ori mai mari decât dimensiunea textului dvs. de pe desktop și asta funcționează deoarece pe ecran există mai mult text. Pe mobil, este vizibil mult mai puțin text și astfel contrastul devine exagerat. Majoritatea designerilor folosesc o secvență Fibonacci pentru a mări textul. Pentru mobil, strângeți rapoartele pentru a reduce contrastul dimensiunilor tipurilor. De exemplu, dacă utilizați raportul de aur pentru a crește dimensiunea, înmulțiți cu 1,618. Pentru mobil, luați proporția mai mică și înmulțiți cu 1,382.
7. Ajustați urmărirea la scară
Când ne ajustăm dimensiunile fonturilor pentru dispozitive mobile, trebuie să fim conștienți de modificările necesare în urmărire.
(Permiteți-mi să prefațez acest lucru spunând că nu ar trebui să ajustați kerning-ul. Kerning-ul este distanța dintre două perechi de litere, astfel încât spațiul dintre ele să fie în concordanță optic cu spațiul dintre celelalte caractere. Kerning-ul a fost adăugat la font când a fost creat , și probabil că a durat luni de zile. Dacă ați selectat un font construit profesional, atunci acesta a fost făcut corect și dacă credeți că nu a fost făcut corect, găsiți un alt font.)
Urmărirea nu este kerning. Urmărirea este spațierea dintre litere aplicată tuturor caracterelor din font. De obicei, nu ar trebui să ajustați nici urmărirea. Excepțiile de la această regulă sunt pentru textul mare, cum ar fi titlurile și textul mic, cum ar fi notele de subsol. Textul mai mare necesită mai puțină urmărire, iar textul mai mic necesită mai multă urmărire. Primul se datorează grupării, iar cel de-al doilea este pentru a beneficia de contrast. Dacă ați făcut modificări titlurilor sau dacă utilizați un tip de afișare care are de obicei o urmărire mai strictă, poate fi necesar să slăbiți puțin urmărirea pe măsură ce o reduceți.
Rezumat
Tipografia este un meșteșug pe care designerii o petrec toată viața, tocmai pentru că fiecare text, fiecare tip de liter și fiecare tehnologie aduce noi provocări. Nu există reguli stricte și rapide care să funcționeze întotdeauna în fiecare situație dată.
Atunci când aspiră la vizibilitate, există trei principii de care trebuie să ții cont: o curgere lină de-a lungul liniilor, o ierarhie spațială clară și un contrast adecvat. Acest lucru este valabil mai ales pentru web-ul mobil.
Nu există nicio regulă care să nu poată fi anulată în ceea ce privește dovezile proprii, dar liniile directoare de aici vor servi drept punct de plecare ideal pentru textul frumos aranjat pe dispozitivele mobile.