Jak zpřístupnit svůj typ více na webu
Není neobvyklé, že návrhář v dnešním světě nebude věnovat velkou pozornost tomu, jak je vytyčován typ, a to zejména díky vždy tak pohodlným výchozím nastavením hlavičkových značek a webových bezpečných písem, které se na webu objevují univerzálně.
Pokud jsme jako interaktivní designéři, jsme schopni trvat trochu víc času, pokud jde o typografii, než by výsledky ukazovaly jedinečný, dobře promyšlený design, který by byl proti vytvoření "vývoje mlýna".
Existuje velká šance, že většina designérů a návrhů, které obdivujete, představí dobré příklady typografie.
Ukážeme vám několik kroků, které jsem si udělal v typu vyladění, abych byl líbivější než ty výchozí scénáře značek 24px H1 a 13px nastavených v Times New Roman.
Nezapomeňte na výchozí nastavení, každý to dělá.
Zde máme vždycky společný vzhled záhlaví spolu s kusem kopie těla, který následuje. To vás přesně nevytahuje, nebo se samo od sebe vzdáváte od všech ostatních vzorků, že? Chcete-li, aby textový vzorek byl více vizuálně přitažlivý, nejprve se změníme výběr písma.
Vyberte si písmo, které bude mít větší váhu s vaším nadpisem
Ačkoli výběr písma není přesně "typografie", je ve skutečnosti podstatnou součástí, která pomáhá typu na stránce odlišovat se od jiných prvků. S počátkem @ font-face, návrháři mají k dispozici velké množství možností.
Zde jsem použil písmo Extra Condensed Gothic Style, které lze snadno nalézt na volném webu písma, jako je FontSquirrel.com. Pokud se zastavíme a přemýšlíme o tom, jméno "kondenzované" by mělo znamenat něco, protože je ve skutečnosti hustší, než je to normální člen rodiny v knižním stylu, což je přesně to, co chceme z titulku: něco, co přitáhne uživatele a skutečně se od sebe oddělí od těla kopie. Určitě se vám podaří uchopit vaši pozornost lépe než originál, ale existuje několik věcí, které bychom mohli udělat pro další zlepšení textu.
Udělejte to zajímavější se dvěma řádky CSS
Okamžitá změna je v písmech; všechny jsou nyní kapitalizovány, ale nyní také mají negativní kerning mezi jednotlivými písmeny (technikou přenášenou z novinového návrhu).
Obě tyto vlastnosti lze snadno provést pomocí CSS, { text-transform: velká; a rozteč písmen: -Xpx; }. Tím, že se tyto dva řádky vyznačují změnami kódování, dochází k významnému zlepšení viditelnosti, zejména nad původním.
Vypracujte všechny poslední vylepšení
V dalším kroku se písmo použité v odstavci těla ve skutečnosti změnilo na čistší sans-serif, což lépe vyhovuje nadpisu textu. Přibližujeme se mnohem vizuálně zajímavějšímu designu, ale můžeme jej ještě několikrát vyřešit.
Jak ukazují zelené ukazatele, existují nerovnoměrné okraje a jakým typografům se říká "sirotka". Které je jedno slovo, které spadá do posledního řádku odstavce. Vytváří vizuálně velmi nepravidelnou váhu ve srovnání se zbytkem textu a tento problém lze snadno vyřešit mírným přeformulováním textu.
Pokud jde o okraje, neexistuje pravidlo, že všechny musí být stejné. Nicméně, pokud začínáte mladou kariéru web designu, je dobré mít na sobě stejné hranice, dokud nezažijete a nenaučíte techniky, které vám umožní překonat pokyny pro sázení a dosáhnete svého cíle vizuálně.
Po vytvoření vyváženějšího vizuálního plátna odstraněním osiřelého a úpravou okrajů můžete vidět konečný výsledek, dobře nastavený typ vzorku, který je pohodlný tam, kde se nachází.
Jaké jsou vaše nejlepší tipy pro webovou typografii? Dejte nám vědět v komentářích!