Selectarea fonturilor, spațierea și culorile pentru aplicațiile mobile. Culoarea este o componentă importantă a tipografiei. Fapte importante despre lectură

5 ianuarie 2012 la 19:05

Opinie: textul corpului la 16px

• Web design

Nu cu mult timp în urmă, SmashingMagazine favorit al tuturor a publicat un articol în care autorul își prezintă teoria despre 16 pixeli ca dimensiune pentru textul corpului și argumentează în apărarea acestuia. Articolul a stârnit o discuție destul de aprinsă, iar astăzi publicăm traducerea lui.

Traducere oferită de blogul de web design Naikom

Pentru textul corpului, orice mai puțin de 16 este o greșeală teribilă

Știu la ce te gândești: „Tocmai a spus 16 pixeli? Pentru textul corpului? O mulțime îngrozitoare! 12 pixeli este ideal pentru majoritatea site-urilor web.”
As vrea sa te conving de contrariu.

Expertul în utilizare Oliver Reichenstein a spus în articolul său „Standardul 100% Easy-2-Read”:
„16 pixeli nu înseamnă mult. Aceasta este dimensiunea implicită a textului browserului. Browserele au fost concepute pentru a afișa această dimensiune... La prima vedere pare mult, dar odată ce o încercați, veți înțelege imediat de ce toți dezvoltatorii de browser au ales această dimensiune a textului ca implicită.”

În acest articol voi explica de ce este 16 pixeli dimensiune minimă pentru textul principal în design web modern. Dacă nu vă schimbați părerea, atunci vă rugăm să vă exprimați motivele în comentarii.

Vedeți, în cele mai multe cazuri, dacă creați un site web cu o dimensiune a fontului între 10 și 15 pixeli, risipi banii clientului. Și iată de ce.

Cititorii sunt venituri

Dacă creezi un site web pentru cineva - chiar și pentru tine - sunt șanse ca obiectivul tău să fie să faci bani.

Poate vindeți un produs direct, oferiți un serviciu sau doar pentru a obține clicuri. Oricum ar fi, este un activ al afacerii și ar trebui să-ți recupereze în cele din urmă investiția. Trebuie să genereze venituri.
Astfel, fiecare element trebuie proiectat pentru a atinge acest obiectiv. Inclusiv textul. Mai ales text - pentru că textul convinge vizitatorii să facă ceea ce doriți.
Gândește-te la asta. Dacă nu explici ce ar trebui să facă oamenii și de ce ar trebui să o facă, atunci desigur că nu o vor face. Și singura modalitate de a le spune acest lucru este prin text. Iar textul implică lectura.

Fapte importante despre lectură

Există unele fapte care sunt decisive pentru întrebări precum cititori, citire și înțelegere,și totul ține de text. Dacă oamenii nu o vor citi, sau dacă nu o pot citi sau înțelege, atunci ce rost are, nu?

Realitate: Majoritatea utilizatorilor urăsc dimensiunea fontului „obișnuită”.

Permiteți-mi să vă întreb: ce procent din cititorii dvs. are peste 40 de ani? Ochii lor trebuie să lucreze pentru a citi textul. de două ori mai mult decât ochii unui tânăr de 20 de ani. Dacă vârsta lor se apropie de 60 de ani, ochii trebuie să muncească de patru ori mai mult.
Aproape 1 din 10 dintre cititorii tăi au probleme cu ochii. Și chiar și cei care nu au probleme vor trebui totuși să se încordeze citiți text mai mic de 16 pixeli, chiar dacă nu observă că o fac. (Cât de des te trezești apăsat mai aproape de ecran?) Și dacă trebuie să se aplece, probabil că se vor simți stânjeniți și inconfortabil. O postură naturală în fața computerului - la cel puțin un braț distanță de ecran!
Pe scurt, lectura este enervantă pentru utilizatorul obișnuit.
Cu cât este mai dificil să citești textul tău, cu atât se va înțelege mai puțin sensul. 10 pixeli vor fi inutili. 12 pixeli este încă prea mic pentru majoritatea cititorilor. Chiar și 14 pixeli pot descuraja vizitatorii care altfel ar rămâne.
Astfel, putem concluziona că dacă vrei să obții maxim numărul de cititori, atunci trebuie să-l setați minim dimensiune 16 pixeli.

