Typografie
Pravidla pro použití textových prvků
Skupiny písma
Display
Jsou největší a slouží k upoutání pozornosti na klíčové informace, například číselné údaje nebo titulky s velkým dopadem (např. v bannerech).
Display fonty jsou k dispozici ve třech velikostech:
- l (large),
- m (medium),
- s (small), což usnadňuje jejich přizpůsobení různým kontextům.
Headline
Používají se především pro nadpisy, označení hlavních částí obsahu nebo zvýraznění důležitých prvků.
Headline fonty jsou určeny pro kratší úseky textu s vyšším důrazem, které mají být rychle a snadno čitelné.
Headline fonty jsou k dispozici v pěti velikostech:
- xl (extra-large),
- l (large),
- m (medium)
- s (small),
- xs (extra-small), které poskytují flexibilitu podle hierarchie obsahu.
Body
Jsou určeny pro delší texty, jako jsou odstavce nebo popisné sekce, které vyžadují čitelnost při menších velikostech.
Používají se i v komponentách pro kratší texty, přičemž velikost Body fontu odpovídá velikosti dané komponenty, aby zajišťovala vizuální konzistenci a snadnou čitelnost.
Body styly mají analogicky jako Headline pět velikostí. U každé z těchto velikostí je navíc k dispozici možnost boldování pro zvýraznění, což umožňuje lepší hierarchii v rámci delších textů.
Použitá písma
Použité velikosti písma vychází z následující stupnice. Základní velikost písma 1rem odpovídá 16px.
| Ukázka | Popis | Token |
|---|---|---|
Aa 3.5rem56px | display-l Display fonts are used for large text to grab attention, such as titles or important data. | .gov-text--display-lvar(--gov-text-display-l-font-size)var(--gov-text-display-l-line-height) |
Aa 3rem48px | display-m Display fonts are used for large text to grab attention, such as titles or important data. | .gov-text--display-mvar(--gov-text-display-m-font-size)var(--gov-text-display-m-line-height) |
Aa 2.5rem40px | display-s Display fonts are used for large text to grab attention, such as titles or important data. | .gov-text--display-svar(--gov-text-display-s-font-size)var(--gov-text-display-s-line-height) |
Aa 2.5rem40px | headline-xl Headline fonts are used for shorter text like headings, providing emphasis and readability. | .gov-text--headline-xlvar(--gov-text-headline-xl-font-size)var(--gov-text-headline-xl-line-height) |
Aa 2rem32px | headline-l Headline fonts are used for shorter text like headings, providing emphasis and readability. | .gov-text--headline-lvar(--gov-text-headline-l-font-size)var(--gov-text-headline-l-line-height) |
Aa 1.5rem24px | headline-m Headline fonts are used for shorter text like headings, providing emphasis and readability. | .gov-text--headline-mvar(--gov-text-headline-m-font-size)var(--gov-text-headline-m-line-height) |
Aa 1.25rem20px | headline-s Headline fonts are used for shorter text like headings, providing emphasis and readability. | .gov-text--headline-svar(--gov-text-headline-s-font-size)var(--gov-text-headline-s-line-height) |
Aa 1.125rem18px | headline-xs Headline fonts are used for shorter text like headings, providing emphasis and readability. | .gov-text--headline-xsvar(--gov-text-headline-xs-font-size)var(--gov-text-headline-xs-line-height) |
Aa 1.25rem20px | body-xl Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis. | .gov-text--body-xlvar(--gov-text-body-xl-font-size)var(--gov-text-body-xl-line-height) |
Aa 1.125rem18px | body-l Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis. | .gov-text--body-lvar(--gov-text-body-l-font-size)var(--gov-text-body-l-line-height) |
Aa 1rem16px | body-m Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis. | .gov-text--body-mvar(--gov-text-body-m-font-size)var(--gov-text-body-m-line-height) |
Aa 0.875rem14px | body-s Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis. | .gov-text--body-svar(--gov-text-body-s-font-size)var(--gov-text-body-s-line-height) |
Aa 0.75rem12px | body-xs Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis. | .gov-text--body-xsvar(--gov-text-body-xs-font-size)var(--gov-text-body-xs-line-height) |
Řez písma
V rámci webů a aplikací MV jsou použité následující řezy písma Roboto
- Roboto Thin
- Roboto Light
- Roboto Regular
- Roboto Medium
- Roboto Bold
Doporučení: Pokud je pozadím písma fotka, musí být dostatečně ztmavená, aby splňovala požadavky na kontrast. Tzn., že fotka musí mít na sobě alespoň 75% vrstvu černé, aby byl na ní kontrast písma dostatečný a splňoval směrnici o přístupnosti webového obsahu WCAG 2.1.