Cum să structurați o ierarhie tipografică eficientă

Organizarea eficientă a conținutului într-un design, astfel încât să fie ușor de înțeles și consumat, este una dintre cele mai importante locuri de muncă ale unui designer. Și, deoarece o mare parte dintre designerii de conținut cu care lucrează se bazează pe text, crearea unei ierarhii tipografice eficace este unul dintre cele mai importante lucruri pe care un designer le poate învăța.

În timp ce exersarea și experimentarea creării unei ierarhii eficiente este cea mai bună modalitate de a stăpâni cu adevărat abilitatea, există o serie de linii directoare pe care designerii ar trebui să le învețe mai întâi, înainte de a începe singuri. La urma urmei, este imposibil să încalci regulile în mod eficient fără a ști mai întâi care sunt acestea.

Ce este ierarhia tipografică?

Designerii începători subestimează uneori necesitatea utilizării unei ierarhii a tipografiei. Uită-te totuși la acest exemplu:

Aceeași informație este transmisă pe ambele părți, dar în stânga este imposibil să spunem că există un antet, un subtitlu și un text de corp. În dreapta, este imediat evident că există o ierarhie a informațiilor furnizate.

Ierarhia tipografică arată cititorului pe ce informații să se concentreze – care este cea mai importantă și care pur și simplu susține punctele principale.

Există o varietate de lucruri care alcătuiesc ierarhia tipografică pe web. Acestea includ:

Mărimea. Dimensiunea este, în general, primul lucru la care se îndreaptă noii designeri atunci când încearcă să creeze o ierarhie tipografică. Și pentru un motiv întemeiat: este imediat, ușor de identificat de către cititori. Mai mare = mai important, mai mic = mai puțin important. Dar dimensiunea poate deveni o cârjă atunci când există atât de multe alte opțiuni pentru a crea ierarhie.

Greutate. A face un tip de caractere mai îndrăzneț sau mai subțire este un alt mod ușor de recunoscut de a crea o ierarhie care este ușor de identificat chiar și de către non-designeri.

Culoare. Culoarea este adesea trecută cu vederea ca o modalitate de a crea o ierarhie, dar este o opțiune fantastică. Chiar și utilizarea nuanțelor mai deschise și mai închise ale unei anumite culori poate crea o ierarhie mai distinctă. Crearea unui contrast mai mare între tip și fundal se poate adăuga, de asemenea, la ierarhia tipografică.

Contrast. Dincolo de culori contrastante, contrastul dintre diferitele dimensiuni, greutăți și stiluri de tipar este, de asemenea, cheia pentru crearea ierarhiei tipografice. O diferență de doar unul sau două puncte în dimensiunea tipului nu va crea suficient contrast pentru a face ierarhia vizibilă pentru majoritatea utilizatorilor. În schimb, designerii ar trebui să folosească dimensiuni, greutăți și stiluri ușor de distins pentru a crea cu ușurință un contrast între elemente precum anteturile sau textul corpului.

Caz. Deși scrierea cu majuscule a textului corpului nu este, în general, o idee bună din perspectiva lizibilității, folosirea caracterelor majuscule în titluri sau subtitluri poate ajuta la diferențierea diferitelor titluri sau alt tip.

Poziție și aliniere. Poziționarea titlurilor și subtitlurilor, împreună cu alte tipuri pe care un designer dorește să iasă în evidență, poate avea un impact mare asupra locului în care tipul se încadrează într-o ierarhie. Tipul de centrare, de exemplu, tinde să-l scoată în evidență. Setarea tipului în afara marginilor obișnuite ale unei pagini poate face, de asemenea, ca acel tip să iasă în evidență în ierarhia unei pagini.

Cum să creați o ierarhie tipografică (și să vă organizați vizual designul)

Designerii au o mulțime de opțiuni atunci când vine vorba de crearea unei ierarhii tipografice. Dar doar a ști ce înseamnă crearea unei ierarhii nu îi va ajuta neapărat pe designeri să creeze o ierarhie eficientă.

Unul dintre primele lucruri de luat în considerare este câte niveluri de ierarhie ar trebui să aibă un design. Ca regulă generală, fiecare design ar trebui să includă trei niveluri de ierarhie: titlu, subtitlu și text. De acolo, depinde de designer să ia în considerare niveluri suplimentare care ar putea fi necesare. Acestea pot include subtitluri, subtitluri suplimentare, citate și meta informații (pentru lucruri precum autori sau datele dintr-un articol).

De acolo, este esențial să ne dăm seama cum să distingem diferitele părți ale ierarhiei. Ar trebui să fie de la sine înțeles, dar titlurile ar trebui să fie mai proeminente decât subtitlurile, care ar trebui să fie mai proeminente decât corpul textului. Subtitrările ar trebui, în general, să fie mai puțin proeminente decât corpul textului, iar ghilimele ar trebui să fie undeva între textul textului și subtitlurile.

Dimensiune tip

Scale tipografice tradiționale există pentru a ajuta designerii să înceapă. Dar acestea sunt doar un punct de plecare, iar designerii ar trebui să se simtă liberi să experimenteze cu diferite greutăți și stiluri, în timp ce se abat de la aceste cântare tradiționale. Majoritatea își bazează scara pe dimensiunea textului corpului și se extind de acolo.

Scala tipografică clasică din The Elements of Typographic Style este familiară pentru majoritatea designerilor, deoarece tind să fie valorile implicite oferite de majoritatea programelor de procesare de text atunci când selectează dimensiunile fontului. Scara este:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 și 72.

Există exemple suplimentare de scară tipografică care urmează diverse ecuații matematice pentru calcularea dimensiunilor crescătoare.

