10 Pravidla pro webový typografie Každý návrhář by měl vědět
Když někdo navštíví webové stránky, které jste navrhli, šance jsou, že se o barvy, obrázky nebo zvuky příliš nezajímají, okamžitě se dívají na text.
Bez ohledu na to, kolik zvonků a píšťalků jste vestavěli do webové stránky, každý se spoléhá na text, aby dosáhl toho, co navštíví web .
To samo o sobě by mělo dělat typografii, umění uspořádání typu, prioritu pro každého webdesignera.
V tomto článku se podíváme na 10 jednoduchých pravidel, které je třeba mít na paměti při navrhování dalšího webového projektu.
1. Přečtěte si text sám
S designem, jako je JonesingFor návrhář bez skvělého pochopení textu by se snažil dát dohromady typografii, která tuto stránku opravdu funguje. Při vyřizování své vlastní typografie se pravděpodobně nebudete muset starat o psaní textu webu - ale musíte to přečíst!
Někteří weboví designéři si myslí, že kopírování a vkládání textového souboru představuje souhrn jejich textových povinností. Přečtení textu však poskytuje alespoň základní představu o tom, jak lze text integrovat do webové stránky, aniž by došlo k odpojení mezi psaním a designem webové stránky.
Můžete vykopat svou typografii ještě další zářez, pokud si můžete přečíst text, jakmile je ve vašem designu. Zvláštní pozornost věnujte prostorům kolem písmen . Máte nějaké neobvykle velké prostory, které vypadají zvláštně? Trochu pečlivá typografie může vyřešit tyto problémy. Můžete také získat představu o liniích, které by mohly být příliš dlouhé, aby se daly snadno číst, trapné zlomy a podobné problémy.
2. Vypusťte Lorem ipsum co nejdříve
Myslíš, že bys mohl navrhnout Webové stránky Ježíše Rodrigueze Velasca bez skutečného textu? Místo je silně závislé na psaném slovu - a také velmi specifických slovech. Dokonce i tělový text získal zvláštní pozornost s kapičkou a jiným vylepšením, které by s Lorem ipsum nebylo možné.
Pokud text vašeho webu není vlastně Lorem ipsum, fiktivní text nebude nijak podobný skutečnosti . To znamená, že jakýkoli vylepšení, které byste mohli udělat v textu - nebo v jeho podobě - bude muset počkat, dokud nezískáte skutečnou věc. Požádáním (a získávání) textu od svého klienta co nejdříve v procesu vám umožní, aby odpovídal vašemu celkovému designu a typografii.
3. Ukažte jasnou hierarchii
Po příjezdu Rik Cat Industries , okamžitě víte, kde byste měli začít číst. Přestože je v horní části stránky několik odkazů, Rik vítá nejdřív vaše oko. Je to mnohem větší, a to pomocí typografie, aby se vytvořila jasná hierarchie .
Každá stránka potřebuje dobře rozvinutou hierarchii: ukazatele, kde začít číst a jak postupovat. Vaše typografie může poskytnout tuto hierarchii - stejně jako to dělá Rik - tak dlouho, jak znáte hierarchické pořadí předem. Přemýšlením o velikosti a písmech můžete zvýraznit část textu jako nadpis tak, aby odlišné umístění v návrhu prostě nemohlo poskytnout.
Hierarchie vašeho designu přesahuje jen typografii, kterou používáte samozřejmě, ale jelikož uživatelé téměř vždy začínají s textem, dává projektantům smysl udělat to samé.
4. Dávejte pozor na makro i mikro typografii
Spoléhají výhradně na typografii pro svou první stránku Crowley Webb a Associate's webová stránka byla navržena s ohledem na dva faktory: makro a mikro typografii .
Makro typografie je celková struktura vašeho typu, jak se to objevuje v kontextu vašeho designu a jeho estetického, když považujete svůj text za blok sám o sobě.
Micro typografie se více zajímá o detaily o rozestupu, o problémech, které určují, zda jsou slova snadno čitelná. Mikrotiskopis je absolutně nezbytný, pokud jde o sestavení bloku textu: pokud to není čitelné, nemá to smysl. Crowley Webb a kolegové se touto otázkou zabývali pečlivým psaním a rozmístěním těch slov, které by místo zvýraznilo.
Makro-typografie vám však poskytuje příležitost, aby váš text byl víc než dobře rozložený: je to šance, že to vypadá atraktivně a je součástí celého vašeho návrhu . Výběr písma a barev na těchto stránkách vytváří životaschopný celek. Ignorování obou aspektů typografie je škodlivé.
5. Dávejte pozor na typ barvy
Bylo by tak snadné ztratit text v pozadí ArtofElan , zejména jasně červené na tmavě červené kombinaci použité designérem. Pokud webový návrhář pracuje s barevným typem, je nezbytně nutné pečovat o to, že není vidět žádná červená červená kombinace nebo dokonce ani žlutá červená kombinace . Koneckonců všichni navštívili webovou stránku, kde se zdálo, že text vypadal pouze z jednoho odstínu od barvy pozadí, a když se ho pokoušeli přečíst, dostali strach z očí.
Nejjednodušší opravou této situace je zajistit, aby barva vašeho typu byla drasticky odlišná od barvy vašeho pozadí . Černobílé práce tak dobře, protože jsou tak drasticky odlišné, jak můžete získat, ale existují i některé barevné kombinace, které fungují dobře: něco podobného tmavě modré barvě na světle růžové to udělá. Obrácený text je docela složitý ... zatímco můžete pracovat s světle růžovým textem na tmavě modrém pozadí, máte větší pravděpodobnost, že s ním budete mít stížnost.
6. Zvažte své CSS
Pokud je váš CSS pevný, můžete se pohybovat mezi stránkami vašeho webu hladce, stejně jako různé verze Hutchouse.com spoléhají na různé styly a vytvářejí některé působivé efekty. Dokonce i když nebudete brát věci co do Hutchhouse, CSS může pomoci odstranit problémy s amatérskou typografií, jako je změna písma a rozměrů mezi stránkami.
CSS může poskytnout snadnou konzistenci mezi vaší typografií na celém webu . Pokud jste konzistentní v tom, jak používáte typ, nicméně, lámání této konzistence i malé množství může dělat, co chcete zdůraznit skutečně vyčnívat, stejně jako zřízení a pak rozbití sítě může vytvořit efektivní design. Při webových typografiích může být zachování konzistence písem jednoduchou záležitostí CSS.
7. Zkopírujte středový text
Výběrem alternativy k centrovanému textu může být webový design snadno čitelný , stejně jako DesignCanChange.org . Volba středového textu, zvláště na takové stránce, by způsobila problémovou stránku: zúbkování okrajů na obou stranách způsobuje, že je mnohem těžší číst a existuje spousta příležitostí pro dokonale vycentrovaný text, který by zkreslil zbytek vaše návrhy na různých displejích.
V některých kruzích je typ centrovaný pouze o krok napřed od použití Comic Sans v návrhu webových stránek. Můžete to považovat za nadpis, obecně však zarovnáním textu doleva se vaše čtenáři budou mnohem pohodlněji, pokud nebudou číst zprava doleva .
8. Řešit chytré citace a další symboly
Luigi Ottaniho stránky zobrazují, jak pečlivá pozornost na uvozovky a další symboly vás dostane: úplný nedostatek problémů, když stránky zobrazují tyto symboly. Mnoho webových stránek je dotováno symboly, které prohlížeč nemůže zobrazit. Je to dědictví skutečnosti, že většina textu, který webový návrhář pracuje, byl pravděpodobně napsán v aplikaci Microsoft Word nebo jiném softwaru pro zpracování textu, který dělá všechny druhy malých změn textu, aniž by spisovatel věnoval velkou pozornost.
Jednou z nejhorších změn jsou inteligentní citace: svinutá uvozovka Word automaticky nahrazuje přímé uvozovky . Další oblast problému přichází při práci s textem napsaným v jiném jazyce: akcenty a umlaty mohou způsobit stejně mnoho potíží jako užitečnost aplikace Word. Pokud prostě skopírujete a vložíte text takovými změnami do vašeho návrhu, budete se pravděpodobně muset vrátit a opravit je později, alespoň u některých webových prohlížečů.
Namísto toho se dostanete brzy do procesu návrhu, abyste se mohli soustředit na to, aby se váš text lépe přizpůsobil vašemu designu . Pokud chcete, aby se ty fantazijní symboly a inteligentní citace objevily v konečném návrhu, vylomte své entity HTML.
9. Plánujte, aby váš text byl větší
Když zvětšíte velikost textu Veerle Pieters ' webové stránky, není to tak hezké, než kdybyste použili velikost písma, kterou si vybrala. Nicméně můžete stále číst vše, najít odkazy a tak dále, což platí pro velmi málo webových stránek.
To je proto, že z části, mnoho návrhářů ujistěte se, že rozložení textu v 10 bod písmo nebo dokonce menší. Většina lidí je pohodlná čtení takových fontů, ale Baby Boomers tvoří obrovskou část populace procházení webových stránek a mnoho starších webových surfařů bude mít své prohlížeče nastavené na typ zobrazení tak velký, jak je to možné . Váš text, stejně jako návrh, musí být schopen přizpůsobit se této skutečnosti.
Je také třeba vzít v úvahu skutečnost, že velikost prohlížeče se může dramaticky lišit , a pokud se nejste opatrní, můžete přemísťovat text na neočekávané polohy. Pokud narůstá velikost do bodu, vytváří problémy, že starší demografický se bude přesouvat na další web ve spěchu. Poté, co se navždy posouváte na stranu, bude mít podobný výsledek.
10. Uveďte preferenci bez pata
Pokud se podíváte na A List Apart webové stránky, téměř každý velký blok textu je nastaven v bezpatkové písmo, takže je mnohem jednodušší číst. Nadpisy a další menší bloky textu jsou umístěny v písmenách v písmenách, které vytvářejí rovnováhu mezi těmito dvěma fonty.
Pokud jde o rozložení textu na obrazovce, písma bez písma jsou téměř vždy nejlepší , zejména pokud jste si vybrali písmo jako Verdana, který byl navržen pro zobrazení na obrazovce počítače. Písmena s písmeny mají vyšší pravděpodobnost špatného zobrazení, rozmazání nebo dokonce pixelování.
Není samozřejmě možné zcela vyhnout serifům. Ale zejména u velkých bloků textu, použití písma bez patky může nabídnout zvýšenou úroveň záruky, že návštěvníci budou moci snadno číst text webu. Když vybíráte písma pro projekt, podívejte se nejdřív na vaše možnosti bez patky .
Poslední poznámka
Typografie je snadno přehlížena a dokonce i když ji návrhář vzal v úvahu, je snadné jej odepisovat jako časově náročnou aktivitu s malým výnosem. Spouštění pár minut s textem, které bude centrem vašeho návrhu, to může přeměnit z toho, co by webový designér mohl na stránce nalepit na prvek, který podporuje zbytek návrhu.
Psal výhradně pro WDD do čtvrtek Bram.
Postupujete podle těchto pravidel a dalších? Podělte se o níže uvedené názory ...