„Dar utilizatorii pot mări textul.”

„Dacă o faci codul corect, Persoanele cu probleme de vedere pot folosi întotdeauna funcția de zoom pentru a mări textul"- asta a spus un designer web într-o dispută pe această problemă. De fapt, acest lucru nu este adevărat. Utilizatorii care trebuie să schimbe setările de obicei nu știu cum să facă acest lucru. Iar cei care știu cum... cel mai probabil, vor alege mai mult cale usoara făcând simplu clic pe butonul „Înapoi”. Este de la sine înțeles că nu ar trebui să folosim banii clienților noștri pentru a crea modele care nu sunt ușor de utilizat. Gusturile noastre personale nu trebuie puse mai presus de utilizare.

Designul web nu este doar ceva care le place designerilor. Este vorba despre despre ce utilizatorii doresc și ce vă va ajuta să atingeți obiectivele clienților noștri.

Dacă scopul unui site web este să genereze venituri, atunci rolul nostru ca designeri este să venim cu ceva pentru a atinge acel obiectiv cât mai eficient posibil. Alegerea unei dimensiuni de font care îngreunează citirea vă va reduce numărul de cititori, așa că nu vă zgâriți cu dimensiunea fontului în detrimentul conversiei.
În proiectare publicații tipărite, fontul de dimensiunea 8 va fi compromisul perfect între ușurința de citire și cost, deoarece trebuie să plătiți pentru fiecare milimetru de hârtie. Pe Internet, nu plătiți nimic pentru a vă folosi spațiul, atâta timp cât cititorilor dvs. le place scrisul dvs.
Deci întrebarea este Ești gata să cheltuiești banii clienților tăi pentru ceva care doar îți place?

16 pixeli nu este mult

Gusturile noastre de design și preferințele estetice sunt mai flexibile decât credem. Ce ne place - în în mare măsură un rezultat a ceea ce am văzut deja de la alți designeri și a ceea ce ne așteptăm.
Din păcate, majoritatea site-urilor web au text minuscul, deoarece ecranele erau cândva mici, iar designerii nu au renunțat încă la obicei.
Originalul acestui articol este scris cu font 19px. Această dimensiune a fost aleasă pentru că chiar și 16-18 pixeli păreau prea mici: dacă te așezi confortabil pe un scaun, la o distanță de 70 cm de ecran, s-ar putea să descoperi că trebuie să strângi ochii pentru a vedea textul. Dacă aș fi folosit un font Georgia sau Verdana, 16px ar fi fost bine: aceste fonturi au fost concepute cu înălțimi mari de litere și, prin urmare, par mai mari pe ecran.

Acum aruncați o privire la subsol și vedeți dacă trebuie să vă aplecați înainte spre ecran, să strâmbiți din ochi sau să tresăriți pentru a vedea textul. La urma urmei, dimensiunea sa este de 11 pixeli. Dacă după toate acestea încă nu te-am convins, te rog să-mi explici motivele în comentarii.

Etichete:

• dimensiunea fontului
• tipografie

Adăugați etichete

16 px este dimensiune optimă font pentru pagini web.

La prima vedere, această afirmație poate părea ciudată și chiar provocatoare. Fontul principal al majorității paginilor web nu depășește 12 pixeli, iar mulți web designeri sunt convinși că aceasta este dimensiunea optimă a fontului. Acest articol are scopul de a vă convinge de contrariul.