Designerii au tendința de a utiliza implicit o dimensiune a textului de 12 puncte, dar creșterea acesteia la 14 sau 16 (sau chiar până la 24) poate duce la o lizibilitate crescută, în funcție de tipul de caractere utilizat. Site-ul personal al lui Jeffrey Zeldman, de exemplu, folosește o dimensiune a fontului de 24 px pentru corpul copiei, în timp ce Vogue.com folosește o dimensiune a textului de 19 px.

Înainte de a finaliza scara reală, totuși, designerii ar trebui să se asigure că fonturile folosite în design au fost finalizate. Diferitele fonturi pot apărea semnificativ mai mari sau mai mici chiar și atunci când din punct de vedere tehnic au „aceeași” dimensiune.

Alegerea fonturilor de tip coordonare

Ceea ce distinge adesea un design „profesional” de eforturile mai amatori este combinația de fonturi. Combinarea eficientă a fonturilor este parțial instinct și parțial știință, dar există câteva linii directoare pe care designerii le pot urma pentru a combina fonturi din diferite familii.

În primul rând, amestecarea serif-urilor cu sans-serif este semnificativ mai ușoară decât a combina două serif-uri sau două sans-serif. Dar nu este la fel de simplu ca să apuci orice serif și orice sans serif și să le arunci împreună într-un design.

Luați în considerare contextul în care vor fi folosite fonturile. De exemplu, dacă designul ar trebui să fie ușor și distractiv, atunci asigurați-vă că fonturile se potrivesc acelei dispoziții. Dacă designul este mai serios, atunci fonturile ar trebui să reflecte acest lucru. Cu alte cuvinte, starea de spirit a oricăror fonturi care sunt combinate ar trebui să se potrivească.

Designerii ar trebui să folosească contrastul și în avantajul lor. Combinarea fonturilor subțiri și groase funcționează adesea mai bine decât combinarea a două care sunt foarte asemănătoare ca greutate.

Căutați fonturi cu înălțimi x similare (distanța dintre linia de bază și linia medie a literelor minuscule dintr-un tip de literă). Acest lucru ajută la prevenirea conflictelor între fonturi. Alte lucruri care ajută la prevenirea conflictelor includ kerning și forme similare de caractere. Fonturile cu forme de litere foarte rotunde nu trebuie combinate cu fonturi mai pătrate.

În timp ce liniile directoare pot fi utile în crearea combinațiilor de fonturi, nimic nu va înlocui experimentarea și practica. Designerii ar trebui să petreacă timp experimentând cu fonturi și să exerseze combinându-le cât de des pot. Găsirea câtorva combinații de caractere alternative care pot funcționa într-o varietate de contexte este utilă și pentru proiectele în care bugetul și resursele disponibile nu permit o mulțime de încercări și erori.

Cu aceste linii directoare în mână, designerii pot urma procesul în patru pași pe care sursa de tipografie web Better Web Type îl stabilește pentru a crea combinații eficiente:

1. Găsiți un font ancora pentru textul principal
2. Găsiți câteva fonturi secundare pentru posibile combinații
3. Evaluați combinațiile
4. Eliminați/alegeți combinațiile de fonturi

Considerații suplimentare

Experimentarea cu diferite stiluri și ponderi după selectarea fonturilor finale poate crea niveluri suplimentare de ierarhie fără a fi nevoie să creați titluri principale super-dimensionate. Păstrarea tipurilor de caractere aproximativ de aceeași dimensiune, dar îndrăznerea titlului mai important, în timp ce pe cea mai puțin importantă italice creează o ierarhie vizuală definită.

Același lucru se poate face cu culoarea. Un subtitlu într-o culoare de accent va ieși în evidență mai mult decât un subtitlu care are aceeași culoare cu corpul textului. Designerii ar trebui să se joace cu culoarea în subtitlurile lor pentru a separa textul mai important, fără a se baza doar pe dimensiunea textului.

Spațierea poate fi, de asemenea, utilizată pentru a separa titlurile și subtitlurile importante. Crearea de mai mult spațiu în jurul titlurilor, astfel încât acestea să iasă în evidență față de textul însoțitor, le face și mai proeminente. În schimb, subtitlurile care sunt spațiate la fel ca textul corpului devin mai puțin importante.

Chiar și spațierea dintre caractere poate fi folosită pentru a crea ierarhie. Spațierea caracterelor poate face o anumită linie mai proeminentă. Acest lucru este deosebit de eficient atunci când este combinat cu scrierea cu majuscule. Designerii ar trebui să aibă grijă să nu exagereze, totuși, deoarece poate arăta și amator dacă este folosit în exces.

Concluzie

Experimentarea și practica sunt cele mai bune modalități de a stăpâni ierarhia tipografică, dar învățarea acestor linii directoare îi va ajuta pe designeri să înceapă cu piciorul bun. Învățarea modului în care dimensiunea, culoarea, spațierea, greutatea și alți factori contribuie la o ierarhie eficientă este primul pas.

Odată ce aceste elemente de bază sunt stabilite în mintea (și practică) unui designer, aceștia pot crea mai intuitiv ierarhii vizuale care urmează sau încalcă „regulile”, după cum este necesar, pentru a crea modele unice care sunt inspirate și încântătoare pentru utilizatori.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Proiectare pentru lizibilitate – Un ghid pentru tipografie web (cu infografică)
• Înțelegerea nuanțelor clasificării fonturilor
• Fundamente de proiectare – Un ghid pentru ierarhia vizuală (cu infografică)
• Stiluri de tipărire pentru Web și Design de imprimare
• Îmbunătățiți-vă UX cu o ierarhie vizuală clară