Typografie

Škála

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.

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

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

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

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.

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

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.

.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