Specialistul în utilizarea site-urilor, Oliver Reichenstein, susține că 16 pixeli este standardul pentru afișarea normală a fonturilor într-un browser. În același timp, fontul nu va arăta gigantic (de care mulți designeri se tem), deoarece 16 pixeli este mult doar la prima vedere, dar în practică este cel mai dimensiune convenabilă font pentru site, așa cum au văzut deja mulți dezvoltatori.

Mai mult, 16 px este dimensiunea minimă a fontului pentru un site web modern, iar dacă nu acceptați acest format, doar irosești banii clienților tăi. Mai jos sunt argumente în favoarea relevanței acestei dimensiuni specifice de font.

Venituri pe site și atragerea cititorilor

În cele mai multe cazuri, un site web este creat cu scopul de a câștiga bani și, cu cât ai mai mulți vizitatori, cu atât veniturile probabile vor fi mai mari. Dacă site-ul tău este unul de vânzare, atunci este cu atât mai important pentru tine să atragi potential client printre audiența internetului. Fiecare dintre cititorii site-ului dvs. este un activ valoros de afaceri care, în cele din urmă, va achita costurile de creare a site-ului dvs.

De aceea, fiecare element al site-ului dvs. ar trebui să vizeze atingerea scopului final. Această regulă se aplică în primul rând conținutului text. La urma urmei, textul de pe un site web este principalul mijloc de influențare a cititorului.

Dacă textele de pe site-ul tău nu indică clar ce acțiuni te aștepți de la utilizator, atunci acesta nu va deveni clientul tău. Și pentru ca textul să influențeze efectiv utilizatorul, acesta trebuie, cel puțin, să fie citit.

Prin urmare, tot ceea ce faceți ar trebui să aibă ca scop să vă faceți conținutul mai ușor de citit pentru cititorii dvs.

4 fapte despre lectură pe care un web designer ar trebui să le știe

1) După douăzeci de ani, calitatea vederii la oameni scade, la vârsta de patruzeci de ani, doar 50% din lumină trece în retină, iar până la vârsta de 60 de ani - doar 20%.

2) 9% dintre americani au probleme de vedere, iar în Rusia aceste cifre sunt și mai mici. Pentru mulți ruși, chiar și lentilele de contact nu își pot corecta complet vederea.

3) Viteza de citire depinde de distanța până la sursă: Cu cât distanța este mai mare, cu atât simbolurile sunt mai lizibile și înțelegerea lecturii este mai mare. Principalul factor determinant distanta optima, este exact dimensiunea fontului. Fonturile mari de pe panouri publicitare sunt vizibile pentru aproape toată lumea, dar fonturile de 12 pixeli de pe majoritatea site-urilor web nu sunt.

4) Rețineți că majoritatea utilizatorilor de computere se află la o distanță de 50-60 de centimetri de dispozitiv, acest lucru vă permite să evitați să vă încordați prea mult ochii. Sursele tipărite le percepem însă la o distanță mai apropiată, deoarece revista pe care o citim se află la o distanță mai mică decât lungimea brațului, doar câteva zeci de centimetri. Pe baza acestor calcule, se poate observa că un font de 16 pixeli de pe ecran este perceput ca un font de 10 pixeli într-o carte.

Text de 16 px pe un monitor de 24 inchi și text de 12 pt într-o carte

Text de 16 px pe un monitor de 15,4" și text de 12 pt într-o carte

Fonturile proaste reduc traficul pe site

Fontul prost de pe un site web este cea mai frecventă problemă a utilizatorului (a primit cele mai multe voturi într-un sondaj din 2005). Pe în acest moment situația nu s-a îmbunătățit – arată un eșantion de design SiteInspire. Dimensiune medie Dimensiunea fontului pentru textul principal este aceiași 12 pixeli care a devenit standardul în rândul designerilor web, contrar cerințelor utilizatorilor, dintre care majoritatea se plâng de dimensiunea mică a fontului. Dintre toate aceste modele, nu există niciunul (!) cu un font mai mare de 14 pixeli, iar unele au o dimensiune și mai mică a fontului - 10 px.

