ACEST TIP FACE CA DESIGNUL MEU SĂ PARĂ GRAS?

Problema este că tipul nu a fost cu adevărat scalat pentru fiecare dispozitiv. Este o problemă complet evitabilă când luați în considerare o scară tipografică pentru proiecte.

Ce este o scară tipografică?

O scară tipografică vizuală încapsulează dimensiunile, spațiul și proporțiile elementelor de tip față de altele dintr-un proiect. Aceasta include totul, de la stilul textului din corpul principal până la titluri, subtitluri, subtitrări și orice alt element de text.

Scara ajută la determinarea dimensiunii și a plasării elementelor de text în relație unul cu celălalt. Pentru design web, în ​​special, scala tipului vizual corespunde adesea etichetelor din CSS (cum ar fi h1, h2, h3, p și așa mai departe).

O scară de tip vă ajută să creați armonie și ritm în design. De asemenea, vă ține departe de probleme stilistice, deoarece elementele de text corespund elementelor CSS, astfel încât fiecare parte a web designului să folosească aceleași elemente și consecvență.

Scara ar trebui să se bazeze pe dimensiunea textului corpului. (Setați întotdeauna un tip de literă și o dimensiune pentru aceasta mai întâi). Apoi construiește scara în jurul acestei tipografii principale. Nu sunteți sigur de unde să începeți? Google are o recomandare solidă :

1. Utilizați o dimensiune de bază a fontului de 16 pixeli CSS. Ajustați dimensiunea în funcție de proprietățile fontului utilizat.
2. Utilizați dimensiuni relativ la dimensiunea de bază pentru a defini scara tipografică.
3. Textul are nevoie de spațiu vertical între caractere; Recomandarea generală este să utilizați înălțimea de linie implicită a browserului de 1,2 em.
4. Restricționați numărul de fonturi utilizate și scara tipografică.

5. Creați armonie și ritm

6. O scară de tipare face mai mult decât ajută utilizatorii să se deplaseze prin copie, creează armonie și ritm pentru fluxul textului. Acest lucru este important pe orice dispozitiv.

   Deci de unde începi?

