9 tipů pro lepší typografickou hierarchii
Každý projekt vyžaduje systém a hierarchii pro textové prvky. Jen přemýšlejte o všech malých částech textu, které se používají v návrhu - titulky, kopie těla, prvky navigace, právní informace, titulky atd.
Jak ale vytvořit tuto hierarchii, aby každý textový prvek plynule plynul do dalšího? Dnes vás provedeme krok za krokem vytvořením systému typografické hierarchie, kterou lze použít pro téměř jakýkoli návrhový projekt. (A párujeme tipy s krásnými příklady skvělé typografie, abychom vám pomohli získat trochu inspirace.)
Prozkoumejte prvky Envato
1. Začněte s pohodlnou kopií těla
I když možná budete chtít začít s cool titulek léčby, místo, kde začít, je ve skutečnosti uprostřed. Nejprve vytvořte pohodlný písmo, velikost a mezery pro kopii hlavního těla.
To by mělo mít smysl, protože se jedná o převážnou část textu v návrhu. Ať už stavíte web nebo brožuru, tento koncept je stejný. Ideální čitelnost pro kopírování těla je podle Baymardova institutu někde mezi 50 a 60 znaky na řádek (nebo sloupec). Tato směrnice vám pomůže nastavit měřítko pro text, který je čitelný a odpovídá různým typům písem (například normální versus zkrácený versus deska).
2. Sestavte měřítko
Jakmile budete vědět, jak bude tělová kopie vypadat, můžete kolem ní nastavit měřítko pro všechny ostatní textové prvky v návrhu. Může být snadné přehlédnout určité textové bloky; vytvořit seznam všech různých použití textu v projektu.
- Kopie těla
- Nadpisy
- Podnadpisy
- Titulky
- Blokovat nabídky
- Navigační prvky
- Informace o zápatí
- Právní kopie nebo vyloučení odpovědnosti
Nyní vytvořte měřítko, které určuje typ písma, rozsah velikosti a použití pro každý z těchto prvků. (A zabudujte jej do svého CSS pro webové stránky nebo soubory stylů pro pracovní dokumenty.) Existuje celá řada způsobů, jak vytvořit měřítko, ale procento velikosti může být dobrým výchozím bodem. Měřítko můžete také založit na základě matematiky za mřížkou účaří nebo vizuálně.
Začněte jednoduchou stupnicí:
- Velikost kopie těla
- Titulky jsou velikost těla kopie krát 220%
- Podpoložky mají velikost kopie těla 150krát
- Navigační prvky jsou velikost kopie těla krát 80%
- Kopie zápatí / legální je velikost těla krát 80%
3. Přemýšlejte od největšího k nejmenšímu, od shora dolů
Toto pravidlo je velmi jednoduché: Největší a nejdůležitější text by měl být nahoře a velikost by se měla snižovat, když čtete stránku nebo obrazovku.
To neznamená, že toto pravidlo nemůžete porušit pokaždé s jistou jemností designu, ale mělo by to být vždy výchozím bodem pro rozvoj typografické hierarchie. (Kdo skutečně přejde na konec webové stránky pro nadpis a poté zpět na začátek, aby začal číst?)
4. Stanovte pravidla pro vesmír
Stejně důležitá jako velikost písma je mezera mezi nimi a kolem ní. Faktory pro určování prostoru zahrnují vedení (nebo výšku čáry), odrážky (nebo ne), zábaly a žlaby a zarovnání.
Zvažte mezery, které odrážejí měřítko použité pro změnu velikosti textu. Velikost plátna je zde také velmi důležitá. Větší plátna jsou čitelná s těsnějším odstupem než malá plátna. (Proto mnoho projektů má mnohem volnější specifikace mezer pro zařízení, jako jsou mobilní telefony a přísnější pravidla pro stolní počítače.)
Stejně jako u velikostí řezů by pravidla pro mezery měla být stanovena předem pro celý konstrukční rámec. Konzistentní, čisté rozestupy jsou jednou z malých věcí, které mohou vytvořit nebo rozbít design.
5. Nastavte pravidla pro tučné písmo a kurzívu
Přestože tučné písmo a kurzíva nejsou odlišné typy prvků nebo velikostí, použití je důležité. (Jen si představte, jak bude vypadat design, pokud bude každé druhé slovo tučně.)
Proto jsou pokyny tučně a kurzívou obzvláště důležité. Spíše než při pohledu na velikost nebo prostor, je však úvaha mnohem kontextová. Specifikace použití mohou uvádět, že tuto léčbu může podstoupit pouze tolik slov nebo frází (nebo konkrétních slov nebo frází). Běžnou chybou je nadužívání odvážné a kurzívou; když pochybujete, nepoužívejte je.
6. Vytvořte „Z“
Společný vzorec čtení je ve tvaru Z. Ať už navrhujete jazyk, který čte zleva doprava nebo zprava doleva (převrátit Z), uživatelé budou číst od jednoho rohu přes linii až do konce a pak zpět do počáteční roh a přes čáru v opakujícím se vzoru.
Tento přirozený tok použijte při umisťování textových prvků na obrazovku. Tento tvar Z je důvod, proč většina značek umisťuje své logo do levého horního rohu. Je to první místo, které při čtení oko dopadne.
7. Zvažte vizuální hmotnost
Velikost není jediným faktorem, pokud jde o to, jak velký textový prvek vypadá na obrazovce. Vizuální váha je stejně důležitá a může ovlivnit způsob vytváření typografického měřítka.
Písma budou vypadat větší, když:
- Zahrnují silné tahy
- Zahrnují rozmachy nebo zdobení
- Jsou široké
- Jsou to nové základní typy písma
- Mají vyšší x-výšky
- Používají se jako všechny čepice
Písma budou vypadat menší, když:
- Jsou kondenzované
- Zahrnují lehké nebo tenké šířky tahu
- Existuje malý kontrast s pozadím
- Používají se s malými písmeny
8. Vytvořte akcenty
Existují určitá slova, která budete chtít zvýraznit a která spadají mimo normální typografickou stupnici. Přidání přízvuku k nápisům může vést k tomu, že vynikne, aniž byste museli upravovat skutečnou velikost nebo písmo.
Běžné akcenty zahrnují:
- Barva
- Zdůraznit
- Zvýraznit
- Text v tlačítku nebo tvaru
- Jednoduchá animace
- Změna v případě z jiného typu stejné velikosti
Pěkná věc o jakémkoli přízvuku v hierarchii typu je to, že se jedná o okamžitou pozornost. Tyto prvky by měly být používány šetrně pro co největší dopad a pro klíčové prvky v návrhu.
9. Použijte „Oční test“
Nakonec má každé pravidlo výjimku (nebo dvě). Tam přichází „oční test“. Stačí se podívat na stupnici na obrazovce. Jak vás text vypadá a cítí? Existuje logický tok? Je snadné číst?
Pokud se cítíte jakýmkoli způsobem, zvažte úpravu měřítka. V závislosti na použitém písmu a dalších prvcích v designu - od obrázků po barvu až po kontrast - měřítko bude vyžadovat úpravu z vaší strany. Je to pouze výchozí bod, když si nejste jisti, co chcete dělat.
A požádejte také o další oči. Vytvořte jednu nebo dvě verze s různými hierarchiemi, abyste zjistili, která verze dostane nejlepší odpověď. Design je vizuální umění, díky němuž je „oční test“ nepřesná, ale poměrně spolehlivá možnost.
Závěr
Jakmile nastavíte typografickou hierarchii projektu, nejlepší věc, kterou můžete udělat, je dokumentovat ji. Při práci na tištěných projektech vytvořte měřítko pomocí CSS pro webové stránky nebo vytvořte soubory stylů.
V případě návrhů nebo značek větších rozměrů uveďte měřítko a specifikace písemně do průvodce stylem. Vytvoření hierarchie typu vyžaduje trochu práce na zadním konci, ale dělá dokončení projektu rychlejší, snadnější a nemluvě o konzistentnější, jak budete postupovat vpřed s následujícími projekty.
