pixy ma veľmi trefné poznámky, všimol si aj „klasickú“ typografiu, čo ma veľmi teší, samozrejme článok nie je vyčerpávajúci – čo je dosť smola, pretože viem, že máloktorý web návrhár vôbec dodrží už len tento pixyho výpis zásad… Originál článku je tu alebo aj u mňa.

Typografie na webu v kostce

Nedávno v konferenci o webdesignu proběhla debata o tom, jak nejlépe zvýrazňovat části textu. Je mi jasné, ze jen málokdo si někdy aspoň přečetl něco o typografii, vlastní WWW stránky si ale vyrábí každý druhý. A přitom návrh jejich vzhledu není nic jiného, než praktická aplikace typografie, resp. její specializované odnože. Kompletní průvodce typografií na webu vydá jistě na pořádnou publikaci (a určitě ve svém knihkupectví najdete dostatek knih na toto téma) – zkusím zde alespoň představit nějaké elementární základy, které jsou na mnoha webech stále s oblibou porušovány.

Rád bych upozornil, že typografická pravidla nejsou rozhodně samoúčelná. Vznikla během mnoha desetiletí přirozeným výběrem, a to především ze strany uživatelů (tedy čtenářů). Česky řečeno, jako pravidlo se použily ty postupy, které se osvědčily nejlépe čitelnými a přehlednými výsledky; a naopak se nedoporučuje používat kroky, které přinesou pravý opak. Navíc mnohá pravidla souvisejí i gramatickými pravidly daného jazyka (zde Pravidla českého pravopisu, dále jen Pravidla) – často je těžké rozlišit, co je pravidlem typografickým a co češtinářským. Což je ostatně celkem jedno.

Slova, věty, odstavce

Slova se oddělují jednou (a pouze jednou!) mezerou. Odstavec a řádek je velký rozdíl. Na webu se odstavce uzavírají do značky

, přechod na nový řádek
se používá jen výjimečně. Styl textu se definuje buďto pro celý odstavec, nebo pro jeho označené části. Kde je to možné, definujeme styl pro celý odstavec. Kvůli vzhledu odstavce se zásadně nedělají zásahy do samotného textu: místo vkládání prázdných řádek nastavíme horní/dolní okraj odstavce (margin), místo několika mezer na začátku nastavíme text-indent atd.

Interpunkce

Interpukční znaménka (.,;!?:… atd.) se píší bez mezery před a s mezerou za (až na jisté výjimky, dále zmíněné). Opakuji: před interpukcí NENÍ mezera, za interpukcí JE mezera.

• chybně: „Ahoj,jak se máš ? Díky,dobře …“
• správně: „Ahoj, jak se máš? Díky, dobře…“

Pozn.: Tři tečky by správně měly být zapsány znakem trojtečka (… …), ale zápis třemi tečkami se na webu za chybu nepovažuje.

Výjimky, aneb za interpunkci se např. nepovažuje:

Znaky v číslech, výrazech, časových údajích, skóre atd. Desetinné čárky a tečky nejsou interpukce, píší se bez mezery před i za, a to v české i angloamerické notaci. Např. 3,14; $1,000,000.00 atd. Obdobně čas 11.48:52, sportovní výsledek 3:2 či poměr 1:4.

Znaky v programovém kódu. Na kód se nevztahuje gramatika češtiny, ale gramatika příslušného programovacího jazyka.

Tři tečky coby výpustka. Pokud v citaci vypouštíme část textu a nahradíme jej třemi tečkami, píše se před nimi mezera. Např.:

• původní text: „Oznámil to na místě přítomný mluvčí Policie ČR.“
• zkrácená citace: „Oznámil to … mluvčí Policie ČR.“

Speciální znaky

V typografii se obvykle odlišují různé typy znaků, které mnozí považují za shodné, či ani nevědí, že existují nějaké alternativy.

Uvozovky

Jako typografické uvozovky se v češtině používají znaky:

• „ – vlevo, dolní „99“ („)
• “ – vpravo, horní „66“ (“)
• ‚ – vlevo, dolní „9“ (‚)
• ‘ – vpravo, horní „6“ (‘)

případně i obrácené francouzské uvozovky:

• » – vlevo (»)
• « – vpravo («).

Narozdíl od tištěného textu se ale na webu tolerují i ASCII „dvojité uvozovky“ a ‚jednoduché apostrofy‘. V HTML kódu bychom měli místo znaku “ používat entitu ".

Pozor, jiné jazyky používají uvozovky odlišně – např. “angloamerické” (horní 66 + horní 99) či «francouzské».

Pro uvozovky platí stejná pravidla jako pro psaní závorek: za levou uvozovkou a před pravou uvozovkou se nikdy nepíše mezera, při použití vnořených uvozovek (citace v citaci) je třeba vždy použít jiný typ uvozovek a dbát na korektní vnoření (aby se uvozovky nekřížily).

• chybně: „Bylo to „větší než malé“ množství“.
• chybně: “ Bylo to ‚ větší než malé ‚ množství. „
• chybně: „Bylo to ‚větší než malé“ množství.‘
• správně: „Bylo to ‚větší než malé‘ množství.“
• ještě lépe: „Bylo to ‚větší než malé‘ množství.“
• případně: „Bylo to »větší než malé« množství.“

Pomlčky, spojovníky, rozdělovníky, minusy apod.

Běžný znak „-“ na klávesnici počítače je minus (divis). Měl by být používán jen v matematických výrazech, např. -1, x-y; nebo jako spojovník/rozdělovník (viz Pravidla), např. „česko-slovenský“, „Jean-Jacques“ atd. Pro pomlčky by správně měly být používány speciální znaky:

• — je dlouhá pomlčka (—)
• – je střední pomlčka (–)

Na webu se ale pro snazší zápis běžně toleruje i použití krátkého divis pro pomlčky. Platí ale, že před i za pomlčkou ve větě se obvykle píše mezera (podrobnosti viz Pravidla).

• chybně: „Můžu přijít-ale bude to později.“
• správně: „Můžu přijít – ale bude to později.“
• ještě lépe: „Můžu přijít – ale bude to později.“

Další užitečné speciální znaky

Viz např. kompletní seznam entit HTML

Formátování textu

Na stránce by neměly být použity více než dva druhy písma (např. patkové pro text a bezpatkové navigační prvky, příp. i pro nadpisy). Nadužívání typů písma zhoršuje přehlednost a čitelnost. Texty stejného druhu mají mít stejnou velikost i barvu. I nejmenší použitá velikost písma má být dostatečná pro dobrou čitelnost (měli bychom umožnit, aby si čtenáři mohli písmo sami zvětšit). Barvy takové, aby byl text dostatečně kontrstní, a to i při černobílém zobrazení stránky. Nejlépe se čte černý text na bílém pozadí, inverzní zobrazení výrazně zhoršuje čitelnost.

Zvýrazňování

Pro zvýraznění úseků textu se používá především vytučnění a italika, případně jejich kombinace. Nic by se ale nemělo přehánět, jinak text vypadá jako zebra. Podtržený a proložený text, stejně jako zvýraznění VERZÁLKAMI se již v typografii považují za archaické; na webu pak zvýraznění podtržením nelze vůbec používat, neboť tímto způsobem jsou označeny odkazy. Měli bychom se vyhnout i zvýrazňování odlišnou barvou, neboť i tím můžeme mást uživatele – barevně jsou na webu odlišeny především aktivní prvky.

Následuje-li za zvýrazněným textem interpukční znaménko, musí být zvýrazněno také.

• chybně: Pokud text zvýrazním, musím zvýraznit i okolní interpunkci!
• správně: Pokud text zvýrazním, musím zvýraznit i okolní interpunkci!

Prostrčení se používá velmi výjimečně, pokud už je ale použito, musí ho být docíleno nastavením stylu textu (letter-spacing), nikoli vložením mezer! Součástí prostrčení pak musí být i mezery před a za zvýrazněným textem. Protože však prohlížeče ještě vlastnost letter-spacing nepodporují v plné šíři, je lépe prostrkávání zcela vyhnout a zvolit jiný styl zvýraznění.