7. UX Matters are unele dintre cele mai bune cercetări disponibile cu privire la dimensiunile minime ale textului în funcție de dispozitiv . Rețineți că acestea sunt dimensiuni minime și, deoarece dimensiunile textului corpului continuă să crească (la fel ca și spația dintre linii), ar trebui să luați în considerare cu tărie dimensiunile mai mari ale punctelor. Steven Hoober recomandă să începeți cu cel puțin 40 la sută mai mare decât minimele recomandate. În plus, stilurile de conținut îmbunătățite pot ajunge cu până la 80 la sută peste minimul, dar ar trebui să fii precaut și cu caracterele excepțional de mari.

   Tip de dispozitiv	Dimensiune minima	Recomandare 40% (ajustată pentru o utilizare ușoară)	80% maxim (ajustat pentru o utilizare ușoară)
   Telefon mic	4	5,6 (6)	7,2 (7,5)
   Telefon mare	6	8,4 (8,5)	10,8 (11)
   Phablet	7	9,8 (10)	12,6 (13)
   Comprimat	8	11,2 (11,5)	14,4 (14,5)
   Laptop/Desktop	10	14 (14)	18 (18)

   Odată ce dimensiunea textului corpului este setată, puteți determina cum să dimensionați elementele de text suport. Există o artă plastică în asta și testul ochilor este adesea un loc bun pentru a începe.

   Aproape că nu există un titlu prea mare. Spuneți ceea ce trebuie să spuneți și măriți pentru a scala cuvintele din spațiu. Un titlu cu două rânduri se va simți mai mare decât un rând, chiar dacă textul are exact aceeași dimensiune.

   Cel mai simplu mod de a te gândi la extinderea titlurilor și a altor elemente de testare mai mari este să lucrezi în procente pe baza textului. În timp ce fiecare designer are un punct de plecare diferit, cu 250 la sută mai mare decât textul corpului este o bază bună pentru titlu; 150 la sută pentru h2, 75 la sută pentru h3 și 50 la sută pentru elemente precum ghilimele bloc. (Acesta nu este o regulă, doar un punct de plecare.)

   Iată de ce procentele, mai degrabă decât dimensiunile setate, sunt importante: odată ce setați dimensiunea tipului de corp, procentele ajustează dimensiunile în consecință, indiferent de dimensiunea ecranului. Fiecare element de tip este relativ la tipul de corp.

   Instrucțiuni de caracter și spațiere

   Există și alte reguli la care se uită designerii atunci când vine vorba de tipărire pe ecran. Când vine vorba de spațiere, una dintre regulile de bază a fost să se uite la caracterele pe linie pentru a asigura lizibilitatea.

   • Desktop și dispozitive mari: 60 până la 75 de caractere pe rând
   • Telefoane și dispozitive mici: 35 până la 40 de caractere pe rând

   Rețineți că lizibilitatea pe ecrane mai mici se bazează pe a avea mai puține caractere (text mai mare).

   Aceeași idee este valabilă și pentru spațiere. Aveți nevoie de mai mult spațiu între rândurile de text atunci când dimensiunea ecranului este limitată pentru a facilita citirea și scanarea conținutului de către utilizatori. Luați în considerare adăugarea cu 25% mai multă spațiere între linii pe dispozitive mai mici decât pentru tipografia desktop.

   Dimensiunea și distanța suplimentară ajută la ameliorarea acelui sentiment de strâns sau strâns pe care utilizatorii îl pot simți atunci când încearcă să citească pe dispozitive mai mici. Deoarece pânza este mică, fluxul cititorului și lizibilitatea sunt vitale pentru a menține utilizatorii să deruleze.

   Sfaturi pentru a începe

   Există o mulțime de modalități de a crea o scară tipografică și de a vă asigura că textul nu vă face designul să arate gras. Modul în care procedați depinde probabil de nivelul dvs. de confort cu cod și dezvoltare, pe lângă design.

   Cea mai bună opțiune este să utilizați un design receptiv cu interogări media. Aceasta este opțiunea proiectant-dezvoltator care va oferi cel mai mare nivel de control asupra specificațiilor textului. (Pentru mai multe, reveniți la acele recomandări Google de mai sus.)

   O altă cale este să proiectezi diferite versiuni. Deși acesta este un concept destul de depășit, există încă unele locuri care folosesc adrese URL mobile și URL-uri desktop pentru site-urile lor web. Nu este recomandat în majoritatea cazurilor web design, dar pentru unele site-uri web unde designul este dramatic diferit sau utilizatorii experimentează lucruri diferite, poate fi o opțiune.

   Opțiunea ușoară este să începeți cu o temă pentru site-ul dvs. Asigurați-vă că optați pentru o opțiune complet receptivă. Când utilizați o temă receptivă de înaltă calitate, majoritatea presupunerilor sunt eliminate pentru dvs. Tot ce trebuie să te gândești este dimensiunea textului corpului. Asigurați-vă că verificați totul pentru a vă asigura că dimensiunile tipurilor mobile corespund standardelor dvs.

   3 instrumente pentru a crea o scară de tip

   Există o serie de instrumente disponibile pentru a vă ajuta să vedeți impactul exact al unei scale tipografice vizuale. Iată câteva dintre cele mai bune și mai ușor de utilizat opțiuni.

   • Type Scale : Introduceți text și jucați cu opțiuni precum dimensiunea, scara și fontul chiar pe ecran; gradați CSS-ul sau editați codul direct din instrument;
   • Scară modulară : scara funcționează ca o regulă pentru a ajuta la determinarea dimensiunilor pentru tip; apoi descărcați rezultatele ca plugin Sass sau JS sau vedeți-le pe ecran;
   • Calculator tipografie a raportului de aur : instrumentul optimizează dimensiunea, înălțimea liniei, lățimea și caracterele pe linie folosind raportul de aur

   Concluzie

   Scara tipografică potrivită va păstra designul dvs. cu aspect elegant și svelt. Este armonia adăugată pe care utilizatorii s-ar putea să nu o înțeleagă, dar contribuie la lizibilitatea generală și la utilizarea.

   Este probabil ca scara să fie oprită dacă designul „pur și simplu nu arată corect”. Tipul cu dimensiuni necorespunzătoare poate fi greu de identificat, dar este adesea un loc în care să priviți atunci când ceva despre un web design este dezechilibrat. Joacă-te cu câteva opțiuni diferite pentru scară înainte de a te hotărî cu ceva și reți