Regulile de tipografie web receptivă

Tipografia web receptivă este dificilă - trebuie să aveți ambele cotlete de proiectare și know-how-ul tehnic. Dar oricât de complicat ar fi, să nu fie greșit nu este o opțiune, deoarece tipografia este piatra de temelie a designului web.

Cum obțineți atât designul cât și codul de cod? Cum pot comunica dezvoltatorii dvs. cu designeri de pixeli? Cum pot designerii dvs. de dezvoltatori nonchatali de tipografie? Cea mai rapidă și cea mai simplă modalitate este de a obține designerii și dezvoltatorii dvs. să vorbească aceeași limbă, să se respecte reciproc pentru ambarcațiunile lor și să caute să înțeleagă atât principiile, cât și limitele tipografiei web.

Acest articol urmărește să ofere atât designerilor, cât și dezvoltatorilor fundamentul să înceapă comunicarea cu privire la subiectul tipografiei. Vom acoperi principiile de design necesare și vom explora soluții practice pentru Tipografie receptivă .

Ce este tipografia bună?

"Bun" este întotdeauna subiectiv; Nu este o ancoră fixă ​​pe care o putem împiedica comunicațiile. Pentru designeri și dezvoltatori pentru a comunica eficient, trebuie să începem prin a vorbi despre un numitor comun că ambele părți pot înțelege. Acest numitor este scopul tipografiei.

Tipografia este apariția textului; Îmbrăcați textul în sus. Scopul îmbrăcămintei este acela de a face purtătorul atrăgător suficient pentru a atrage o conversație, dar nu deține atât de multă atenție că cealaltă parte devine distrasă de conversație.

De asemenea, scopul tipografiei este de a permite cititorilor să se concentreze și să se piardă în conținutul textului. Tipografia bună, prin definiție, este tipografia care ajută textul să-și îndeplinească scopul de comunicare.

Două lucruri trebuie să se întâmple ca cititorii să se concentreze și să se scufunde în text. În primul rând, tipografia trebuie să transmită emoția adecvată (dacă există). În al doilea rând, textul trebuie să fie ușor de citit. Acest lucru ne aduce la patru proprietăți esențiale de care aveți nevoie pentru a avea dreptate.

• Familie de fonturi
• Marimea fontului
• Înălțimea liniei (numită și conducere)
• Lățimea textului (numită și măsurătoare de text)

Obținerea familiei de fonturi potrivite ajută emoțiile de bază ale textului să strălucească. Obținerea celeilalte trei proprietăți vă asigură că textul dvs. este ușor de citit. În cea mai mare parte, designerii sunt excelenți la găsirea familiei de fonturi potrivite. Deci, pentru restul acestui articol ne vom concentra pe ceilalți trei factori.

Arta textului lizibil

Primul pas în orice proiect este de a seta marimea fontului , inaltimea liniei și lăţime din textul corpului. Acest proces este numit TIPETTING. Începeți prin tipărirea cu o pagină care conține informații un utilizator necesar. Atât cât mai mult posibil, această pagină ar trebui să conțină mai multe elemente, cum ar fi H1, H2, H3, textul corpului și subtitrările, pentru care trebuie să faceți o alegere conștientă cu privire la ceea ce funcționează pentru designul dvs. Cu cât mai multe elemente conține pagina dvs., cu atât mai bine șansele dvs. de a stabili un schemă de tip care funcționează peste bord.

Când selectați marimea fontului , inaltimea liniei și măsurați pentru textul corpului dvs., asigurați-vă că utilizați conținut real. Dacă nu aveți conținut real, utilizați text din Wikipedia în loc de Lorem Ipsum.

De asemenea, trebuie să vă puneți în aceeași situație pe care o faceți, pentru că distanța dintre ochii unui cititor și ecranul este diferită pentru diferite dispozitive. Dacă sunteți tipăriți pentru un dispozitiv mobil, uitați-vă la ieșirea dvs. printr-un telefon. Dacă sunteți tipăriți pentru un laptop, stați la birou cu laptopul dvs. și așa mai departe.

Odată ce v-ați stabilit în mediul potrivit, începeți procesul de tipărit prin selectarea primei marimea fontului , urmată de măsură și în cele din urmă inaltimea liniei . Țineți minte că nu există o combinație perfectă - uitați-vă la alte pagini pe care le simțiți că aveți o tipografie bună și veți vedea că nici unul dintre ei nu folosește același lucru marimea fontului , inaltimea liniei și măsura. Deci, ceea ce intenționați este pur și simplu text care este ușor de citit.

