Typografie – přehled písem
Klíčová slova: Typografie
Klíčové pojmy: Typografie = výběr, sazba a čitelnost písma, Desktopové formáty: OTF, TTF — pro tisk a grafiku, Webové formáty: WOFF, WOFF2 — optimalizované pro prohlížeče, Rodina písma = skupina řezů (např. Arial), Řez = varianta písma jako Regular, Bold, Italic, Variable font umožňuje plynulé změny os (váha, šířka), Textové písmo pro dlouhé texty, display pro nadpisy, Nepoužívat display font pro dlouhý text, Kontrolovat licenci před použitím fontu, Méně souborů = variable font = vyšší flexibilita
## Úvod
Typografie je práce s **písmem v grafickém designu**: výběr písma, sazba a zajištění čitelnosti. Tento materiál shrnuje základní pojmy, formáty fontů, strukturu rodin písma, optické velikosti a obchodní aspekty distribuce fontů.
> **Definice:** Typografie je umění a technika uspořádání textu tak, aby byl čitelný, estetický a účinně komunikoval obsah.
## Formáty fontů a jejich použití
### Desktopové vs webové fonty
- **Desktopové fonty** se používají především pro tisk a grafiku.
- Běžné formáty: **OTF (OpenType)**, **TTF (TrueType)**
- Použití: InDesign, Photoshop, tiskoviny
- **Webové fonty** jsou optimalizované pro použití v prohlížeči.
- Běžné formáty: **WOFF**, **WOFF2**
- Použití: webové stránky
> **Pravidlo:** desktop → tisk, web → optimalizace pro prohlížeč
Tabulka: porovnání formátů
| Vlastnost | Desktop (OTF/TTF) | Web (WOFF/WOFF2) |
|---|---:|---:|
| Primární použití | tisk, grafika | webové prohlížeče |
| Komprese | méně | více (komprimované) |
| Podpora funkcí | bohatá OpenType funkce | optimalizováno pro síť |
## Struktura písma: rodina, řez, variable font
### Rodina písma
- **Rodina písma** je skupina souvisejících řezů jedné sady (např. Arial).
### Řez (weight/style)
- Řez znamená variantu: **Regular**, **Bold**, **Italic** atd.
### Variable font
- **Variable font** je moderní formát, který nahrazuje více samostatných souborů jedním souborem, v němž lze plynule měnit osy (např. váha, šířka).
> **Výhoda:** méně souborů a větší flexibilita při responzivním designu
Praktický příklad: místo tří souborů Regular, Bold, Black máte jeden variable font a nastavíte váhu plynule od 300 do 900.
## Optická velikost písma: textové vs display fonty
- **Textové písmo**: navrženo pro malé velikosti a dlouhé texty (knihy, články). Má jednodušší tvary a vyšší čitelnost.
- **Display písmo**: navrženo pro velké velikosti (nadpisy, plakáty). Obsahuje výraznější detaily a ozdoby.
> **Pravidlo:** nepoužívat display font pro dlouhý text
Praktický příklad:
- Kniha: použijte serifní/neutrální textové písmo ve velikosti 9–12 pt.
- Plakát: použijte display písmo pro nadpis velikosti 48 pt a větší.
Věděli jste, že některé moderní fonty obsahují vestavěnou optickou osu, kterou lze v CSS nebo v návrhových nástrojích aktivovat pro lepší čitelnost při různých velikostech?
## Významné písmolijny a licence
- Firmy a studia navrhující a distribuující fonty: **Adobe Fonts**, **Google Fonts**, **Monotype**.
- Fonty jsou obvykle licencované: je nutné je koupit nebo použít podle licenčních podmínek.
> **Pravidlo:** používejte fonty legálně podle licence
Praktický příklad: Google Fonts nabízí mnoho fontů zdarma pro web, zatímco komerční font pro tisk může vyžadovat zakoupení licence.
## Jak vybírat písmo pro projekt (krátký postup)
1. Určete účel: tisk vs web.
2. Zvolte rodinu s vhodnými řezy (Regular, Bold, Italic).
3. Pro responzivní design zvažte variable font.
4. Pro dlouhé texty upřednostněte textové písmo; pro nadpisy display.
5. Zkontrolujte licenci a technickou podporu formátu.
Zajímavost: Google Fonts začal jako interní projekt pro zlepšení webové typografie a dnes hostuje tisíce fontů dostupných zdarma pro vývojáře a designéry.
## Shrnutí
Typografie zahrnuje výběr a nasazení písem podle média a účelu: desktopové fonty pro tisk (OTF/TTF), webové fonty pro prohlížeče (WOFF/WOFF2). Rozumět struktuře písma (rodina, řezy, variable font) a optické velikosti (textové vs display) pomáhá zlepšit čitelnost a estetiku. Vždy respektujte licenční podmínky při použití fontů.