Dokonalost v detailech Typografie na webu

Znak Binární kód 1100010010001101 Byte 11000100 Byte 10001101 Znak č

Znak Dohromady tvoří text Velmi mnoho Velmi podobné Jednoznačná identifikace = unicode kód (např. ℝ = U+211D)

Zápis speciálních znaků Znaků je více než 100 tisíc Na klávesnici jen několik set (méně než 1 %) Ostatní znaky lze zapsat pomocí Altu (např. Alt + 8477 = ℝ = U+211D) V HTML lze použít entity

Mezery Obyčejná – pomocí mezerníku Zúžená – na webu nepoužitelná Nezalomitelná

Nezalomitelná mezera U+00A0,  , Alt + 0160 Vkládá se na místa, kde nesmí dojít k zalomení řádku

Nezalomitelná mezera – příklady Děti si hrály v lese. 450 ml 2 000 lidí 80 %

Interpunkce

Tečka, dvojtečka, čárka, … Mezera nenásleduje před nimi Mezera následuje za nimi Pokud je na konci věty zkratka, tak se tečka neopakuje.

Pomlčka, spojovník, minus V typografii rozlišujeme Spojovník (rozdělovník) Půlčtverčíková pomlčka Čtverčíková pomlčka Minus Na klávesnici je pouze spojovník

Pomlčka, spojovník, minus - – — − + Spojovník, půlčtverčíková pomlčka, čtverčíková pomlčka, minus, plus

Spojovník -

Spojovník U+002D, Alt + 45 Použití Sází se vždy bez mezer při dělení slov na konci řádků na konci slov, která mají pokračování jinde pěti- a šestiúhelník u složenin vyjadřujících podvojnost nebo vzájemnost Frýdek-Místek připojení částice „-li“ Sází se vždy bez mezer

Spojovník – Příklady červeno-žlutý svetr česko-anglický slovník léčebně-preventivní propan-butan Praha-Východ

Půlčtverčíková pomlčka –

Půlčtverčíková pomlčka U+2013, –, Alt + 0150 Použití nahrazuje spojky nebo předložky („a“, „od“, „do“, „proti“) místo nuly v psaní peněžních částek (Kč 120,–) naznačuje přestávku v řeči při opakování stejného výrazu jako odrážka v seznamech Pokud nahrazuje spojky nebo předložku a oba výrazy jsou jednoslovné, sází se bez mezer, jinak se odděluje mezerami z obou stran

Půlčtverčíková pomlčka – příklady Třicetiletá válka probíhala v letech 1618–1648. trenérská dvojice Martinec–Houdek William Shakespeare (1564–1616) vlak Praha–Olomouc utkání Praha – Mladá Boleslav

Čtverčíková pomlčka —

Čtverčíková pomlčka U+2014, —, Alt + 0151 2× delší než normální pomlčka Používá se pouze ve zvláštních případech, kdy vypadá opticky lépe

Minus −

Minus U+2212, −, Alt + 8722 Použití Záporná čísla (přiléhá k číslu) Odčítání (odděluje se mezerami)

Minus – příklady Teplota klesla na −12 °C. 12 − 4 = 8

Výpustka, trojtečka …

Výpustka, trojtečka U+2026, …, Alt + 0133 Nejedná se o 3 tečky, ale o samostatný znak Použití Neúplný výčet, nedokončená myšlenka Vynechání části textu Sází se stejně jako běžná tečka

Výpustka, trojtečka – příklady Pokud zítra tu omluvenku nepřineseš, tak… Vezměte si s sebou sportovní oblečení (tričko, kraťasy…). Pořád jsme opakovali: jedna, dva, tři, …, deset, … až do dvaceti.

Uvozovky Sází se rovnou k textu, bez mezer Při vnoření se používají jednoduché a ruské Použití Přímá řeč Citace Ironie

Uvozovky – příklady Petr potřásl hlavou: „Snažila se mě přesvědčit: ‚Táta ráno povídal: »Do večera ať je to nádobí umyté!«‘“

„“ ‚‘ České uvozovky Počáteční – dole, 99 resp. 9 Koncová – nahoře, 66 resp. 6 „“ ‚‘

«» ‹› Francouzské uvozovky Počáteční – šipka doleva Koncová – šipka doprava «» ‹›

»« ›‹ Ruské uvozovky Obrácené francouzské Počáteční – šipka doprava Koncová – šipka doleva »« ›‹

Apostrof ’

Apostrof U+2019, ’, Alt + 0146 Použití naznačuje vypuštění hlásky na konci slova (nejčastěji v příčestích minulých) při vynechání prvních dvou číslic letopočtu (pouze do roku 1999)

Závorky Mezery se píší z vnějšku, zevnitř nikoliv Typy: kulaté, hranaté, složené a ostré Při zanoření se vhodné použít jiný typ; obvykle se zanořují naopak než v mate-matice Pokud obsahují celou větu, tak se koncové znaménko píše dovnitř

Závorky – příklady Micinka si lehla na polštář (taková ta věc, na které se spí). Micinka si lehla na polštář. (Polštář je taková ta věc, na které se spí.) Výrazy končící na -ismus (např. stalinismus [politická teorie a praxe spjatá s J. V. Stalinem {sovětský diktátor v letech 1927–1953}]) vyslovujeme obvykle [-izmus].

Další typografická pravidla

Psaní složených číselných výrazů Tvořeny spojením čísla a dalšího slova nebo značky Mezi číslo a následující výraz se nepíše mezera ani pomlčka Nevkládá se koncová část čísla (-ti, -mi)

Psaní složených číselných výrazů 8% = 8procentní roztok 12° = 12stupňové pivo 5m = 5metrový skok 6V = 6voltová baterie 20× = 20krát x-procentní n-tá odmocnina

Psaní jednotek Jednotka se od čísla odděluje nezalomitel-nou mezerou Nevkládá se koncová část čísla (-ti, -mi)

Psaní jednotek – příklady 12 m, 10 kg, 100 kWh, 6 °C, 14 %, 17 let od 5 do 8 h (špatně: od 5-ti do 8-mi h) ve 14 letech

Stupně, minuty a vteřiny ° ′ ″ Stupeň, minuta, vteřina

Stupně, minuty a vteřiny Pokud stojí samostatně, tak se mezi ně a číslo nepíše mezera

Stupně, minuty a vteřiny – příklady Venku je teplota −8 °C. (mínus osm stupňů Celsia, mezera před °) Preferuji 12° pivo. (dvanáctistupňové, mezera za °) Kolmice svírají úhel 90°. (devadesát stupňů, bez mezery [je přípustná i varianta s mezerou])

Využití kaskádových stylů

Font-family Rodina písma Nutné deklarovat obecnou rodinu písma Pro delší texty na webu ideální sans-serif

Font-size Velikost textu Kvůli přístupnosti vhodné udávat v em.

Font-weight Tučnost textu Hodnoty bold nebo normal

Font-variant Kapitálky Hodnoty small-caps a normal

Font-style Kurzíva Hodnoty italic nebo normal

Line-height Řádkování Ideální hodnoty mezi 1.0 a 1.5

Sazba Na webu má smysl zarovnávat text pouze doleva (text-align: left;) Pro vyznačování se používá tag <strong> nebo <em>, lze i prostrkat (letter-spacing) nebo použít kapitálky (font-variant)

Nadpisy a odstavce Potřeba nastavit vnější okraje, aby se nadpis opticky vázal k odstavci, např.: p {margin: 0 0 1em 0;} h1 {margin: 0 0 0.15em 0;} České odstavce mají odsazený první řádek (text-indent)

Děkuji za pozornost