Webové komponenty

Typografia

For Odporúčame používať pre všetky stránky jednotne len písmo uvedené v Jednotnom dizajn manuáli elektronických služieb. Zároveň odporúčame štruktúrovať textový obsah tak, aby bol ľahko a rýchlo čitateľný.

Obsah:

Písmo

Odporúčame používať písmo Source Sans Pro. Tento typ písma je voľne dostupný, môžete si ho stiahnuť napríklad v databáze Google Fonts.

Pre prípad nedostupnosti typu písma, ponúknite používateľovi typograficky podobnú alternatívu skupiny bezpätkového písma. Príklad: “font-family: Source Sans Pro, sans-serif;”.

Pri tvorbe textov dodržujte pravidlá slovenského pravopisu a používania interpunkcie.

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.

48 px Tučný nadpis

36 px Tučný nadpis

24 px Tučný nadpis

19 px Tučný nadpis

<h1 class="govuk-heading-xl">48 px Tučný nadpis</h1>

<h2 class="govuk-heading-l">36 px Tučný nadpis</h2>

<h3 class="govuk-heading-m">24 px Tučný nadpis</h3>

<h4 class="govuk-heading-s">19 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.

24 px úvodný odsek, ktorý by mal obsahovať podstatné informácie. Text by mal byť krátky a zrozumiteľný.

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

<p class="govuk-body-l">
  24 px úvodný odsek, ktorý by mal obsahovať podstatné informácie. Text by mal byť krátky a zrozumiteľný.
</p>
<p class="govuk-body">
  19 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.

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

16 px odsek s podporným textom. Použite vtedy, ak potrebujete niečo dodatočne vysvetliť. Nepoužívajte na hlavný text.

<p class="govuk-body">
  19 px odsek hlavného textu. Napísaný text by mal byť zrozumiteľný, jednoznačný a krátky.
</p>

<p class="govuk-body-s">
  16 px odsek s podporným textom. Použite vtedy, ak potrebujete niečo dodatočne vysvetliť. Nepoužívajte na hlavný text.
</p>
  • 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.

19 px odkaz bez obklopujúceho textu

19 px odkaz v hlavnom texte. Za textovou linkou pokračuje textový odsek.

Späť
<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.
  • Príklad guličkového zoznamu.
  • Ďalší bod guličkového zoznamu.
  • Tretí bod v poradí
  • Štvrtý bod
  1. Toto je číselný zoznam.
  2. Druhý bod v číselnom zozname.
  3. Každý bod zoznamu sa končí bodkou.
<ul class="govuk-list govuk-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="govuk-list govuk-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="govuk-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>
</ul>

Vsadený text

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

V prípade nedoplnenia žiadosti bude vaše konanie zastavené.
<div class="govuk-inset-text">
  V prípade nedoplnenia žiadosti bude vaše konanie zastavené.
</div>

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.

Upozornenie Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5 000 €.
<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-warning-text__assistive">Upozornenie</span>
    Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5 000 €.
  </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.

Pomoc s národnosťou
Ak si nie ste istí, akú máte národnosť, skúste sa pozrieť na váš úradný dokument ako pas alebo občiansky preukaz.
<details class="govuk-details" data-module="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Pomoc s národnosťou
    </span>
  </summary>
  <div class="govuk-details__text">
    Ak si nie ste istí, akú máte národnosť, skúste sa pozrieť na váš úradný dokument ako pas alebo občiansky preukaz.
  </div>
</details>

Ak používate HTML5 elementy, budete potrebovať knižnicu pre staršie prehliadače.

Uistite sa, že váš zdrojový kód zodpovedá príkladu vyššie.