Shrnutí na Základy typografie a práce s písmem

## Úvod Typografie je práce s písmem v grafickém designu — zahrnuje výběr písma, sazbu a zajištění čitelnosti v různých médiích. Tento materiál vás provede formáty fontů, strukturou písma, optickou velikostí, použitím variable fontů a zásadami legálního používání fontů. > **Definice:** Typografie je umění a technika uspořádání písma tak, aby text byl čitelný, esteticky vyvážený a vhodný pro dané médium. ## Formáty fontů a jejich použití ### Desktopové vs webové fonty - **Desktopové fonty** se používají pro tisk a grafiku. - Běžné formáty: **OTF (OpenType)**, **TTF (TrueType)** - Typické aplikace: InDesign, Photoshop, Illustrator - **Webové fonty** jsou optimalizované pro použití v prohlížečích. - Běžné formáty: **WOFF**, **WOFF2** - Použití: webové stránky > **Pravidlo:** desktop = tisk, web = optimalizace pro prohlížeč ### Porovnání formátů | Vlastnost | OTF / TTF (desktop) | WOFF / WOFF2 (web) | |---|---:|---:| | Primární použití | tisk, DTP | webové stránky | | Velikost souboru | větší | menší (komprimované) | | Podpora prohlížečů | nezaručená | optimalizované | | Funkce | pokročilé typografické funkce v OTF | optimalizováno pro web | Fun fact: Webfonty WOFF2 mohou být až o 30-40% menší než WOFF díky lepší kompresi, což zrychluje načítání stránek. ## Struktura písma: rodina, řez, variable font ### Rodina písma - **Rodina písma** je skupina souvisejících řezu nebo stylů téhož písma, např. Arial. ### Řez (weight/style) - Řez označuje variantu písma: **Regular**, **Bold**, **Italic**, atd. - Každý řez je samostatný soubor u tradičních fontů. ### Variable font (proměnný font) - Moderní formát, kde jeden soubor obsahuje více os (např. váha, šířka). - Místo mnoha řezů máte jeden soubor, který lze plynule měnit. > **Výhoda:** méně souborů = rychlejší načítání, větší flexibilita designu ### Praktický příklad použití variable fontu - Místo použití tří samostatných řezu Regular, Semibold, Bold můžete mít jeden variable font a měnit váhu plynule z $400$ na $700$ podle potřeby v CSS nebo DTP. ## Optická velikost písma: textové a display fonty ### Co to znamená - **Textové písmo** je navrženo pro malé velikosti a dlouhé bloky textu (knihy, články) — důraz na čitelnost. - **Display písmo** je určeno pro velké nadpisy a grafiku — výrazné detaily a dekorativní prvky. > **Pravidlo:** nepoužívejte display font pro dlouhý text ### Jak funguje optická velikost - Malé písmo: tvar písmen bývá jednodušší, s vyšší x-výškou a větším mezery pro lepší čitelnost. - Velké písmo: detaily a kontrast mohou být výraznější, proto display řezy mohou obsahovat ozdobné prvky, které jsou při malé velikosti nečitelné. ### Příklad - Text pro knihu: použijte textový řez s jemným kontrastem a větší interlinií. - Plakát: použijte display řez s výrazným tvarem a nízkou interlinií. Věděli jste, že někteří designéři navrhují zvláštní „optickou“ verzi téhož písma pro velikosti $8$–$12$ pt a jinou pro $24$–$72$ pt, aby zachovali konzistentní vizuální dojem? ## Licence a významné písmolijny ### Kdo tvoří a prodává fonty - Příklady významných poskytovatelů: **Adobe Fonts**, **Google Fonts**, **Monotype** - Tyto firmy navrhují písma a distribuují je pod různými licencemi. > **Pravidlo:** fonty jsou licencované — je nutné dodržovat podmínky (kupovat nebo používat legálně) ### Typy licencí (stručně) - Komerční licence: nákup pro tisk nebo komerční použití - Webfontová licence: specifická pro hosting a používání na webech - Sazební/desktop licence: pro instalaci do DTP aplikací ## Praktické tipy pro použití písma - Vyberte písmo podle média: tisk = desktop formát, web = WOFF/WOFF2. - Použijte variable fonty pro plynulé ladění váhy a šířky a menší počet souborů. - Pro dlouhé texty zvolte textové písmo s vyšší čitelností a dostatečným prostorem mezi písmeny. - Nadpisy volte display písmo, ale používejte je střídmě. - Vždy zkontrolujte licenci před použitím fontu v projektu. ## Shrnutí Typografie zahrnuje výběr správného formátu fontu (desktop vs web),