Zpět na hlavní stránku

Web Design je z 95 % typografie (1. část)

Autor: Oliver Reichenstein

Přeloženo z článku Web Design is 95% Typography (1) s laskavým svolením autora.

95% informací na webu je písemných. Je tedy jen logické tvrdit, že webdesigner by měl dobře vyškolen v sazbě textu, jinými slovy: v typografii.

Informační design je typografie

To, co v roce 1969, napsal o tištěných materiálech své doby Emil Ruder, známý švýcarský typograf, můžeme snadno vztáhnout i na současné weby:

"Dnes jsme zahlceni takovou nezměrnou záplavou tištěných materiálů, že hodnota práce jednotlivce klesá, protože naši uštvaní současníci jednoduše nemohou pojmout vše, co je dnes tištěno. Je úlohou typografa rozdělovat a organizovat a interpretovat tuto masu tištěných materiálů tak, aby čtenář měl šanci najít to, co ho zajímá."

Informační designéři jsou typografové 21.století

S trochou představivostí (nahraďte tisk za online přístup) to zní jako popis práce informačního designéra. Je úlohou informačního designéra “rozdělovat a organizovat a interpretovat tuto masu tištěných materiálů tak, aby čtenář měl šanci najít to, co ho zajímá”. Makrotypografie (celková struktura textu) na rozdíl od mikrotypografie (detailní aspekty fontů a rozestupů) pokrývá mnoho aspektů toho, co dnes nazýváme “informační design”. Informační designéři dneška dělají takřka stejnou práci jako typografové před 30 lety:

"Typografie má jednu prostou povinnost, a to je předat písemnou informaci. Žádný argument nebo úvaha nemůže typografii této povinnosti zbavit. Tištěné dílo, které nelze číst, je produkt beze smyslu."

Optimalizace typografie je optimalizace čitelnosti, přístupnosti, použitelnosti(!) a celkové grafické vyváženosti. Není organizování bloků textu a kombinování s obrázky to, co grafičtí designéři, specialisté na použitelnost a informační architekti dělají? Tak proč je to tak zanedbávané téma?

Tak proč je to tak zanedbávané téma?

Příliš málo fontů? Příliš nízké rozlišení?

Hlavní - obvykle ufňukaný - argument proti typografické disciplíně online je, že existuje jen několik dostupných fontů. Druhý argument je, že rozlišení obrazovky je příliš nízké, a to ztěžuje čtení pixelovaných nebo vyhlazených fontů.

Renesance: 1 Font

Argument, že nemáme k dispozici dostatek fontů, je stejně dobrý jako je irelevantní: během italské renesance měl typograf k dispozici jen jeden font, a přesto v tomto období vznikaly některé z nejkrásnějších typografických prací:

renaissance specimen

Typograf by se neměl příliš zabývat tím, jaký druh fontu má k dispozici. Vlastně by volba fontu neměla být jeho hlavní starostí. Měl by použít to, co ve své době má, a použít to co nejlépe.

Výběr druhu písma není typografie

Druhý argument není o moc lepší. Na počátku tisku byla kvalita tištěných písmen o mnoho horší než dnes vidíme na obrazovkách. Důležitější je, že když se s obrazovkovými fonty zachází profesionálně, jsou velmi dobře čitelné. Informační design nespočívá v použití dobrých fontů ale v dobré typografii. Což je obrovský rozdíl. Každý může používat písmo, někdo si může vybrat dobrý druh písma ale jen málo lidí ovládá typografii.

Zacházejte s textem jako s uživatelským interface

Ano, je to otravné, jak rozdílné prohlížeče a platformy renderují fonty, a ano, rozlišení způsobuje, že je těžké zůstat soustředěný déle než pět minut. Ale je součástí práce designéra zajistit, aby text byl snadno a dobře čitelný ve všech hlavních prohlížečích a platformách. Správná výška řádků, rozestupy slov a znaků, prázdné místo okolo a uměřené použití barev napomáhá čitelnosti. Ale není to jen tohle. Dobrý webdesigner ví, jak pracovat s textem nejen jako s obsahem, používá “text jako uživatelský interface”. Podívejte se na Khoi Vinh’s website, a asi pochopíte, co mám na mysli:

