ce Font sunt ritm Vertical și scară modulară?

oricine care a fost în raza auditivă de mine a auzit probabil ramblings mele despre ghiduri de stil, și o mare parte din care în ultima vreme a fost stabilirea unui ritm vertical și folosind o scară modulară. Dar despre ce font vorbesc? În acest articol vă voi prezenta de ce ar trebui să vă pese de ritmul vertical și de scara modulară, să le definiți și să terminați cu o demonstrație despre cum să le integrați în următorul dvs. proiect.

De Ce Ar Trebui Să-Mi Pese?

am vrut să încep cu asta mai întâi pentru că simt că este benefic să înțelegem problema pe care încercăm să o rezolvăm și importanța atât a ritmului vertical, cât și a scării modulare ca părți ale unei soluții globale. Întregul motiv pentru care acest articol este atât pe ritm vertical, cât și pe scară modulară se datorează faptului că ambele contribuie la armonia vizuală a unei pagini. Ritmul Vertical angajează și ghidează cititorul în jos pe pagină, ritmul vertical bun face ca aspectul să fie mai echilibrat și mai frumos, iar conținutul său să fie mai lizibil. Scara modulară oferă numere rezonante folosind rapoarte relevante din punct de vedere cultural, plăcute din punct de vedere istoric și încurajează repetarea atentă. Repetarea generează familiaritate și consolidează un model care ajută utilizatorul să înțeleagă conținutul și aspectul. Exemplul înainte de mai jos utilizează dimensiunile implicite ale fontului și înălțimile de linie ale browserului, în timp ce exemplul după arată cum s-a schimbat același conținut atunci când aplic conceptele pe care le introduc mai jos.

înainte și după aplicarea conceptelor de ritm vertical și scară modulară

ritm Vertical

ritm Vertical este spațierea și dispunerea textului pe măsură ce utilizatorul coboară pagina. Ritm Vertical . Este contribuit de trei factori; dimensiunea fontului, înălțimea liniei și marginile verticale sau căptușeala. Unitatea de bază a spațiului vertical este înălțimea liniei-de obicei înălțimea liniei copiei corpului, deoarece acesta va fi conținutul dominant pe orice pagină dată. Pentru a ilustra, voi lua exemple de pe un site recent la care am lucrat. La începutul proiectului, ni s-au oferit modele care utilizează fontul Open Sans 15px cu o înălțime a liniei de 25px. Deci, în acest exemplu de mai jos unitatea de bază ritm vertical ar fi 25px.

exemplu de înălțime a liniei de ritm Vertical

exemplu de înălțime a liniei de ritm Vertical

cu unitatea noastră de bază a dat seama, trebuie să ne asigurăm acum că este menținută în întreaga copie a corpului. Un loc obișnuit pentru a pierde ritmul este în golurile de marjă stabilite între elementele de nivel de bloc. Tratamentul implicit al browserului paragrafelor este de a insera o marjă de sus și de jos a 1em și de a o numi o zi. Acest lucru nu este ideal dacă ritmul trebuie menținut, în exemplul nostru de mai jos, asta ar însemna că marjele ar fi 15px în loc de 25px de care avem nevoie. De asemenea, este demn de remarcat faptul că diferite fonturi au înălțimi de linie diferite încorporate în ele, provocând în continuare spațiere inconsistentă vizual. Deci, marginile și înălțimile liniei trebuie resetate.

un exemplu care arată golurile de la marginile dintre elementele de nivel bloc

un exemplu care arată golurile de la marginile dintre elementele de nivel bloc

aceasta este o practică obișnuită în zilele noastre, dar am vrut să observ că este întotdeauna cel mai bine să începeți lucrurile pe un teren de joc egal, trebuie să ne asigurăm că toate măsurătorile verticale, inclusiv înălțimea liniei, căptușeala și marginile sunt resetate într-un mod compatibil cu browserul încrucișat. Cu aceste condiții de concurență echitabile, vom putea seta aceste valori după cum este necesar, menținând în același timp ritmul. Am folosit normalizare.css, bun ol ‘ Reset CSS de la Eric Meyer, și chiar următorul bloc cu succes. Indiferent de alegerea dvs. va depinde de nevoile dvs. de proiecte.

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p, blockquote,th,td { margin:0; padding:0; }

