Typografie

Typografie

Prezentujete obsah srozumitelně a čitelně. Klaďte důraz na zřetelnou hierarchii informací, zdůrazňujte jen ty podstatné.

Velikost

MultiWeb obsahuje vyváženou typografickou stupnici pro potřeby konečného designu. Stupnice nabízí deset stylů pro vytvoření velikostního kontrastu a hierarchie obsahu.

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Subhead
Body
Caption
Button
<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

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

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;
}
1 000 000 Kč
Werner Heisenberg
Před 3 min

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>

I'm heading 3

I'm heading 3, too!

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.

Odstín

Pro odlišení důležitosti zobrazených informací je dobrou praxí použít méně výraznější odstín. K dispozici jsou tři odstíny.

Text Primary
Text Secondary
Text Disabled
Text Primary
Text Secondary
Text Disabled
@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);
}
1 000 000 Kč
Werner Heisenberg
Před 3 min
1 000 000 Kč
Werner Heisenberg
Před 3 min

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

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Normal Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Medium Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Bold

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

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.

Roboto

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Roboto Condensed

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

.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;
Roboto
Datum splatnosti

Roboto Condensed
Datum splatnosti

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

--font-size-caption: 11px;
Roboto 12px
Datum splatnosti

Roboto Condensed 11px
Datum splatnosti