Înțelegerea ierarhiei tipografice

Una dintre cele mai importante tehnici pentru conținutul eficient de comunicare (sau "cinste") este utilizarea ierarhiei tipografice. Ierarhia tipografică este un sistem de organizare a tipului care stabilește o ordine de importanță în cadrul datelor, permițând cititorului să găsească cu ușurință ceea ce caută și să navigheze în conținut. Acesta ajută ghidul cititorului să privească unde începe și se termină o secțiune, permițând în același timp utilizatorului să izoleze anumite informații pe baza utilizării consecvente a stilului într-un corp de text.

"Tipografia există pentru onorarea conținutului" - Robert Bringhurst: Elementele stilului tipografic

Un exemplu simplu

Să examinăm un exemplu de conținut cu și fără o ierarhie proiectată.

Imaginea de mai jos este o listă de concerte care se joacă la fața locului în aer liber de pe strada din casa mea. De dragul acestui exemplu, să spunem că am weekend-ul de 15-17 august liber și vreau să văd dacă există un concert pe care aș vrea să-l prezint în acel moment. În scenariul de mai jos, aceasta este o sarcină mult mai dificilă decât ar trebui să fie. Fără orice tip de ierarhie, trebuie să treci prin multe date pentru a găsi datele la concerte. Imaginați-vă că încercați să căutați o listă de 50 de concerte.

Ok, poate că sunt dramatic în exemplu, dar putem face acest lucru mult mai ușor.

După cum puteți vedea în exemplul următor, titlul, data și descrierile sunt toate redate în mod unic, consecvent și izolat, utilizând spațierea paragrafelor. Acest lucru ne permite să izolăm cu ușurință datele (sau numele benzii care contează) bazate pe stilul de joc, plus putem obține informațiile de care avem nevoie. Se pare că mergem la spectacolul Fraților Avett!


Ierarhia și Web-ul

Trebuie subliniat faptul că atunci când se proiectează pentru web, există un alt strat care trebuie luat în considerare. O pagină web are o ierarhie care nu numai că este citită, ci conține interacțiune. Pagina ca întreg trebuie să fie proiectată într-un mod care să comunice în mod clar utilizatorului ce acțiuni sunt disponibile și cum să acceseze cu ușurință informațiile pe care le caută, cum să cumpere un element etc..

În sensul acestui articol, totuși, vorbim strict despre ierarhie, așa cum se aplică la tip. Din fericire pentru noi, avem propria noastră etichetă HTML utilă care ne permite să stabilim semantic ierarhia tipografică în site-urile pe care le construim. Rubricile de etichetare (etichetele H) ne permit să specificăm o ordine de importanță în conținutul nostru: H1 până la H6, H1 fiind cel mai important, H6 fiind cel mai puțin important. Motoarele de căutare utilizează aceste date pentru a interpreta prioritatea conținutului pe o pagină Web.

Dar cum putem să stilisem în mod efectiv aceste etichete H într-un mod care are sens cu conținutul nostru? Mă bucur că ai întrebat!


Tehnici de styling

Există câteva metode de bază pentru stabilirea unei ierarhii tipografice vizuale:

  • mărimea
  • Greutate
  • Culoare
  • Poziţie
  • Tip Contrast

Cel mai frecvent aceste metode sunt utilizate în combinație cu altele. În lista de concerte afișată mai devreme, s-au folosit toate dimensiunile, culorile, spațiul și contrastul de tip. Combinațiile sunt literalmente fără sfârșit.

mărimea

Aceasta este metoda cea mai simplă și cea mai comună pentru stabilirea ierarhiei.

Greutate

Pur și simplu folosind o greutate mai îndrăzneață de un font poate ajuta la izolare.

Culoare

Culoarea joacă un rol important în ceea ce privește ochiul nostru ca primar și secundar. In general vorbind; culorile calde pop, culorile mai reci.

Poziţie

În cazul în care secțiunile de informații sunt poziționate în relație unele cu altele, se poate stabili o ierarhie.

Tipuri de contrast

O modalitate excelentă de a realiza ierarhia este utilizarea de fonturi contrastante.

Combinaţie

După cum sa menționat anterior, aceste metode pot fi cele mai eficiente atunci când sunt utilizate în combinație cu altele. Aceasta este partea distractivă - decideți ce combinație este potrivită pentru conținutul și structura dvs.!


Spacing Matters

Unul dintre cele mai importante concepte în designul de tip este spațierea. Este unul dintre cele mai dificile concepte de a înțelege designerii începători, dar este și unul dintre cele mai vizibile. Spațierea tipografică corectă este esențială pentru stabilirea ierarhiei; poate face diferența între confuzie și claritate. Este folosit în majoritatea sistemelor ierarhice și este prezent în toate exemplele din acest articol.

Regula de la proximitate în design, în general, afirmă că elementele asociate ar trebui să apară mai aproape una de cealaltă decât elementele care nu sunt legate. Cu toate acestea, distanța corectă implică mai mult decât o întoarcere grea între secțiuni de tip. În general, o întoarcere grea creează prea mult spațiu între conținut în contextul unui paragraf. Ar trebui să se utilizeze distanțele paragrafelor - înainte sau după -. Tind să folosesc spațierea paragrafelor care este egală cu jumătate din înălțimea liniei (sau de conducere). Acest lucru permite în mod obișnuit grupului de conținut să rămână împreună, oferind în același timp o împărțire adecvată a conținutului în cadrul acestuia.


Alte considerații

Este important ca semnificația unei anumite părți de conținut să fie luată în considerare atunci când se gândește la ierarhie. Care este obiectul conținutului? Ce încearcă să comunice? Dacă nu știți, citiți-o înainte de a lua decizii privind ierarhia și stilul.

În unele cazuri, puteți avea libertatea de a utiliza oricare dintre metodele ierarhice enumerate mai sus, dar în alte cazuri puteți fi limitat la un anumit spațiu vertical sau orizontal sau vă preocupați de un contrast adecvat al tipului pe un fundal. Evaluați metodele care funcționează pentru situație și folosiți cele care au sens. Vechea mantra "mai simplă este mai bună" se aplică de obicei aici. Amintiți-vă, scopul este de a prezenta conținutul într-un mod organizat.


Resurse

Acum du-te creați niște frumusețe ierarhică. Dacă sunteți interesat, am oferit câteva resurse interesante legate de tipul, ierarhia și web:

  • Tipul de tip: Ierarhia tipografică
  • Tipografie și web de Samantha Warren
  • Crearea unor ierarhii vizuale incitante si neobisnuite pe revista Smashing
  • Elementele stilului tipografic aplicate pe Web
  • Bazele de proiectare: Principiul de proximitate
  • Elementele stilului tipografic de Robert Bringhurst