cu orice site sunt obligate să fie destul de câteva variații în dimensiuni de text pentru elemente, cum ar fi titluri și citate bloc, toate aceste dimensiuni de text diferite ar trebui să ia, de asemenea, multipli ai unității de bază. Continuând exemplul nostru, asta ar însemna că fiecare deviere de la dimensiunea textului paragrafului ar trebui să ia în continuare multipli de 25px. Aici începe adevărata distracție, ajustând înălțimea liniei și marja acestor elemente în consecință. Vom analiza mai multe detalii despre acest lucru în ultima secțiune despre cum să integrați aceste concepte în proiectele dvs.

ilustrarea mai multor variații ale dimensiunii textului

ilustrarea mai multor variații ale dimensiunii textului

scara modulară

scara modulară este o secvență de numere care se raportează între ele într-un mod semnificativ.

„o scară modulară, ca o scară muzicală, este un set prestabilit de proporții armonioase.”

– Robert Bringhurst,

începeți cu un raport și un număr. La fel ca ritmul Vertical, cel mai bun mod de a asigura eficacitatea numărului dvs. de pornire este să utilizați copia corpului. Deoarece aceasta stabilește scara, dorim să folosim dimensiunea fontului, mai degrabă decât înălțimea liniei. Continuând cu același exemplu de mai înainte, am folosi 15px ca număr de bază. Raportul este mai dificil de găsit, cele mai frecvente sunt raportul de aur (1.618) și al patrulea Perfect (1.333). Ambele sunt relevante din punct de vedere cultural; primul fiind un favorit în matematica clasică greacă și renascentistă, arhitectură și artă și, de asemenea, găsit în natură; acesta din urmă a fost popular în muzica de la începutul secolului 20. O regulă bună este să luați în considerare cât de multă varietate tipografică și de aspect aveți nevoie. Dacă aveți nevoie de pași pentru toate cele șase anteturi, probabil că veți dori să alegeți un raport care să permită mai multă subtilitate între pași.

pe web, utilizarea unei scale modulare înseamnă alegerea numerelor din scală pentru dimensiunile tipului, înălțimile liniei, lungimea liniei (lățimea unei linii de copiere), marginile, lățimea coloanei și multe altele.

cu un raport și un număr ales, le puteți înmulți și împărți pentru a obține multe numere rezonante. Mai jos este o listă de numere rezonante pe care le-am obține folosind baza 15px și „raportul de aur” de 1: 1.618 pentru înmulțire/ împărțire, folosesc super-util modularscale.com site – ul să facă aceste calcule pentru mine și să-mi arate vizual cum arată secvența rezultată.

un exemplu de scară modulară aplicată cu raportul de aur

un exemplu de scară modulară aplicat cu raportul de aur de la modularscale.com

ceea ce a făcut acest lucru a fost să ia numărul de pornire de 15 și

  • înmulțiți-l cu raportul de aur de 1.618 pentru a obține 24.27
  • apoi înmulțit cu 1.618 pentru a obține 39.269, și așa mai departe
  • de asemenea, împărțit 15 de 1.618 pentru a obține 9.271
  • apoi împărțit 1.618 pentru a obține 5.73 și așa mai departe

pentru comparație, mai jos este aceeași bază 15px și raportul „perfect al patrulea” de la 1 la 1.333 menționat anterior. După cum puteți vedea, acest raport are mai multă subtilitate între pașii din noul set de calcule. Deoarece raportul este mai mic, pașii dintre scară sunt mai apropiați și mai subtili.

un exemplu de scară modulară aplicată cu al patrulea raport Perfect

un exemplu de scară modulară aplicată cu al patrulea raport Perfect de la modularscale.com

de asemenea, aveți opțiunea de a defini un al doilea număr de bază și raportul pentru a genera ceea ce se numește o scară modulară dublu-catenar. Aceasta combină două seturi de numere rezonante pentru a vă oferi mai multe opțiuni de măsurare care completează golurile primei scale. Pentru cel de-al doilea număr de bază, am văzut că oamenii folosesc text de subtitrare mai mic și numere mai mari, cum ar fi lățimea unei coloane din grila de 12 coloane pe care o implementează. Atâta timp cât este un număr „important” pentru aspect, nu există un răspuns greșit. Iată cum ar arăta adăugarea unei a doua baze de 95px (dimensiunea unei coloane într-un aspect larg de 1140px).

un exemplu de scară modulară aplicată cu raportul auriu și două numere de bază

