Vzhled HTML stránek – pohled typografa

Začínáte s webdesignem a potřebujete se zorientovat v oblastech týkajících se vzhledu HTML stránek? Víte, jak má vypadat menu, jak formátovat text, používat fonty, odkazy ad.? Připravil jsem pro vás sérii článků zaměřených na typografii na internetu, které by měly volně navázat na již publikované příspěvky Martina Kopty.

Vnímání tradice typografie z pohledu dnešní doby

Typografie je v současnosti stále populárnější slovo. Ač má zásadní vliv na vznik veškerých dokumentů, asi nejlépe pochopíme její krásu při pohledu na tištěnou knihu. Ještě před pěti lety, když jsem sháněl knihy o typografii, většinou se dámy „antikvářky“ nemohly rozvzpomenout, co to vlastně chci, nebo mi rovnou nabídly topografii. Po pěti letech už jen stručně odpovídají, že nemají! Bohužel tento druh odborné literatury nebyl nikdy vydáván ani nakupován v potřebném množství. V grafických studiích mohou mít spoustu nepoužitelných knížeček o pravidlech sazby vydávaných v 90. letech, kdy se běžně přebírala pravidla sazby na psacím stroji a byla pak vzorem pro sazbu počítačovou.

V duchu současného způsobu zneužívání slova „typografie“, kdy je pro dílo s naprosto opačnými kvalitami použito spojení s typografickou úpravou, představují si lidé pod slovem typografie ledacos. Bohužel, je příliš často vnímána v souvislostech s výraznými texty velmi tučných tahů a křiklavých barev na billboardech. Kromě toho, že „billboardová“ typografie má jiné požadavky na vzhled písma, pracuje také s textovou plochou jinak. Projevuje se u ní i záměrné, uvolněné typografické zpracování, které by bylo u podstatně menšího textu na obrazovce nebo v knihách bráno jako chyba.

Práce v oboru typografie je považována za velmi odbornou činnost, ale v Čechách tito odborníci rostou jako houby po dešti. Problém je, aby každý sazeč měl skutečně odpovídající typografické znalosti. V této profesi tak přibývá lidí, kteří si na svých dveřích vyměnili cedulku „Mistr sazeč“ za cedulku „Mistr typograf“. Bohužel na vzhledu sazby se to projevilo nejméně.

V posledních letech se na pultech objevily nepoměrně kvalitnější knihy o typografii, než tomu bylo na začátku 90. let. Bohužel, typografie zaměřená na specifické prostředí internetu je většinou opomenuta nebo je poněkud stranou hlavního tématu. Praktická typografie od Filipa Blažka a Pavla Kočičky (2001) sice věnuje tomuto tématu kapitolu „Typografie na internetu“, ale je to jen nakousnutí velkého jablka. I když je ve zmíněné kapitole řada překlepů a ne zcela srozumitelných vysvětlení, má kniha každému co říci, a měla by se stát učebnicí každého typografa. Bohužel, praktické ukázky sazby jsou zaměřeny zejména na práci v programu Adobe InDesign. Určité srovnání s jinými programy zde chybí. Pojímáme-li typografii jako práci s grafickou úpravou textu na internetu, je tato široká oblast těžko popsatelná v jedné kapitole.

Současná typografie a možnosti počítačového písma

Ač jsme si zvykli hledět na typografii jako na umění určené pro tištěné dokumenty, má své místo také na webových stránkách. Doposud zde citelně chyběla možnost použít na stránkách vybrané písmo (třeba i firemní font v rámci ucelené Corporate Identity). Problém byl také v ochraně vlastnických práv k písmu. Dnes by se snad mohl tento stav změnit (za podpory ze strany „výrobců“ prohlížečů a slibně se rozvíjejícího trhu s OpenType písmy).

Dokonalost zobrazení písma na monitoru je vždy omezena několika faktory:

• Velikost písma daná hodnotou a volbou jednotky pro zobrazení na obrazovce monitoru (viz článek Martina Kopty).
• Kresba písma (viz jedna z následujících kapitol).
• Kvalita použitých písem (hinting fontů – instrukce pro zobrazení písma v menších velikostech).

O prvním faktoru se rozepisovat nemusím. Potřebné informace naleznete v odkazech, které jsou na konci článku. Kresbě písma se budu věnovat později. Třetím faktorem je kvalita zpracování písem právě pro zobrazení na monitoru, kdy formáty písem (Type 1, TrueType, OpenType) obsahují řadu instrukcí (hintů) určujících, který pixel a jak bude vykreslen. U písem Type 1 je použití hintů na vlastním rozhodnutí rasterizéru (Adobe Type Manager nebo vlastní systémový rasterizér u Win2000). U písem TrueType se využívá většího množství instrukcí, na jejichž základě lze definovat, za jakých okolností mají být hinty pro vykreslení na médiu použity. Tvůrce písma má tak větší kontrolu.