Setarea dimensiunilor potrivite este mai greu de explicat în scris, așa că am făcut câteva videoclipuri pentru a vă ajuta marimea fontului , măsura și conducere .

Iată câteva linii directoare rapide care vă ajută să vă asigurați că aveți o dimensiune bună a fontului, conducerea și măsurarea.

Fontul dvs. este prea mic dacă:

• Trebuie să vă concentrați pentru a citi textul
• Trebuie să vă uitați la ochi
• Aveți nevoia de a mări

Fontul dvs. este prea mare dacă:

• Începeți să observați forme de scrisori în loc să citiți conținutul
• Puteți citi doar unul la trei cuvinte la un moment dat
• Aveți nevoia de a micșora

Măsura dvs. de text este prea lungă dacă:

• Trebuie să vă întoarceți capul pentru a citi textul
• Pierzi concentrația la jumătatea drumului

Măsura dvs. de text este prea scurtă dacă:

• Vă simțiți iritat când textul se rupe la următoarea linie
• Ochii tăi obosesc să se rătăcească la stânga și la dreapta rapid

Conducerea dvs. este prea îngustă dacă:

• Textul se simte dens și copleșitoare
• Citiți linia greșită a textului accidental

Conducerea dvs. este prea mare dacă:

• Te distrați de spațiul alb între rândurile de cuvinte

Întotdeauna amintiți-vă definiția tipografiei bune: nu vă aflați după perfecțiune, pur și simplu împușcați textul ușor de citit. În timp ce faceți acest lucru, veți dori să vă testați alegerile de tipul dvs. cu publicul (prieteni și colegii fac și testeri mari) pentru a vă asigura că aveți dreptate. Deplasați-vă numai pentru a seta dimensiunile altor elemente atunci când ați terminat tipărirea textului corpului.

Tiparea altor elemente

Mulți designeri și dezvoltatori au ales marimea fontului Pentru elemente precum H1 și H2 vizual, și pur și simplu sperăm că aceste numere magice funcționează bine în designul lor. Dar nu este nevoie să trageți doar numerele din aer subțire; Tipografii au folosit scale de tipografie timp de secole pentru a ajuta la acest lucru. Ce faceți este să alegeți un număr de la scara de tipografie ca mărimea elementului dumneavoastră. Din păcate, aceste scări nu pot fi utilizate direct pentru web, deoarece sunt construite pentru designul de imprimare.

Tim Brown, un expert în domeniul tipografiei, a venit cu o soluție numită scară modulară. Funcționează exact ca o scară de tipografie, cu excepția faptului că construiți scala modulară cu textul corpului pe care l-ați decis.

Pentru a crea scala modulară, luați textul corpului marimea fontului (De asemenea, numită dimensiunea fontului de bază) și se înmulțește cu un raport de mai multe ori până când veți obține o scară. Adesea, raportul pe care îl utilizați este derivat din muzică (deoarece muzica are rădăcini în armonie). De mai sus este un exemplu de scară creată cu ajutorul unui a Calculator de scară modulară .

Când ați terminat construirea scalei modulare, puteți trece la a scrie restul elementelor, culeind un număr de la scară ca marimea fontului . Apoi, setați conducerea și măsurați același proces până când obțineți un echilibru bun de elemente lizibile.

Ritm vertical

Următorul pas este de a ajuta gelul elementelor individuale folosind o tehnică numită ritm vertical. Pentru ca un element să curgă armonios în următorul, trebuie să renunțăm la chestia care le se alătură: spațiul alb. Acest spațiu alb trebuie să fie suficient de mare pentru a diferenția un element din următorul distinct, dar trebuie să fie suficient de mic pentru a se asigura că fluxul nu este rupt.

Cât spațiu alb ar trebui să utilizați? Mulți designeri aleg o figură ca 10px, care este ușor pentru ei să proiecteze în jur. Mulți dezvoltatori, pe de altă parte, tind să biciuie un număr aleator (cum ar fi 6px) fie dintr-un alt sistem de rețea, fie dintr-un articol pe care l-au citit online. Nu e de mirare că acești doi nu pot comunica.

După cum vă puteți imagina, nu este nevoie să vă bazați pe un număr magic pentru spațiul alb; Putem folosi un multiplu din inaltimea liniei valoarea textului corpului nostru. Acest lucru se datorează faptului că recunoaștem instinctiv modele de spațiu alb în text. Cu cât este mai puternic modelul, cu atât mai sigur se simțim, și cu atât este mai ușor să ne lăsăm mințile să rătăcească în conținut.

