Typografie na webu

1. Dokonalost v detailech Typografie na webu

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

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

4. 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 Zápis speciálních znaků

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

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

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

8. Interpunkce

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

10. 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

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

12. - Spojovník

13. U+002D, Alt + 45 • Použití • 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

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

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

16. 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

17. 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 Půlčtverčíková pomlčka – příklady

18. — Čtverčíková pomlčka

19. 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 Čtverčíková pomlčka

20. − Minus

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

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

23. … Výpustka, trojtečka

24. 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

25. 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. Výpustka, trojtečka – příklady

26. 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

27. 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é!«‘“ Uvozovky – příklady

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

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

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

31. ’ Apostrof

32. 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) Apostrof

33. 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

34. 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]. Závorky – příklady

35. Další typografická pravidla

36. Tvořeny spojením čísla a dalšího slovanebo 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ů

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

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

39. 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 Psaní jednotek – příklady

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

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

42. 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]) Stupně, minuty a vteřiny – příklady

43. Využití kaskádových stylů

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

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

46. Tučnost textu • Hodnoty bold nebo normal Font-weight

47. Kapitálky • Hodnoty small-caps a normal Font-variant

48. Kurzíva • Hodnoty italic nebo normal Font-style

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

50. 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) Sazba