un exemplu de scară modulară aplicat cu raportul de aur și două numere de bază de la modularscale.com

grozav! Acum avem mult mai multe opțiuni cu care să lucrăm!

lecție de Istorie

o ilustrație de sortare metalică
un caz de tip, în cazul în care tipurile de metal au fost depozitate în compartimente mici de sertare

originea stabilirii unei scări tipografice a venit atât din nevoia practică, cât și din judecata estetică. Înapoi Când imprimarea a fost făcută prin tipografie, tipul mobil a fost compus manual pentru fiecare pagină folosind sorturi de metal turnat (dreapta sus). Nu era practic să fabricăm și să stocăm seturi întregi de caractere ale fiecărui tip de caractere în toate dimensiunile posibile. De-a lungul timpului, tipografii s-au stabilit pe o gamă utilizabilă de dimensiuni care au funcționat armonios împreună.

literele Bonus au fost organizate și depozitate în compartimente mici de sertare (dreapta jos) într – un caz Tip. Literele majuscule erau stocate în mod tradițional într-un sertar separat sau o carcasă plasată deasupra carcasei care deținea celelalte litere. Aceasta este originea Termenilor” majuscule „și ” minuscule”.”

asemănări și diferențe

acum să trecem rapid peste unele asemănări și diferențe între ritmul Vertical și scara modulară

așa cum am menționat la început, acest articol include atât ritmul vertical, cât și scara modulară, deoarece ambele sunt interdependente și contribuie la armonia vizuală a unei pagini. Atât ritmul vertical, cât și scara modulară folosesc cel mai adesea copia corpului primar pentru numerele lor de bază de pornire.

unde diferă cel mai mult este în aplicația lor – ritmul vertical se referă doar la tipografie unde scara modulară oferă un set de numere rezonante de utilizat pentru tipografie, coloane, lungimi de linie etc. O altă diferență cheie este cât de stricte sunt destinate a fi urmate. Cu ritm vertical mai consecvent urmați modelul mai bine ritmul va fi. Pe de altă parte, scara modulară este mai mult un instrument care poate fi improvizat după cum este necesar. Citatul de mai jos se referă la matematica implicată în scara modulară.

„matematica nu este un substitut pentru ochiul unui designer experimentat, dar poate oferi atât indicii, cât și constrângeri pentru luarea deciziilor.”

– Tim Brown,

integrare

sperăm că până acum v-am convins că aceste metodologii sunt benefice și merită timpul dvs. pentru a le implementa, deoarece am două vești proaste.

în primul rând, o presupunere omniprezentă este: „pot conecta câteva numere într-un generator și totul funcționează!”Deși există instrumente online care ajută la o mulțime de matematică și presupuneri, vor exista totuși unele încercări și erori. Fiecare proiect este diferit, deci o soluție perfect viabilă pentru unul nu se va potrivi neapărat pentru altul.

în al doilea rând, toate materialele pe care le-am găsit online legate de aceste subiecte provin din mentalitatea de design sau design-dev în care persoana care determină scara modulară și ritmul vertical este cea care se ocupă în cele din urmă de luarea acestor decizii tipografice. În cazul nostru, de cele mai multe ori, suntem înmânate modele care trebuie convertite din schiță/PSD în web.

dar există speranță! Pe proiectele mele cele mai recente, am luat cu succes ceea ce a fost furnizat de o echipa de design și a fost capabil să le lucreze într-un ritm și scară care se potrivesc liniile directoare menționate până în prezent menținând în același timp, de asemenea, integritatea de proiectare. Trucul este să obțineți calculele cât mai aproape posibil și să configurați o pagină de exemplu care să ilustreze clar beneficiile înainte de a contacta echipa de proiectare pentru ca OK să avanseze cu modificările. Din experiența mea, au fost tocilari de tip chiar mai mari decât mine și au apreciat efortul suplimentar implicat.

v-a vorbit acest articol? Sunteți amețit cu perspectiva uniformității și consistenței inspirate de matematică în activitatea de proiectare? În plus față de soluțiile complete end-to-end, cum ar fi reviziile site-urilor web și mobile, avem cei mai buni designeri din clasă pentru fiecare proiect, asigurând consecvența și transformând visele clienților în realitate. Consultați contribuția noastră recentă la builtinchicago.com la angajarea designerilor și a pozițiilor noastre de design deschise.

Lasă un răspuns

Adresa ta de email nu va fi publicată.