5 jednoduchých způsobů, jak zlepšit webovou typografii
Typ je jedním z nejčastěji používaných prvků webu. Přemýšlejte o tom. Pokud nejste YouTube nebo Flickr, pravděpodobně jsou vaši návštěvníci stránek přicházeli za váš textový obsah - nikoli o fantazijní obal, který ho obklopuje. Tak proč jsou weboví návrháři stále léčení textu jako sekundárního prvku?
Dobrá typografie přináší pořadí na stránku a zvyšuje čitelnost . Umožňuje lidem rychleji zpracovávat informace.
Více skenovatelná a čitelná stránka znamená radostné návštěvníky. Šťastní návštěvníci se často vracejí, kupují si produkty, zanechávají komentáře a sdílejí místo s přáteli. Podívejte se, proč byste to měli přemýšlet?
Mohl jsem se navždy zbláznit na to, jak daleko se na webu objevila typografie a jak daleko to ještě musí jít. Mezi webem a tiskovým designem jsem často odrazil. Když jedete z aplikace InDesign na TextMate, omezení typu webového rozhraní jsou zcela jasná .
Ale o tom, co webový typ nemůže udělat, bylo spousta informací. Tohle nebude další rant. Namísto toho se zaměříme na 5 jednoduchých oprav pro typografické oči, které se nacházejí na celém webu.
1. Použijte tlačítko Reset styly
Hloupé, ale pravdivé: žádné dva prohlížeče nepoužívají stejné výchozí nastavení prezentace. Rozdíly v polstrování, okrajích, okrajích a zářezech jsou nekontrolovatelné. Chcete-li, aby rozložení stránek bylo v prohlížečích více konzistentní, zaplatíte, abyste začali pomocí šablony stylů CSS Reset.
Dva doporučuji:
Yahoo CSS Reset Stylesheet
Eric Meyer CSS Reset Stylesheet
2. Sledujte své opatření
Opatření se vztahuje k délce jednoho řádku typu. Delší čára = delší měření. Studie ukázaly, že pro optimální čitelnost by textové sloupce, jako je vaše hlavní tělo, měly být od 45 do 75 znaků (30 až 50 ems) včetně mezer . To je jeden z důvodů, proč tekuté konstrukce (ty, ve kterých se sloupce rozšiřují a uzavírají tak, aby vyhovovaly šířce prohlížeče), jsou pro oči těžší.
Vedení by se navíc mělo zvyšovat s délkou vašeho opatření . Vedoucí je množství bílého místa mezi řádky textu a je řízeno vlastností výškopisu CSS. Pokud potřebujete použít mimořádně dlouhé opatření, ujistěte se, že se vaše přední strana otevře.
Podobně, pokud máte malý sloupec, například postranní panel s krátkým měřítkem, měl by být váš vedoucí přísnější. Nalezl jsem výchozí hodnotu, kterou většina přiřazených prohlížečů je trochu příliš těsná. Výška řádku kolem 1,4m funguje dobře pro většinu obsahu těla.
3. Sklopte mezeru mezi
Nejde jen o váš text - o prostor, který jej obklopuje. Příliš málo místa dělá text těžké číst, ale příliš mnoho. Klíčem je najít jednoduchou rovnováhu, která vede oko z jednoho prvku k druhému.
Jedním z běžných chyb, které noví návrháři učinili, je vyplnění každého centimetru prostoru. Bílý prostor označuje prázdný nebo "negativní" prostor kolem vašeho obsahu a je to zásadní. Podívejte se na dobře navržený časopis jako Dwell nebo Good a uvidíte, že přestože stojí vydavatel peníze na vytisknutí každé stránky, ponechávají kolem textu dostatek volného místa. Stránka bude v rovnováze a vaše oko se bude pohybovat z vesmíru do vesmíru efektivně.
Kromě úpravy výšky čáry (jak je uvedeno v # 1) zkuste zvýšit polstrování a okraje . Pokud se nepokoušíte vytáhnout z bláznivého vizuálního triku, měl by být vždy kolem vašeho textu dostatek volného místa. Nedovolte, aby se opíral o jiné prvky, zejména o obrazy. Nechte svůj obsah chunky (nadpisy, odstavce, postranice, atd.) Dýchat.
Mark Boulton napsal velmi informativní článek o Bílý prostor pro A List Apart, podívejte se na to.
4. Nechápejte font Crazy
Dobrým pravidlem pro každého návrháře je: nepoužívejte více než dvě písma tváře ve vašem designu. Dvě styly písma mohou vypadat velmi stylově. Seznam mimo používá variace Gruzie a Verdany, aby vytvořila elegantní a leštěný vzhled. Ale pokračování v přidávání ploch písma do vašeho rozhraní vytváří zbytečné zmatky. Podobně se vyvarujte používání příliš velkého množství písma, barvy nebo ošetření na stránce nebo v odstavci, nebo se navzájem konkurují namísto přidání důrazu podle plánu.
Ačkoli fonty písma a technologií, jako je sIFR a Typeface.js vám umožní zadat pouze jakékoliv písmo, které chcete mít jako výchozí, odolat pokušení jít divoké s tělem kopie. Dekorativní písma jsou nejlépe udržovány na titulcích, protože ovlivňují čitelnost. Přemýšlejte o tom - kdy jste naposledy zvedli román s brožováním, který byl kompletně napsán v Comic Sans?
Při vytváření zásobníků písem věnujte pozornost velikosti vašich párů. Některá písma, která vypadají podobně jako render v různých velikostech. Verdana a Arial jsou skvělým příkladem toho. Tytester je skvělý nástroj pro porovnávání základních webových písem a vytvoření úspěšného zásobníku. Další užitečný nástroj nazvaný Stack Stack Builder ukazuje, jaké procento uživatelů vidí každou variantu.
Bez ohledu na to, jaké fonty se rozhodnete použít, ujistěte se, že nejsou příliš malé. Vím, že její tvrdý ... malý text vypadá skvěle. Ale přemýšlejte o chudých, lesklé uživatelé! Udržujte textový text nad 10 nebo 12 pixelů. Pokud trváte na teeny drobné, přinejmenším použijte relativní velikost pro všechny uživatele IE 6.0, kteří jinak nemohli zvětšit. Číst Článek Wilsona Minera o velikostech písma pro skvělé zapojení do debaty.
5) Nezanedbáváte podrobnosti
Klient poskytl obsah. Přidání na místo je jen otázkou kopírování a vkládání, že? Špatně, špatně, špatně. Jedná se o pasti webové designéry spadají do všech příliš často.
Dokonce i ti z nás, kteří pilně přidávají značky, formátují každý odstavec a organizují seznamy s odrážkami opatrně zapomínají na některé důležité typografické detaily. Mnoho lidí (včetně mě) zmeškalo formální výuku v oblasti typografie, takže nás nemůžete zcela obviňovat. Ale ďábel je v detailech. Je čas, abychom tyto základy přijali:
Použijte inteligentní nabídky
Jaký je rozdíl mezi inteligentními citacemi a hloupými uvozovkami? Inteligentní citace (známé také jako kniha nebo kudrnaté ) jsou zakřivené a mají oba otevírací a zavírací styl. Hrubé ( rovné ) uvozovky jsou obvykle rovně nahoru a dolů. Apostrof je typograficky jen jedna citace, takže platí stejný problém. Hloupá citace (nazývaná též primární ) by měla být použita pouze mezi měřeními. Například, 6'4 "používá dvojité a jediné primární kotace.
Bohužel naše klávesnice jsou standardně standardní nabídky. Aplikace Microsoft Word a další textové editory je pro nás opravují, když píšeme. Přidání chytrých uvozovek na stránky HTML vyžaduje více práce od webového vývojáře, protože pro vytváření otvíracích a zavíracích symbolů musíte použít označení. Vidím stejný problém s em a en-pomlčky, elipsou, ochrannými známkami a symboly autorských práv. Kodéry mají snadnou cestu a nahrazují je spojovníky, vícenásobnými obdobími, velkým TM a neslavným (C). Použití správných symbolů vede vizuálně k rozdílu. Udělejte to v pořádku a dělajte editory všude, kde se usmějete.
Jak vytvořit inteligentní citace:
#8216; = otevření jediné nabídky
’ = uzavření jednoduché nabídky
“ = otevření dvojité kotace
” = uzavření dvojité kotace
Vím - nikdo nechce strávit celý den honit citáty. Naštěstí jsou to nástroje SmartyPants a Textism může dělat většinu práce pro vás automatickým formátováním textu, který obsahuje inteligentní uvozovky a podobně.
Číst "Problém s EM a EN" z A List Apart pro podrobnější informace o tématu a kódování znaků UTF-8 pro nejběžnější speciální znaky.
Jedna upozornění - spousta redakčních textů CMS (jako je ten, který tato stránka používá) vám nedovolí implementovat inteligentní uvozovky bez dalších pluginů. Smutné ale pravdivé.
Zastavte vložení dvou mezer po určité době. Prosím! Není to nutné a je to docela nepříjemné.
Na vašich linkách použijte ohraničení dolní: 1px solidní místo textové dekorace: podtržené . Podtržení mohou procházet znaky sestry (g, j, p, q, y), což je činí obtížně čitelnými, zejména při použití menších velikostí písma.
A zatímco to nemá nic společného s typografií, běží rychlá kontrola pravopisu nikdy nikoho nezabil . Dokonce i když vše, co jste udělali, bylo kopírovat a vložit, pravopisná chyba, která prochází na živé stránky, se odráží špatně na všech zúčastněných.
Věnujte pozornost těmto 5 opravám a vaše návrhy stránek se jistě zlepší. Pamatujte, že to jsou jen výchozí bod. Dobrá typografie je naučná dovednost stejně jako cokoliv jiného, a vyžaduje to studium a praxi . Dávejte pozor na stránky, které jsou správné a poznamenejte si, co dělají. Potřebujete inspiraci? Podívejte se na níže uvedené stránky, kde najdete příklady skvělé webové typografie a příklady, které považujete za inspirativní.
Inspirační typ:
Napsal výhradně pro WDD Mindy Wagner.
Co si myslíte o těchto jednoduchých způsobech, jak zlepšit svou typografii? Implementujete je na svých webových stránkách? Rádi bychom vás slyšeli!