9 savjeta za bolju tipografsku hijerarhiju
Svaki projekt zahtijeva sustav i hijerarhiju za tekstualne elemente. Zamislite sve male dijelove teksta koji se koriste u dizajnu - naslove, kopiju tijela, navigacijske elemente, pravne podatke, opise i tako dalje.
Ali kako stvoriti tu hijerarhiju tako da svaki tekstni element nesmetano teče prema sljedećem? Danas ćemo vas voditi korak po korak kroz izgradnju sustava hijerarhije tipografije koja se može koristiti za gotovo bilo koji dizajnerski projekt. (A mi savjete upoređujemo s lijepim primjerima sjajne tipografije kako bismo vam pomogli prikupiti malo inspiracije.)
Istražite elemente Envatoa
1. Započnite s udobnom kopijom tijela
Iako možda želite započeti s kul tretmanom naslova, mjesto za početak zapravo je u sredini. Najprije utvrdite udoban oblik, veličinu i razmak za kopiju glavnog tijela.
Ovo bi trebalo imati smisla, jer je to većina teksta u dizajnu. Bilo da gradite web stranicu ili brošuru, ovaj je koncept isti. Idealna čitljivost za kopiju tijela je negdje između 50 i 60 znakova po retku (ili stupcu), prema Baymard institutu. Ova će vam smjernica pomoći da postavite ljestvicu za čitljiv tekst i račune za različite tipove znakova (poput redovitih naspram kondenziranih na ploči).
2. Izgradite ljestvicu
Nakon što znate kako će izgledati tijelo tijela, možete postaviti ljestvicu oko njega za sve ostale tekstualne elemente u dizajnu. Može se lako zanemariti određeni tekstni blokovi; napraviti popis svake različite upotrebe teksta u projektu.
- Kopija tijela
- naslovi
- podnaslovi
- Uhićenje
- Blok citati
- Navigacijski elementi
- Informacije o podnožju
- Pravna kopija ili odricanje od odgovornosti
Sada stvorite ljestvicu koja diktira vrstu teksta, raspon veličine i upotrebu za svaki od ovih elemenata. (I ugradite ga u svoj CSS za datoteke web stranica ili stilove datoteka za radne dokumente.) Postoji nekoliko načina za izradu ljestvice, ali postotak veličine može biti dobra polazna točka. Možete postaviti i ljestvicu na temelju matematike iza osnovne mreže ili vizualno.
Evo jednostavne skale za početak:
- Veličina kopije tijela
- Naslovi su veličina kopije puta 220%
- Podbrojevi su veličina kopije tijela 150 puta
- Navigacijski elementi su veličina kopije tijela 80 puta
- Footer / legal copy je veličina tijela puta 80%
3. Mislite najveće do najmanje, odozdo prema dolje
Ovo je pravilo prilično jednostavno: Najveći i najvažniji tekst treba biti na vrhu, a veličine se smanjuju dok čitate stranicu ili zaslon.
To ne znači da ovo pravilo ne možete prekršiti s vremena na vrijeme s nekom finoćom dizajna, ali uvijek bi trebalo predstavljati polazište za razvoj tipografske hijerarhije. (Tko će se stvarno kretati do kraja web stranice po naslovu, a zatim natrag na vrh da biste započeli čitati?)
4. Uspostavite pravila za svemir
Podjednako važan koliko i veličina slova je prostor između i oko njega. Čimbenici za određivanje prostora uključuju vodeće (ili visine linija), udubine (ili ne), omotače i oluke te poravnavanje.
Razmislite o razmacima razmaka koji su odraz skale koja se koristi za određivanje veličine teksta. Veličina platna je također prilično važna i ovdje. Veća platna mogu se čitati sa strožim razmakom od malih platna. (Zato mnogi projekti imaju mnogo labavije specifikacije razmaka za uređaje poput mobilnih telefona i stroža pravila za radne površine.)
Baš kao i kod veličina slova, pravila za razmake trebaju se unaprijed postaviti za cjelokupni okvir dizajna. Dosljedan, čist razmak jedna je od malih stvari koje mogu stvoriti ili pokvariti dizajn.
5. Postavite pravila za podebljane i svrdle
Iako podebljani i kurzivi nisu različiti elementi ili veličine, upotreba je važna. (Samo zamislite kako će dizajn izgledati ako je svaka druga riječ podebljana.)
Zbog toga su smjernice za podebljane i kurzive posebno važne. Umjesto da pogledamo veličinu ili prostor, razmatranje je mnogo kontekstualnije. Specifikacije upotrebe mogu reći da samo toliko riječi ili izraza (ili određenih riječi ili izraza) može imati ovaj postupak. Česta je pogreška pretjerivati s podebljanim i kosim slovima; kad sumnjate, nemojte ga koristiti.
6. Stvorite "Z"
Uobičajeni obrazac čitanja je u obliku slova Z. Bez obzira da li dizajnirate za jezik koji čita slijeva udesno ili desno udesno (okrenite Z), korisnici će čitati iz jednog ugla preko crte do kraja, a zatim se vratiti natrag početni ugao i preko crte u ponavljajućem uzorku.
Koristite ovaj prirodni tijek prilikom postavljanja tekstualnih elemenata na zaslon. Ovaj oblik Z-a zbog toga većina marki postavlja svoj logotip u gornji lijevi kut. To je prvo mjesto na koje oko pada pri čitanju.
7. Razmislite o vizualnoj težini
Veličina nije jedini čimbenik kada je riječ o tome kako veliki tekstualni element izgleda na zaslonu. Vizualna težina je jednako važna i može utjecati na način stvaranja tipografske razmjere.
Tipkovnice će izgledati veće kada:
- Oni uključuju guste utege
- Uključuju procvat ili ukrase
- Široki su
- Oni su novost u bazi
- Imaju veće visine x
- Koriste se kao sve kape
Tipkovnice će izgledati manje kada:
- Oni su kondenzirani
- Uključuju lagane ili tanke širine hoda
- Malo je kontrasta s pozadinom
- Koriste se malim slovima
8. Stvorite akcente
Postoje određene riječi koje želite istaknuti da padaju malo izvan uobičajene tipografske ljestvice. Dodavanje akcenta slovima može se istaknuti bez prilagođavanja stvarne veličine ili slova.
Uobičajeni akcenti uključuju:
- Boja
- Naglasiti
- vrhunac
- Tekst u gumbu ili obliku
- Jednostavna animacija
- Promijenite u slučaju druge vrste iste veličine
Lijepo od bilo kojeg naglaska unutar hijerarhije tipa je to što je to neposredna privlačnost pažnje. Ti se elementi trebaju koristiti štedljivo za najveći utjecaj i za ključne elemente u dizajnu.
9. Koristite "test očiju"
Na kraju, svako pravilo ima iznimku (ili dvije). Tu dolazi "test oka". Samo pogledajte ljestvicu na ekranu. Kako tekst izgleda prema vama? Postoji li logičan tok? Lako je čitati?
Ako se na bilo koji način osjećate isključeno, razmislite o prilagodbi skale. Ovisno o pisanom obliku i drugim elementima u dizajnu - od slike do boje u kontrastu - mjerilo će zahtijevati prilagodbu s vaše strane. To je samo polazište kad niste sigurni što želite raditi.
I pitajte i druge oči. Napravite jednu ili dvije verzije s različitim hijerarhijama da biste vidjeli koja verzija dobiva najbolji odgovor. Dizajn je vizualna umjetnost, što "test oka" čini nepreciznom, ali prilično pouzdanom opcijom.
Zaključak
Jednom kada postavite tipografsku hijerarhiju za projekt, najbolje što možete učiniti je dokumentirati. Uspostavite ljestvicu pomoću CSS-a za web stranice ili stvorite datoteke stilova dok radite na tiskanim projektima.
Za veće dizajne ili marke, skale i specifikacije stavite pismeno u vodič za stil. Stvaranje hijerarhije tipa zahtijeva malo rada na stražnjem kraju, ali izvršavanje projekata čini bržim, lakšim i da ne spominjemo dosljednijim, jer idete prema naprijed sa sljedećim projektima.