kohi vinh's website

Trochu známější příklady neornamentalních webů, které používají text jako interface jsou: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. I když je těžké to prosadit, zacházet s textem jako s uživatelským rozhraním je jediný parametr pro úspěch. Úspěšné weby dokáží vytvořit jednoduché rozhraní A silnou identitu současně. Ale to je jiné téma.

UPDATE: Protože tento článek vzbudil velkou diskusi, bude mít pokračování.

Kde začít

Web typography
Aby “uklidnil některé mýty obklopující typografii na webu”, “strukturoval svůj web po krocích podle Bringhurstových principů, a vysvětluje, jak se dá dosáhnout každého kroku pomocí technik dostupných v HTML a CSS”.

Five simple steps to better typography
Typografie, o které tu mluví, “není vaše typická ‘Jaký font bych měl použít’ typografie.” Dobré čtení pro ty, kdo si myslí, že weby jsou použitelné, když se ponechá defaultní velikost fontů a výška řádku a text se může roztahovat kamkoli.

Khoi Vinh
Spolu zakladatel behaviordesign. V současnosti design director v NYTimes.com. Velmi talentovaný člověk.

Rod Graves
Komunikační designér. Nádherná práce: “Typografie je pro mě jednoznačně to hlavní. typografické gridy a hierarchie obvykle vytvářejí základ vizuálního jazyka, který vyvíjím.”

A List Apart
Komunikace pomocí písma. Fonty a layout. Design pro čtenáře. Čitelnost. Fonty, grafický design. Problémy typografie na webu. Řízení typografie na webu: velikost, font, barva. Metody CSS, problémy prohlížečů, uživatelské problémy a řešení. Určitě si přečtěte tento článek.

Association Typographique Internationale
ATypI (Association Typographique Internationale) je hlavní světová organizace, která se zaměřuje na typografii a písmo. Založena v roce 1957, ATypI poskytuje podporu pro komunikaci, informace a akce mezinárodní komunity okolo písma.

Thinking with Type
On line doplněk knihy Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students

Typetester
Porovnání fontů pro obrazovky

Typophile
Typophile je komunita podporovaná členy a sponzory. Typophile je od roku 2000 založena na otevřené spolupráci a myšlence, že se stále je co učit. Měsíčně zobrazí 3+ miliony stránek.

Typophile Wiki
Uživatelsky vytvořená encyklopedie o všem, co se vztahuje k písmu a designu.

The Next Big Thing in Online Type
Bill Gates chce, aby uživatelé počítačů, tedy, microsoftí uživatelé, měli lepší požitek ze čtení obrazovky, tak moc, že z toho udělal jednu ze svých pěti nejvyšších priorit.

Knihy

Emil Ruder, Typographie
Typography Emilqa Rudera je nestárnoucí kniha, z níž se naučily základy generace typografů a grafických designérů. Ruder, jeden z nejlepších typografů 20.století, byl pionýr, který opustil konvenční pravidla a nahradil je novými, které vyhovovaly potřebám jeho nové typografie.

Kimberly Elam, Grid Systems: Principles of Organizing Type
Ačkoli gridy (mřížky) jsou základem pro téměř celý typografický design, jsou často asociovány s rigidními, podobnými řešeními. Ale víra, že všechny dobré návrhy jsou přesto založeny na gridech (dokonce i kdyby jen rozhozených), ukazuje, že jen několik designérů skutečně chápe komplexnost a potenciální bohatost kompozice v gridu.

Muller-Brockman, Grid Systems: A visual communication manual for graphic designers, typographers and three dimensional designers.
Od profesionála pro profesionály, toto je konečné slovo o použití gridů v grafickém designu. Ačkoli Muller-Brockman poprvé prezentoval svou interpretaci gridu v roce 1961, tento text je dnes stále užitečný pro kohokoli, kdo pracuje v nejmodernějším počítačově podporovaném designu.

Druhá část článku

Zpět na hlavní stránku