Webové komponenty Typografia

Obsah:

Písmo

Nadpisy

• V nadpisoch používajte veľké písmeno len na začiatku prvého slova a podľa pravidiel slovenského pravopisu. Nepoužívajte tzv. kapitálky na celé nadpisy.
• Dôsledne používajte nadpisy pre vytvorenie správnej a zrozumiteľnej hierarchie.

<h1 class="heading-xlarge">52 px Tučný nadpis</h1>

<h2 class="heading-large">38 px Tučný nadpis</h2>

<h3 class="heading-medium">26 px Tučný nadpis</h3>

<h4 class="heading-small">20 px Tučný nadpis</h4>

Úvodný odsek

• Na úvodný odsek odporúčame používať veľkosť 26 pixelov. Veľkosť písma uvádzajte v relatívnych jednotkách.
• Na každej strane by mal byť maximálne jeden úvodný odsek.

<p class="lede">
  26 px úvodný odsek, ktorý by mal obsahovať podstatné informácie. Text by mal byť krátky a zrozumiteľný.
</p>

<p>
  20 px odsek s hlavným textom, v ktorom si používateľ nájde všetky potrebné informácie v zrozumiteľnej podobe.
</p>

Hlavný text

• Vyhnite sa nadmernému používaniu tučného písma a používaniu šikmého rezu písma (kurzíva).
• Veľkosť hlavného textu je 19 pixelov, pre menšie obrazovky 16 pixelov.
• Veľkosť písma sa povinne definuje v relatívnych jednotkách, pomocou hodnôt xx-small, x-small, small, medium, large, x-large a xx-large alebo pomocou percent, hodnôt smaller, larger a jednotiek em a ex. Veľkosť písma sa nedefinuje prostredníctvom jednotiek pt, pc, in, cm, mm a px.
• Uistite sa, že riadky textu nepresahujú 75 znakov, keďže viac znakov spraví text menej čitateľným.

<p>
  20 px odsek hlavného textu. Napísaný text by mal byť zrozumiteľný, jednoznačný a krátky.
</p>

<p class="font-xsmall">
  16 px odsek s podporným textom. Použite vtedy, ak potrebujete niečo dodatočne vysvetliť. Nepoužívajte na hlavný text.
</p>

Textové odkazy

• Odkazy v hlavnom texte by mali byť modré a mali by byť odlíšené od zvyšného textu tým, že budú buď podčiarknuté alebo inak zvýraznené (nie len farebne).
• Farby pre odkazy nájdete vo farebnej palete.
• Samostatne stojace odkazy (bez okolitého textu) by nemali končiť bodkou.
• Text každého odkazu by ste mali vytvoriť tak, aby výstižne popisoval cieľ nezávisle na okolitom kontexte. Cieľ odkazu by mal byť zrejmý už zo samotného textu odkazu. Pre jednoznačnú identifikáciu odkazu použite atribút „title“ prvku <a>. Nepoužívajte odkazy v tvare „kliknite tu“, „sem“, „celý text článku“ bez toho, aby tento text bol doplnený atribútom „title“ prvku <a> s doplňujúcou informáciou.
• V prípade, že uvádzate na stránke telefónne čísla, uistite sa, že je možné ich aktivovaním priamo na dané číslo telefonovať, napr. na mobilnom telefóne.

<p>
  <a href="#">19 px odkaz bez obklopujúceho textu</a>
</p>

<p>
  <a href="#">19 px odkaz v hlavnom texte</a>. Za textovou linkou pokračuje textový odsek.
</p>

<a href="#" class="link-back">Späť</a>

Zoznamy

• Vymenúvacie zoznamy sú uvedené vetou zakončenou dvojbodkou, pričom každý riadok zoznamu začína malým písmenom a je ukončený čiarkou. Posledný bod zoznamu je ukončený bodkou.
• Alternatívou k tomu môže byť taká verzia, že každý bod zoznamu bude začínať veľkým písmenom a ukončí sa bodkou.

<ul class="list list-bullet">
  <li>Príklad guličkového zoznamu.</li>
  <li>Ďalší bod guličkového zoznamu.</li>
  <li>Tretí bod v poradí</li>
  <li>Štvrtý bod</li>
</ul>

<ol class="list list-number">
  <li>Toto je číselný zoznam.</li>
  <li>Druhý bod v číselnom zozname.</li>
  <li>Každý bod zoznamu sa končí bodkou.</li>
</ol>

<ul class="list">
  <li><a href="#">Súvisiaci odkaz</a></li>
  <li><a href="#">Súvisiaci odkaz</a></li>
  <li><a href="#">Súvisiaci odkaz</a></li>
  <li><a href="#" class="bold-xsmall">Viac</a></li>
</ul>

Vsadený text

Pre upriamenie pozornosti na dôležitý obsah stránky je účelné používať ohraničený vsadený text.

<div class="panel panel-border-wide">
  <p>
    V prípade nedoplnenia žiadosti bude vaše konanie zastavené.
  </p>
</div>

Dôležité oznamy a text s právnym dopadom

V prípade dôležitého textu s možným právnym následkom (napríklad pokuta alebo trest odňatia slobody) použite tučné písmo s ikonou výkričníka.

<div class="notice">
  <i class="icon icon-important">
    <span class="visually-hidden">Upozornenie</span>
  </i>
  <strong class="bold-small">
    Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5&nbsp;000&nbsp;€.
  </strong>
</div>

Skrytý text (zobrazenie na požiadanie)

Tento prvok sa používa na uľahčenie prezerania obsahu stránky tak, že v prípade potreby zobrazíte doplnkové kontextové informácie. Dbajte na to, aby minimálne rozmery klikateľnej plochy boli 30 x 30 pixelov.

Kliknite na “Pomoc s národnosťou” pre ukážku.

<details>

  <summary><span class="summary">Pomoc s národnosťou</span></summary>

  <div class="panel panel-border-narrow">

    <p>
      Ak si nie ste istí, akú máte národnosť, skúste sa pozrieť na váš úradný dokument ako pas alebo občiansky preukaz.
    </p>

  </div>

</details>

Príklady

• príklad stránky s typografiou