Typografie

Typografie ve Spectru určuje výběr písma, hierarchii textu i způsob použití v komponentách. Zároveň vychází z práce s variabilními fonty, kde lze v rámci jednoho fontového souboru nastavovat například tloušťku, šířku a další OpenType vlastnosti podle potřeb konkrétního rozhraní.

Kdy použít

• Pokud potřebujete stabilní hierarchii napříč aplikací (nadpisy, tělo textu, metadata).
• Pokud chcete měnit vzhled písma bez změny struktury komponent.
• Pokud chcete držet konzistentní velikosti a váhy mezi týmy.

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 pracuje se třemi typy písem podle použití. V Motivu si je můžete snadno kombinovat.

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 vlastností

Protože každý font disponuje jinou sadou os a jinou sadou OpenType vlastností, je nutné 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 sada předdefinovaných stylů, která drží konzistenci a jasnou hierarchii textu.

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řazuj elementům vlastní velikosti fontu. Používej stupnici.

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í lze 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

Tloušťka je součástí mixinů, ale někdy je potřeba ji doladit. Rozsah závisí na fontu (typicky 100–1000). V praxi nejčastěji používáme 400, 500-600 a 700-900.

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);
}