Surse populare modele gata făcute pentru site, ElegantThemes și ThemeForest oferă dezvoltatorilor web șabloane cu o dimensiune a fontului care nu depășește 12-13 pixeli.

Câți dintre cititorii tăi au o vedere de 100% de calitate și nu suferă de oboseală excesivă a ochilor în timp ce lucrează cu un computer? Toți cititorii tăi au sub 20 de ani și nu au probleme în a recunoaște fonturile în miniatură?

Cel mai probabil, nu este cazul: fiecare dintre cei zece cititori ai tăi pur și simplu nu va putea distinge un font de 10 pixeli, dar o dimensiune de 16 pixeli va fi optimă pentru ei. În caz contrar, chiar și persoanele cu o vedere excelentă vor trebui să se apropie de monitor pentru a distinge litere mici, iar acest lucru reduce foarte mult capacitatea de utilizare a site-ului. Poziția cuiva care stă în fața computerului ar trebui să fie cât mai naturală și confortabilă posibil, nu vrei ca cititorul tău să se simtă inconfortabil și stânjenit?

Nu stresați prea mult cititorul, altfel nu va înțelege sensul a ceea ce a citit (chiar dacă vă citește textul și nu părăsește site-ul imediat).

Nu speria vizitatorii cu fonturi incomode, deoarece cu cât ai mai mulți vizitatori, cu atât veniturile vor aduce site-ul tău în cele din urmă.

Nu puneți utilizatorul pe gânduri!

Mulți designeri cred că „problemele înecului oamenilor sunt opera de a îneca oamenii înșiși”, iar dacă utilizatorul are probleme cu citirea fontului de pe site, atunci ar trebui să apeleze la funcția de zoom, care îi permite să mărească textul. Dar din punctul de vedere al utilizatorului, este mai ușor să cauți informatiile necesare pe alt site decât pentru a personaliza interfața incomodă a unei resurse web. Și mulți utilizatori nici măcar nu știu despre existența unei astfel de funcții, iar atunci când se confruntă cu un text care este imposibil de citit, apăsă fără ezitare butonul „Înapoi”.

Nu pierde banii clienților tăi creând un site web care este evident neprofitabil. Ceea ce ți se pare frumos nu este întotdeauna ușor de utilizat. Gândește-te la ceea ce interesează utilizatorul și vei atinge scopul, oricare ar fi acesta.

Designul publicațiilor tipărite diferă de designul resurselor web - acest lucru este evident. Iar dacă fonturile mari în tipărire duc la costuri suplimentare pentru fiecare milimetru de hârtie folosit, atunci costul creării unei publicații online nu depinde de dimensiunea fontului pe care îl utilizați, așa că nu are rost să vă limitați la soluții de compromis.

16 px este convenabil

Daca tot nu percepi font mare ca acceptabil pentru un site din punct de vedere estetic, atunci gandeste-te la faptul ca nu exista nimic mai flexibil decat gustul designerului. Practic, preferințele noastre se bazează pe ceea ce am văzut înainte. Și dacă ești impresionat de un design web realizat folosind un font de 10 pixeli, acest lucru nu neagă în niciun caz că un design cu un font de 16 pixeli va fi atractiv.

Gândiți-vă, ce se întâmplă dacă designul dvs. devine noul standard? A face site-ul dvs. mai ușor de utilizat este mod grozav depășiți concurența și creați un public larg de utilizatori.

Is - componenta text, i.e. utilizatorul trebuie să citească, să citească și să citească din nou. Conform statisticilor de pe internet, aproape nimeni nu citește un articol întreg, toată lumea trece și încearcă să prindă doar ideea principală, deoarece articolele, de regulă, sunt pline de „apă”. Scopul webmasterului este de a face citirea cât mai confortabilă posibil pentru utilizator. Acest articol vă va spune nu numai despre alegerea unui font, ci și despre cum să dispuneți cel mai bine conținutul pe site.