• chybně: Toto je text p r o s t r č e n ý nehezky mezerami.
• správně: Toto je prostrčený text. Pokud nic nevidíte, váš prohlížeč neumí prostrkaný text vytvořit.

Nadpisy

Nadpisy lze odlišit od ostatního textu jiným typem písma, musí však být výrazně odlišný od běžného textu (např. patkové vs. bezpatkové písmo) a měl by být stejný v nadpisech všech úrovní. Velikost písma musí respektovat hierarchii nadpisů, tj. titulky

jsou největším písmo,

menším atd. Nadpisy nejnižší použité úrovně (obvykle

) musí být alespoň stejně velké jako základní text nebo větší. Všechny nadpisy by měly být zobrazeny tučnějším písmem než ostatní text.

Zarovnávání

Na webu dáváme přednost zarovnávání vlevo (text-align:left). Základní text tvořící obsah stránky se nezarovnává na střed ani doprava. Nadpisy, navigační prvky atd. lez zarovnat i na střed; zarovnání doprava se používá pouze výjimečně (např. podpis autora). Vyrovnání textu (justify) je lépe se na webu vyhnout, neboť algoritmy v prohlížečích jsou ještě nedostatečné – při mnoha kombinacích velikosti/typu písma, šířky okna atd. pak sazba vypadá přímo odporně, někdy je text dokonce zcela nečitelný.

Řádkování a mezery mezi odstavci

Pro běžný text by mělo být použito alespoň třetinové řádkování (line-height:1.33), ideální je hodnota v rozmezí 1.5 až 2 (podle velikosti a typu písma). Před a za odstavci by měla být mezera alespoň o polovinu větší než je vzdálenost mezi řádky (např. line-height:1.5; margin-top:0.75em). Mezera před nadpisem nesmí být menší než mezera za ním (nadpis patří k následujícímu textu, nikoli k předchozímu).

---

Update 1. 3. 2003:

Jednotky

Jednotky u čísel se píší s mezerou mezi číslem a jednotkou. Pokud ji vynecháme, vytváříme tím adjektivum:

• 2 cm = dva centimetry; 2cm = dvoucentimetrový
• 10 % = deset procent; 10% = desetiprocentní

Ve veličinách určujících stupně (např. stupně Celsia) tvoří jednotku znak stupeň (°) společně s určením jeho typu:

• 14,5 °C; 14,5 °Celsia
• 99 °F; 99 °Fahrenheita

Úhlové stupně, minuty a vteřiny se ale píší bez mezery, přímo za číslem:

• 18°15’30“
• možné je i 18° 15′ 30″

Mezery

V místech mezery je prohlížeče oprávněn rozdělit text na nový řádek. Především z toho důvodu se proložený text nesmí prokládat mezerami, především proto je důležité používat vhodně nedělitelnou mezeru.

Nedělitelná mezera ( ) je mezera šířky znaku „n“, v místě jejíž výskytu se nesmí přejít na nový řádek. V ideálním případě bychom ji měli použít všude tam, kde je vhodné, aby se sousedící slova a výrazy na konci řádku nikdy nerozdělily (např. mezera mezi krátkými předložkami a následujícím slovem). V některých spojeních je dokonce nezbytná a měli bychom ji použít bez diskusí (v následujících ukázkách nahradím nedělitelnou mezeru podtržítkem):

• jednotky: 2_cm, 10_%
• zkratky: s._r._o., a._s.
• iniciály: V._Havel, T._G._M.
• vhodné jsou jednoznakové předložky a spojky: v_práci, o_CSS, Petr a_Pavel
• před pomlčkou, je-li oddělena mezerami: … přijít_— ale bude…

Nedělitelnou mezeru prostě použijeme všude tam, kde nechceme, aby část slovního spojení zlstala na jednom řádku a druhá část pokračovala na řádku dalším.