OpenType je rozšířením specifikace formátu TrueType o možnost definovat obrysy znaků postscriptovými Type 1 křivkami. Protože má v sobě řadu dalších užitečných funkcí, mohl by být pro svou velikost k účelu vkládání písma do stránek zcela nepoužitelný. Díky subsettingu (znaková sada obsahuje jen použité znaky) a účinné kompresi lze velikost souboru zmenšit. Protože písmo je součástí webu, je potřeba autorská ochrana proti nelegálnímu užívání. Majitel stránek, respektive osoba, která při začleňování písma na web doplní k souboru s fontem svůj podpis, zajistí nastavení fontu pro různé operace jako je tisk a editace.

Přestože články o typografii mohou být užitečné, konkrétní příklady jsou nejlepší školou. Podívejte se na dobrou knihu či web a pak čerpejte zkušenosti na základě vlastní tvorby. Pochopíte, že každý web je natolik specifický, že si na ně nelze vytvořit jednoduchou šablonu. Jako příklad jsem vybral weby, kde hlavní úlohu hraje písmo a současně je zřejmá i snaha o promyšlené řešení kompozice. Jde tedy nejen o umísťování textu, respektive textových bloků, vůči sobě navzájem, ale také o vztah k ostatním prvkům na ploše stránek.

http://www.apple.com

Firma Apple si ve svém stylu na Internetu vyloženě libuje. Pro upoutávky a nadpisy používá vlastní písmo. Použití písma, jak předepisuje firemní styl, je docíleno díky převedení textu do grafického formátu. I když je použití textu jako obrázku typograficky efektní, lze toto řešení použít pouze pro specifickou cílovou skupinu. V tomto případě byl vytvořen kvalitní design, který bude pravděpodobně také přitažlivý pro koncového zákazníka této firmy.

http://www.lynda.com

Z webdesignérského serveru Lynda.com jsem vybral jednu stránku na ukázku. K nevšednosti stránky napomáhá i dobře navržená kompozice textových bloků.

http://www.berkeley.edu

Univerzitní server je i přes svůj rozsah vizuálně jednotný, stránky působí živě, jsou přehledné a přestože jsou zaplněny především texty, působí graficky zajímavě.

http://www.griffincontemporary.com

Inspirativně mohou působit také některé stránky galerie moderního umění. Nahlédnete-li do části „Artist Book“, můžete se proklikat na stránky s poměrně vyváženými kompozicemi textů a obrázků.

http://www.vogue.co.uk

Dalším příkladem, kde fotografie hraje významnou roli, jsou stránky firmy Vogue. Grafický styl stránek vychází z tištěné verze tohoto časopisu. Na stránkách je pro umístění fotografie a textu použito více kompozičních schémat. Na ukázce je stránka vybraná z části „In Vogue“.

Jistě vám budou užitečné odkazy na stránky spojené s typografií:

• http://www.typo.cz – zde naleznete mimo jiné také doporučenou literaturu, recenze knih, programů souvisejících s tvorbou písma a spoustu informací použitých v knize Praktická typografie
• http://www.sazba.cz – prakticky nic, co by nebylo také na serveru Typo.cz
• lege.cz/typograf.htm – rozcestník na stránky o typografii a písmu
• comin.cz/pismo – stránky o písmu
• wpdfd.com – jeden příklad zahraničního serveru věnující se vzhledu písma na Internetu
• lege.cz/typo/clanky.htm – stránky obsahující mimo jiné články o typografii
• http://www.institut-informacniho-designu.cz/mez-graf-komunikace – stránky věnované grafickému designu

Něco o kódování:

• http://www.unicode.org
• cestina.cz
• studweb.euv-frankfurt-o.de – kompletní přehled pozic znaků pro Unicode písma

Něco na rozpoznávání fontů:

• fontexpert.com/feforme.htm

Něco o barvách:

• http://aitie.fbi.cz/barvy/barvy.html
• http://www.lighthouse.org/color_contrast.htm
• http://innovate.bt.com/people/rigdence/colours

Související články:

Typografické minimum: jednotky a míry
Typografické minimum: základní pojmy

Použitá literatura:

Studio Marvil – informace o OpenType fontech