Pentru a utiliza ritmul vertical, tot ceea ce faceți este:

1. Setați spațiul alb între elemente la un multiplu al bazei inaltimea liniei
2. Seteaza inaltimea liniei a tuturor celorlalte elemente la un multiplu al bazei inaltimea liniei

Multifa în cauză nu trebuie să fie un număr întreg. Puteți utiliza valori precum 0,5x și 1.25x de bază inaltimea liniei pentru a vă oferi mai multă flexibilitate. Aceste valori funcționează deoarece ritmul vertical utilizează principiul repetiției.

Grid de bază sau nu?

Ori de câte ori menționăm ritmul vertical, conceptul de rețea de bază inevitabil intră în imagine. Deși grila de bază poate fi utilă, este mai mult o epavă de tren, deoarece începătorii se concentrează atât de multă energie pe a face ca textul să stea între (sau pe) liniile de bază pe care le simt imposibil de a obține un ritm vertical drept.

Sincer, nu veți obține niciodată rețele de bază pentru a lucra perfect pe web, deoarece matematica din tipografie conține întotdeauna subpixeli (cum ar fi 24,8px), iar toate browserele se ocupă de subtixeli în mod diferit. De exemplu, unele browsere cauzează ca fiecare element de pe pagină să fie oprit cu 1px. Aceste erori 1PX se acumulează și împingeți toate elementele plasate mai jos paginii chiar mai departe de rețea. Ca rezultat, vă recomandăm să utilizați o rețea de bază.

Mergând pe, să mergem în domeniul practicilor receptive și proiectarea pentru mai multe ecrane.

Tipografie pentru mai multe ecrane

Proiectarea tipografiei pentru mai multe ecrane nu este o fetiță medie. Există trei lucruri pe care trebuie să le facem dintr-o perspectivă de proiectare.

În primul rând, distanța dintre ochii unui utilizator și ecranul lor depinde de ce fel de dispozitiv utilizează. În general, utilizatorul va plasa dispozitivul mai departe când se utilizează un ecran mai mare. Acest fenomen înseamnă că trebuie să măriți dimensiunile fontului pe măsură ce crește lățimea dispozitivului.

În al doilea rând, dorim să păstrăm proporțiile între textul corpului și alte elemente consecvente. Aceasta înseamnă că trebuie să creștem dimensiunile tuturor elementelor pe măsură ce creștem dimensiunea textului corpului.

În al treilea rând, la punctele de întrerupere specifice dorim să creștem marimea fontului de elemente specifice (cum ar fi H1) prin alegerea unui număr diferit de la scala modulară. Acest lucru ne permite să controlăm ierarhia vizuală și asigură faptul că elementele sunt atenți doar suficientă pentru a trage un utilizator pentru a citi.

Codificarea tipografiei receptive

Știm că trebuie să creștem dimensiunile dvs. de text proporțional. Cea mai ușoară cale de a face acest lucru este de a crește marimea fontului în cadrul HTML. selector. De asemenea, dorim să folosim unități relative pentru a respecta un utilizator marimea fontului preferinţă.

 HTML {font-dimensiune: 100%;}
@Media (min-lățime: 40em) {
 html {font-dimensiune: 112,5%;}
} 

De asemenea, dorim să folosim o unitate relativă pentru alte elemente, astfel încât acestea să scadă în funcție de HTML marimea fontului ( H2. în exemplul de mai jos). Dacă trebuie să schimbați marimea fontului la un număr diferit în scala modulară, tot ce faceți este să schimbați marimea fontului în consecință ( H1. de mai jos).

 H1 {font-dimensiune: 2.369EM;}
@Media (min-lățime: 40em) {
 html {font-dimensiune: 3.147em;}
}

H2 {font-dimensiune: 1.777Em;} 

Deși procesul arată simplu, dezvoltatorii noi s-ar putea confrunta cu o tona de dureri de cap din cauza matematicii implicate, motiv pentru care vă recomand să folosiți funcții și amestecuri pentru a ajuta. Eu adesea folosesc Domnișoară() de la Biblioteca modulară de scară . Cu aceasta, puteți scrie MS (4) in loc de 3.157EM. și MS (3) in loc de 2.369EM. .

Un exemplu de funcție care poate ușura încărcătura de ritm vertical de calcul este: