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

52 px Tučný nadpis

38 px Tučný nadpis

26 px Tučný nadpis

20 px Tučný nadpis


  
    <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

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

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


  
    <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

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

  

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

  • 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="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.

V prípade nedoplnenia žiadosti bude vaše konanie zastavené.


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

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>

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

  

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.

Príklady