Typografie

Škála

Typografická škála představuje důležitou součást vizuální identity. Stupnice jednolivých řezů představuje 8 velikostí písem pro specifické potřeby našich aplikací.

Kategorie	Popis	Mixin
Caption	Popisky a menší text	`.font-caption()`
Body	Běžné texty v aplikaci, základní velikost	`.font-body()`
Button	Tlačítka	`.font-button()`
Subhead	Podnadpis	`.font-subhead()`
H6	Nejmenší nadpis	`.font-h6()`
H5	Nadpis	`.font-h5()`
H4	Nadpis	`.font-h4()`
H3	Nadpis	`.font-h3()`
H2	Nadpis	`.font-h2()`
H1	Největší nadpis	`.font-h1()`

Použití

// Změna vzhledu textu na nadpis 4
// včetně fontu, řezu a ostatních potřebnácz vlastností

.foo {
    .font-h4()
}

// Změna pouze velikosti, využíváme zřídka

.bar {
    font-size: var(--font-size-h4)
}

Tloušťka

I když je tloušťka součástí proměnných pro velikost fontu, občas si situace žádá mírně odlišnou tloušťku.

Stupnice Tloušťka písma se pohybuje v rozmezí 100 – 900. V praxi používáme 400 pro běžné písmo, 500 pro tučnější a 700 pro tučné.

Upozornění Veškeré pomocné třídy a proměnné pro tloušťku byly odstraněny. Lze použít libovolnou tloušťku stupnice, přičemž při absenci fontu v dané tloušťce je automaticky použita nejbližší.

.foo {
   font-weight: 400;
}

.bar {
   font-weight: 500;
}

.qux {
   font-weight: 700;
}

Zhuštěný font

Některé popisky ve starším prostředí Silverlight se mohou zdát kompaktnější. Pokud narážíte na problém s jejich délkou a překreslování formulářů není časově přijatelné, můžete využít zhuštěného fontu.

.foo {
   font-family: var(--font-stack-condensed);
}

Pro změnu fontu pro všechny popisky přidejte do vlastních stylů tuto proměnnou.

@condensed-captions: true;

Pokud po zhuštění popisky stále přetíkají, zkuste zmenšit jejich velikost (výchozí je 12px).

--font-size-caption: 11px;

Podporované komponenty

Pro komponenty typu Edit, Label a DataLabel jsou v Xgenu dostupné vlastnosti pro změnu typografie.

Edit - InputAppearance
DataLabel - ValueAppearance
Label - CaptionAppearance

Význam	Hodnoty	Volba x Xgen
Font	Heading 1	font—h1
Je to přesná definice fontu: velikost, tloušťka, rozpal písmen, výška řádku… Neplést si s pouhou velikostí.	Heading 2	font—h2
	Heading 3	font—h3
	Heading 4	font—h4
	Heading 5	font—h5
	Heading 6	font—h6
	Body	font—body
	Button	font—button
	Caption	font—caption
Velikost	Font Size Heading 1	font-size—h1
Zachovává tloušťku a jiné proporce definované na komponentě.	Font Size Heading 2	font-size—h2
	Font Size Heading 3	font-size—h3
	Font Size Heading 4	font-size—h4
	Font Size Heading 5	font-size—h5
	Font Size Heading 6	font-size—h6
	Font Size Body	font-size—body
	Font Size Button	font-size—button
	Font Size Caption	font-size—caption
Tloušťka	Normal	font-weight—normal
	Medium	font-weight—medium
	Bold	font-weight—bold
Odstín	Primary	text-color—primary
	Secondary	text-color—secondary
	Disabled	text-color—disabled