Typografie#

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<div class="font-subhead">Subhead</div>
<div class="font-body">Body</div>
<div class="font-caption">Caption</div>
<div class="font-button">Button</div>

HTML only

<h4>1 000 000 Kč</h4>
<div class="font-subhead">Werner Heisenberg</div>
<div class="font-caption">Před 3 min</div>

Less only

<div class="price">1 000 000 Kč</div>
<div class="name">Werner Heisenberg</div>
<div class="time">Před 3 min</div>

.price {
  .font-h4;
}

.name {
  .font-subhead;
}

.time {
  .font-caption;
}

Ano Experimentujte s nadpisy h3, h2 a h1 pro výrazný kontrast informací na obrazovce

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

Vizuální změna nadpisu

Pokud je ze sémanického hlediska potřeba ponechat nadpis na jeho úrovni, ale velikostně nezapadá do obrazovky, je možné jeho velikost změnit.

<h3>I'm heading 3</h3>
<h3 class="h6">I'm heading 3 too!</h3>

Užitečné

h1
h2
h3
h4
h5
h6
font-subhead
font-body
font-caption
font-button

.font-h1;
.font-h2;
.font-h3;
.font-h4;
.font-h5;
.font-h6;
.font-subhead;
.font-body;
.font-caption;
.font-button;

Tip Má-li se prvek chovat a vypadat jako tlačítko, použijte komponentu Button.

@component-bg: @grey-5-light @grey-4-dark;

.price {
  .font-h4;
  .contrastify(@component-bg, @text-primary);

}

.name {
  .font-subhead;
  .contrastify(@component-bg, @text-secondary);
}

.time {
  .font-caption;
  .contrastify(@component-bg, @text-secondary);
}

Důležité Na příkladu výše si lze všimout, že stylování barev MultiWebu není jen prosté přiřazení hodnoty k CSS property, ale má za sebou jistou logiku. Každá proměnná barvy v sobě nese dvě složky – barvu pro světlé téma a barvu pro tmavé téma. Podrobnější informace jsou uvedeny v tématech.

Ano Výchozí text ponechte jako primární, méně důležitý obsah upozaďte jako sekundární.

Ano Disabled text využívejte výhradně u neaktivních prvků.

Opatrně Barva písma musí být kontrastní oproti pozadí. Jak toho dosáhnout a více informací o mixinu .contrastify nalezente v kontrastu.

Ne Pro text v odstínech šedi nepoužívejte odstíny šedi pro pozadí.

Užitečné

@text-primary
@text-secondary
@text-disabled

.contrastify(@your-bg, @text-primary);
.contrastify(@your-bg, @text-secondary);
.contrastify(@your-bg, @text-disabled);

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 (100 – 900), 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;
}