Care sunt criteriile pentru alegerea unui font pentru un site web? Mai jos am enumerat principalele criterii și recomandări pentru fiecare dintre ele.

1. Selectarea unei familii de fonturi

Există nenumărate fonturi, multe dintre ele asemănătoare între ele, dar, cu toate acestea, fiecare dintre ele are propriile sale caracteristici distinctive. Cu toate acestea, nu toate browserele au fiecare dintre ele. Mai jos este o mică listă a celor mai populare fonturi care sunt disponibile în fiecare browser:

• Arial ;
• Verdana;
• Times New Roman;
• Georgia;
• Trebuchet MS;

Dacă sunteți mulțumit de orice font din această listă, atunci va fi cea mai buna varianta, pentru că atunci nu trebuie să vă faceți griji că îl încărcați special în browserul utilizatorului. Dacă tot vrei un font rar, atunci poți merge în mai multe moduri (dar eu spun imediat că este mai bine să nu-ți creezi probleme!).

De exemplu, puteți alege unele font frumos pe Google Font, dar pentru ca fontul selectat să apară în browser, utilizatorii vor trebui să îl conecteze. Drept urmare, fontul va fi încărcat din Google Font de fiecare dată, ceea ce, în opinia mea, este rău și există o serie de motive bune pentru aceasta:

În primul rând, există o dependență de alte site-uri (în în acest caz, de la Google). De exemplu, Google poate funcționa încet din anumite motive și, în acest caz, site-ul dvs. va încetini și el. Nu trebuie să cauți departe pentru exemple. Am încărcat personal un script pentru lucrul cu biblioteca AJAX (jquery) de pe site-ul Google, dar periodic nu s-a încărcat deloc și asta a dus la operare incorectăîntregul site.

Soluția problemei a fost simplă: pur și simplu am copiat întregul fișier .js pe găzduirea mea și l-am încărcat de pe site-ul meu. Cel mai bine este atunci când întregul site este încărcat de pe propria găzduire. Cu toate acestea, nu veți putea transfera fonturile pe site-ul dvs. web, va trebui să le descărcați întotdeauna de pe site-ul Google.

În al doilea rând, în browsere precum Opera, în ochii utilizatorului totul va arăta așa: el vine pe site-ul tău, conținutul a apărut deja și după aproximativ o jumătate de secundă - bam și fontul s-a schimbat. Acest lucru se va întâmpla de îndată ce browserul îl descarcă de pe Google și îl procesează. Pentru resurse serioase, această „pâlpâire” a stilurilor de text este inacceptabilă. Desigur, această situație nu există pe toate browserele, dar personal, chiar și o singură operă este suficientă pentru a renunța la ideea de a folosi fonturi mai puțin populare.

Să revenim la familiile de fonturi. Cel mai bun și mai versatil font este Verdana. Acest site are doar un astfel de font. Nu are squiggles, este strict și lizibil, ceea ce este exact ceea ce are nevoie utilizatorul primire rapidă informaţii.

2. Selectarea dimensiunii fontului

Alegerea dimensiunii fontului este sarcină provocatoare, pentru că unora le plac fonturile mai mici, iar altora le plac fonturile mai mari. Personal, am ales pentru mine o dimensiune de 14 pixeli. Această dimensiune este un standard în multe domenii (de exemplu, această dimensiune este utilizată atunci când scrieți diplome și cursuri conform GOST). Pe acest site, nu este nevoie să faceți dimensiunea fontului 14 sau mai mult și nici nu este nevoie să o faceți mai mică. Amintiți-vă că cel mai important lucru este ca utilizatorii să aibă o experiență confortabilă de lectură.

Nota

Adesea, aceeași dimensiune pentru diferite fonturi are complet dimensiuni diferiteîn înălțime și, prin urmare, reprodus vizual diferit. Prin urmare, este mai bine să testați cum arată totul și să nu vă deranjați cu un anumit număr 14.

