Typografie

V UI designu typografie zahrnuje výběr písma a jeho systematizaci, vizuální hierarchii a možnosti přizpůsobení. Správně nastavená a použitá typografie usnadňuje orientaci, zlepšuje čitelnost a posiluje vizuální identitu.

S rozvojem variabilních fontů se možnosti přizpůsobení usnadnily. V rámci jediného souboru je možné plynule měnit parametry pomocí tzv. os a OpenType vlastností - například tloušťku, šířku, sklon, zapnutí alternativnívh znaků, výšku dotažnic aj.

Fonty

Změna fontu Vyzkoušej různé kombinace písem v Motivu

Nový výchozí font

Ve Spectru 26.1 se jím stal Zalando Sans, čímž nahradil dosavadní Roboto Flex.

Typy

Spectro nabízí nastavení tří typů písem v kontextu jejich použití. Motivo disponuje několika fonty v každé kategorii tak, aby bylo možné jednoduše upravit vizuální identitu.

Typ	Popis	Seed
Hlavní	Slouží pro veškerý běžný obsah aplikace, kde je klíčová čitelnost a jednoduchost. Neměl by být příliš dekorativní, aby text zůstal snadno čitelný i při delším používání.	fontFamilyMain
Nadpisy	Zvýrazňuje nadpisy větší velikostí, což umožňuje použít výraznější a vizuálně zajímavější typografii. Lze zvolit odlišný font od hlavního, nebo ponechat stejný a upravit jeho parametry pro dynamičtější vzhled.	fontFamilyHeadings
Pevná šířka	Používá se pro zobrazení kódu nebo tam, kde je důležitá přesná zarovnanost znaků. Hodí se také pro technicky laděný design, kde může sloužit nejen pro kód, ale i pro nadpisy nebo specifické prvky rozhraní.	fontFamilyMonospace

Parametry

Každý typ s sebou kromě rodiny písma nese další dva parametry:

• Nastavení os
• Nastavení OpenType vlastostí

Protože každý font dispouje jinou sadou os a jinou sadou OpenType vlastností, je nuté tyto parametry použít vždy k danému typu fontu.

Použití

Less

.main {
   .font-family-main();
}

.heading {
   .font-family-headings();
}

.mono {
   .font-family-monospace();
}

CSS

.main {
   font-family: var(--font-stack-main);
   font-weight: var(--font-weight-main);
   font-variation-settings: var(--font-axes-main);
   font-feature-settings: var(--font-features-main);
}

.heading {
   font-family: var(--font-stack-headings);
   font-weight: var(--font-weight-headings);
   font-variation-settings: var(--font-axes-headings);
   font-feature-settings: var(--font-features-headings);
}

.mono {
   font-family: var(--font-stack-monospace);
   font-weight: var(--font-weight-monospace);
   font-variation-settings: var(--font-axes-monospace);
   font-feature-settings: var(--font-features-monospace);
}

Škála

Typografická škála (type ramp) je systém předem definovaných stylů písma, který zajišťuje konzistenci, vizuální hierarchii a snadnou orientaci v uživatelském rozhraní. Poskytuje jasná pravidla pro používání nadpisů, textů a popisků.

Stupně

Kategorie	Popis	Typ	Mixin
Footnote	Poznámky pod čarou, nejmenší text	Main	.font-footnote()
Caption	Popisky a menší text	Main	.font-caption()
Body	Běžné texty v aplikaci, základní velikost	Main	.font-body()
Button	Tlačítka	Main	.font-button()
Code	Kód	Monospace	.font-code()
Subhead	Podnadpis	Main	.font-subhead()
H6	Nejmenší nadpis	Headings	.font-h6()
H5	Nadpis	Headings	.font-h5()
H4	Nadpis	Headings	.font-h4()
H3	Nadpis	Headings	.font-h3()
H2	Nadpis	Headings	.font-h2()
H1	Největší nadpis	Headings	.font-h1()

Tip

Experimentujte s nadpisy pro výrazný kontrast informací na obrazovce.

Použití

.foo {
   .font-body()
}

.bar {
   .font-h4()
}

.qux {
   .font-button()
}

.large-code {
   .font-code();
   font-size: var(--font-size-xxl);
}

Nebezpečí

Nepřiřazujete elementům vlastní velikosti fontů, stupnice pokrývá všechny potřeby.

Upozornění

U aplikací běžících na MultiWebu je doporučeno ponechat základní velikost textu na 13px.

Velikosti

Určují dostupné velikosti písma pro škálu. Rozsah velikostí leze změnit v Motivu.

Parametry

Parametr	Popis	Seed	Hodnoty
Základ	Výchozí velikost písma, od které se odvíjejí ostatní stupně	fontBaseSize	13–16 px
Poměr	Násobek, podle kterého se vypočítávají velikosti dalších stupňů	scaleRatio	1.1–1.6

Kategorie	Proměnná
XS	--font-size-xs
S	--font-size-s
Base	--font-size-base
L	--font-size-l
XL	--font-size-xl
XXL	--font-size-xxl
XXXL	--font-size-xxxl
XXXXL	--font-size-xxxxl

Použití

large-button-component {
   .font-button();

   // Zvětší velikost textu buttonu, ale zachová vše ostatní
   font-size: var(--font-size-xxl);
}

Tloušťka

I když je tloušťka součástí mixinů pro každý stupeň typografické škály, občas si situace žádá ji mírně upravit. Pohybuje v rozmezí 100 – 1000, v závislosti na konkrétním písmu. V praxi používáme 400 pro běžné písmo, 500-600 pro tučnější a 700-900 pro tučné.

Typ	Popis	Seed
Pro hlavní font	Vhodné ponechat výchozí hodnotu 400, popř. vyzkoušet rozmezí 350 – 450.	fontWeightMain
Pro nadpisy	Využívejte hodnoty 500 – 1000, výchozí je 700	fontWeightHeadings
Pro pevnou šířku	Vhodné ponechat výchozí hodnotu 400, popř. vyzkoušet rozmezí 350 – 450	fontWeightMonospace

Výchozí tloušťka pro každý typ písma je volitelná, proto pro další stupně využívejte proměnný s adekvátně nastavenými hodnotami pro tenší a tučnější řezy.

Typ	Popis	Rozdíl	Proměnná
Thin	Velmi tenký řez, používejte jen u velkých nadpisů	-200	--font-weight-[font_type]-thin
Light	Tenký řez, používejte jen u velkých nadpisů	-100	--font-weight-[font_type]-light
Regular	Výchozí	-	--font-weight-[font_type]
Medium	Tučnější řez pro mírné zvýraznění	+100	--font-weight-[font_type]-medium
Bold	Tučný řez pro velké zvýraznění	+300	--font-weight-[font_type]-bold

// Tučný text
.foo {
   .font-body();
   font-weight: var(--font-weight-main-bold);
}

// Tenší nadpis
.bar {
   .font-h1();
   font-weight: var(--font-weight-headings-light);
}