3. Selectarea culorii fontului și a fundalului pentru acesta

Indiferent cât de bune sunt culoarea și fundalul, este totuși incomod să citiți textul pe monitor. Tot ceea ce se poate face este ca lectura să fie cât mai confortabilă. Se crede că textul negru pe fundal alb este foarte ușor de citit, dar dacă cereți părerea oamenilor care lucrează la computere, ei vor spune că fundal alb foarte luminos și îți obosește ochii. Soluția ideală este un fundal ușor gri și are text negru și gri pe el. Puteți citi un astfel de text foarte mult timp fără a vă încorda privirea. De asemenea, bun pentru ochi albastru font.

Combinația de fundal negru și text alb este, de asemenea, foarte populară, dar această combinație nu este potrivită pentru fiecare site. Cu toate acestea, majoritatea site-urilor au design ușor. am gasit lista speciala combinații de font și culori de fundal (în ordinea descrescătoare a lizibilității):

• Albastru pe alb;
  Exemplu - Albastru pe alb
• Negru pe galben;
  Exemplu - negru pe galben
• Verde pe alb;
  Exemplu - Verde pe alb
• Negru pe alb;
  Exemplu - negru pe alb
• Roșu pe galben;
  Exemplu - roșu pe galben
• Roșu pe alb;
  Exemplu - roșu pe alb
• Verde pe roșu;
  Exemplu - verde pe roșu
• Portocaliu pe negru;
  Exemplu - Portocaliu pe negru
• Negru pe violet;
  Exemplu - Negru pe Magenta
• Portocaliu pe alb;
  Exemplu - Portocaliu pe alb
• Roșu pe verde;
  Exemplu - roșu pe verde

4. Alte lucruri mărunte

Printre aceste lucruri mici aș dori să includ și următoarele:

• Textul trebuie să fie cu litere mici, pentru că... un registru mare provoacă iritații;
• Alinierea fontului ar trebui să fie aliniată la stânga pentru că asta este obișnuit cu toată lumea;
• Conținutul nu ar trebui să fie foarte întins în lățime, deoarece utilizatorii sunt leneși și dacă ochii lor trebuie să alerge de la marginea stângă la marginea dreaptă a monitorului, acest lucru va provoca disconfort și pierderea gândirii;
• Fontul trebuie să fie normal, adică nu italic, nu bold, nu subliniat (salvați aceste elemente pentru a evidenția ideile principale din text);

În sfârșit, vreau să spun încă o dată că alegerea fontului și designul acestuia este un element la fel de important ca și alegerea designului pentru site. Nu te angajezi greșeli tipice webmasteri care au decis să iasă în evidență și din această cauză pierd număr mare utilizatorii pentru care sunt create site-uri.

Marcaje

Se crede că textul joacă rolul principal în comunicare, deoarece acesta este cel care informează utilizatorul și îi oferă acestuia continutul cerut. Cu toate acestea, nu subestimați importanța tipografiei: font bun ușurează citirea, în timp ce una proastă, dimpotrivă, face dificilă perceperea textului.

Nu există un singur set de reguli care să fie eficient atunci când alegeți un font. Cu toate acestea, există câteva principii care vor ajuta la îmbunătățirea ușurinței citirii dispozitive mobile Oh.

Funcții de tipografie iOS și Android

La Lansare iOS 9, fontul sistemului iOS a fost Helvetica Neue, dar după lansare noua versiune a fost înlocuit de San Francisco. Fontul este oferit în două stiluri: Afișare (pentru utilizarea în elementele UI ale interfeței și pentru textele cu dimensiuni mari în puncte) și Text (pentru text voluminos dimensiuni mai mici).

În subfamilia Text, distanța dintre litere este mai mare decât în ​​Afișare. Deschiderile acestor fonturi de text sunt, de asemenea, mai largi pentru a face dimensiunile mici ale punctelor mai lizibile. Una dintre caracteristicile San Francisco este că este un font dinamic: își schimbă stilul în funcție de dimensiune. Sistemul comută automat fontul la Afișare după ce dimensiunea acestuia depășește 20 pt.

Android folosește ca fontul de sistem Roboto sau, dacă limba nu o acceptă, Noto. Fiecare dintre ele este prezentată în chirilic.

Design material, care este utilizat pe dispozitivele Android, oferă liniuțe mariîntre elemente, precum și o mare variație a dimensiunilor punctelor pentru a crea ierarhie.

În iOS, în acest scop, de regulă, ei folosesc nu dimensiunea fontului, ci greutatea acestuia. Dacă Roboto are doar șase variante, atunci San Francisco are 15 dintre ele: șase pentru subfamilia Text și nouă pentru Display.

Puteți utiliza orice font True Type (.TTF) în aplicația dvs., dar ar trebui să acordați atenție o atenție deosebită achiziționarea unei licențe. Chiar dacă fontul este gratuit, trebuie să clarificați dacă trebuie să plătiți pentru el utilizare comercială. Licența trebuie să se potrivească și cu solicitarea inițială: fontul care a fost achiziționat pentru interfața web nu poate fi folosit în aplicația mobilă sau în logo.

Într-o aplicație, ar trebui să vă descurcați cu una sau două fonturi: unul pentru textul principal, celălalt pentru titluri. Cu toate acestea, este mai bine să instalați în aplicație un singur font. Atunci când utilizați un alt font decât cel de sistem, este necesar să se țină cont de lizibilitatea acestuia, dimensiunea, lungimea liniei, spațierea între linii și litere.

Lizibilitate

Formele de litere ar trebui să fie clare și ușor de recunoscut - doar în acest caz vor funcționa mai bine ca element de interfață. Multe fonturi sans serif, inclusiv Helvetica, conțin ilizibile majusculă I și l minuscule, deci nu ar trebui selectate pentru dispozitivele mobile.

Source Sans Pro (stânga) și Helvetica (dreapta)

În Helvetica este aproape imposibil să citești primele trei litere, în timp ce Source Sans Pro este ușor de citit. Helvetica nu este potrivit pentru lucrul cu interfețe: fontul a fost creat în 1957 și nu a fost inițial destinat utilizării pe mici ecrane. De aceea Apple a dezvoltat San Francisco.

Dimensiunea fontului și ierarhia conținutului

Dimensiunea fontului afectează lizibilitatea elementelor, în special în blocuri mari text. Citirea textelor cu o dimensiune mică a punctului va lua utilizatorului mai mult timp, deoarece în acest caz îi va fi dificil să găsească începutul și sfârșitul liniei. Drept urmare, cititorul va sări peste o mulțime de informații în mod intenționat.

Cu toate acestea, un font prea mare este, de asemenea, incomod. Deoarece linia este prea scurtă, forțăm cititorul să-și treacă ochii și astfel să-i perturbe ritmul de lectură. În astfel de condiții, este mai dificil să percepi informațiile. Mai bine de folosit parametrii de bază dispozitivul pentru care este creat designul. Pentru iOS este 17pt, pentru Android este 13sp.

Atunci când alegeți o dimensiune de bază a fontului, trebuie să luați în considerare cantitatea de conținut și gama de consumatori. Dacă publicul principal al aplicației sunt persoane de peste 50 de ani, ar trebui să utilizați un font mai mare, cum ar fi 21px, deoarece vederea se deteriorează odată cu vârsta.

O scară tipografică va ajuta la determinarea dimensiunii titlurilor și subtiturilor. Scara clasică, în terminologia lui Robert Bringhurst, progresează astfel: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 și așa mai departe. Cu toate acestea, puteți utiliza o altă gradație (proporția de aur sau intervale armonice). Este convenabil să efectuați calcule folosind un calculator special pe site-ul web modularscale.com.

Este necesar să se decidă în prealabil asupra ierarhiei de conținut pentru a selecta dimensiunile fonturilor în conformitate cu aceasta. Dacă font de bază este 1, atunci antetul nivelului H1 este 3em. Literele și textul mic vor avea o dimensiune mai mică decât dimensiunea de bază.

Exemplu de ierarhie a conținutului în aplicația PhotoCountry

Lungimea șirului

Lungimea optimă a liniei pentru o citire confortabilă este de 50-60 de caractere cu spații. Această dimensiune este potrivită pentru aplicațiile desktop, dar ecranele dispozitivelor mobile sunt mai mici, așa că pentru ei este mai bine să folosești linii de 30-40 de caractere.

Dimensiunea fontului este mai importantă decât lungimea liniei, așa că primul pas este să alegeți dimensiunea corectă a fontului.

„Aer” în text

• Cum dimensiune mai mică ecran, cu atât mai multă atenție trebuie acordată spațierii dintre litere.
• Este mai bine să adăugați „aer” textului și să creșteți înălțimea liniei astfel încât să fie proporțională cu dimensiunea fontului de bază (de obicei corespunde cu 120-150% din dimensiunea textului principal) - acest lucru va facilita citire. Pentru aceasta, este util și sistemul de spațiere, care este necesar pentru a determina dimensiunea diferitelor elemente de text. Dacă fontul folosește proporția de aur, atunci ar trebui să fie folosit și în intervale. În acest fel, designul va arăta îngrijit și armonios.
• Ar trebui să fiți atenți la spațiile dintre paragrafe: aceasta spatiu suplimentar servește drept punct de referință pentru ochi și creează senzația că textul nu este prea dens și este ușor de citit.

Distanța dintre elemente în aplicația PhotoCountries

• Când organizați compoziția ecranului, trebuie să vă amintiți „legea proximității”: obiectele din apropiere sunt percepute ca un singur grup. Și invers: elementele omogene între care există un interval nu vor fi considerate un întreg.

Contrastul culorilor

Contrastul este deosebit de important în designul aplicațiilor mobile, deoarece atunci când este folosit în aer liber, ecranul poate fi foarte reflectorizant. Există două concepții greșite comune în rândul designerilor despre contrastul de culoare:

1. Cu cât contrastul este mai puternic, cu atât este mai dificil pentru ochi. Prin urmare, textul gri este mai bun. Rezultatul este text gri pe un fundal gri sau alb. Cu toate acestea, dacă culoarea textului și a fundalului sunt similare, atunci percepția este dificilă.
2. Cu cât contrastul este mai puternic, cu atât mai bine. Textul care contrastează puternic cu fundalul este, de asemenea, greu de citit. Lectură text alb pe un fundal negru obosește repede ochii. Chiar și utilizatorii cu vedere buna va experimenta disconfort.

Găsirea contrastului potrivit nu este ușor. Ceea ce arată bine pe monitorul unui dezvoltator poate să nu fie vizibil pe ecranul unui utilizator. Un ghid de la .

Raportul minim de contrast pentru blocurile de font este de 4,5:1, cel recomandat este de 7:1. Dar există excepții de la această regulă:

• Text mare (18 puncte și mai mult sau 14 puncte în aldine) - 3:1.
• Textul care face parte dintr-un element de interfață inactiv nu necesită contrast.

Serviciul va ajuta la asigurarea unui contrast suficient de text.

Testare

Fontul selectat trebuie testat în rândul utilizatorilor, pe dispozitive cu ecrane de diferite lățimi. Cu cât sunt incluse mai multe dispozitive în testare, cu atât mai bine.

Dacă utilizați două fonturi, cel mai bine este să accesați discover.typography.com pentru a vă ajuta să alegeți o pereche de fonturi care vor funcționa bine împreună. De asemenea, puteți crea o matrice care arată cum arată diverse combinatii. Pentru a afla cum afectează un font conversia, trebuie să utilizați testarea A/B.

Scrie