logo-claimlogo-white_stickylogo-claimlogo-claim
  • hello@sharkani.com
  • +421 915 105 575
  • English
✕
SPÄŤ

SPRÁVNA VEĹKOSŤ PÍSMA PRE WEB

Rozluskneme otázku, či na veľkosti písma skutočne záleží. A to hneď v úvode. Áno, na veľkosti záleží. Vaše perfektné texty, SEO optimalizované nadpisy, za ktoré ste zaplatili copywriterom alebo vás stáli kopu času, ktorý je koniec koncov ešte vzácnejší, predsa musia byť čitateľné. A hlavne naprieč všetkými zariadeniami. Poďme sa spolu pozrieť, ako na to.
chyba na mobile

Obr. 1: Častá chyba, príliš veľký text na mobile.

Základná trojka v typografii

Typ písma, v angličtine typeface, je len taký dobrý, ako dobre je nastavený. Môžete použiť overené písma, ako napríklad Roboto, čo je defaultný font pre Android a iné Google služby, alebo aj San Francisco používaný napríklad v iOS a stále to dopadne hrozne, ak ich nastavenie bude zlé. Základná trojica nastavení je:

Veľkosť písma – font size
Výška riadku – line height
Dĺžka riadku – line length

Tieto tri parametre spolu veľmi úzko súvisia a ovplyvňujú, či sa váš text číta ľahko a pohodlne alebo, naopak, ťažkopádne.

Niekedy sa môže stať, že je písmo príliš blízko seba, vtedy sa môže hodiť zeditovať aj celkový odstup všetkých písmen – letter spacing (používa sa aj pojem tracking).

V typografii sa stretnete aj s pojmom kerning. Je to proces úpravy medzier medzi jednotlivými znakmi, zvyčajne na dosiahnutie vizuálne príjemného výsledku a lepšej čitateľnosti. Pri tvorbe webu tento parameter nenastavujeme, malo by to riešiť písmo samotné. Preto je dôležité o kerningu vedieť, najmä pri zvažovaní atypických typov písma.

Zaužívaný postup je najskôr vybrať typ písma a následne jeho vhodnú veľkosť. Potom dolaďujeme ostatné parametre.

V tomto článku sa zameriam na výber správnej veľkosti písma pre váš web. Aby som zachoval prehľadnosť a podal vám jednoduchý a solídny úvod do problematiky, nebudem zachádzať do modulárnej mierky, ani fluidnej typografie.

Rôzne druhy textu majú rôzne veľkosti

Položte si otázku, ako sa váš text bude prioritne používať? Je to formát na dlhé čítanie, napríklad blog? Potom je text tela (ďalej iba body text) najdôležitejší.

Je to portfólio alebo marketingová stránka? V tomto prípade je hlavný display text. Tento druh textu je nastavený vo väčších veľkostiach, teda veľkostiach displeja, ktoré začínajú na 20 px, a preto sa väčšinou používajú na:


  • názov alebo titulky,
  • nadpis,
  • iniciály alebo výrazný úvodný odsek,
  • citáciu.

Jeho cieľom je vtiahnuť čitateľa do obsahu.
(Richard Rutter – Web Typography 2017)

Ak chcete natextovať aplikáciu alebo používateľské rozhranie s veľmi krátkymi a presnými informáciami, potom je vašim hlavným aktérom funkčný text (functional text).

Keď máme v typoch vhodného písma jasno, čaká nás ďalší krok. Text rozdelíme, aby bolo zreteľne jasné, čo je hlavný nadpis, nadpis, podnadpis, body text, poznámka, funkčný text, citácia a tak ďalej. Až potom začneme priraďovať jednotlivým častiam textu jeho veľkosť.
Nadpis (Display text) Body text Funkčný text Obr. 2: Display text, ktorý tvorí napríklad nadpisy alebo úvodzovky, je nastavený na väčšiu veľkosť. Body text by sa mal v ideálnom prípade pohybovať okolo predvolených nastavení prehliadača. Funkčný text môže byť o niečo menší.

Text tela – Body text

Predvolená hodnota: 16 pixelov alebo 1 em
Na mobile: použite predvolené hodnoty, niekedy o 10 % menšie
Na pracovnej ploche: prejdite na 24 pixelov alebo 1,5 em

Je veľa stránok, ktoré nastavujú príliš malý body text. Niektoré dokonca neriešia ani úpravu veľkosti pri zobrazení na celú obrazovku. Vždy je dobré zvážiť, kam až zájsť, čo už je príliš a čo ešte v poriadku.

alza

Obr. 3: Veľkosť písma na mobile 14px a na desktope 13px je už na hrane čitateľnosti. Na ktorú ale vzhľadom na množstvo obsahu niekedy treba ísť. Zdroj: alza.sk.

Display Text, nadpis (heading h1 – h6)

Predvolená hodnota: 40 pixelov alebo 2,5 em pre H1
Na mobile: 32 pixelov alebo 2em a menej, pretože zaberá príliš veľa miesta
Na pracovnej ploche: prejdite na 64 pixelov alebo 4 em

Tieto hodnoty použite ako maximum pre veľkosti písma. Pre ostatné nadpisy vyberte hodnoty medzi najväčším nadpisom a body textom, ktoré budú stále vytvárať vizuálnu hierarchiu. Vo väčšine prípadov stačí upraviť štýl H1 až H4, pričom H4 môže mať rovnakú veľkosť ako body text. Nastavená väčšia váha alebo iný typ písma zabezpečí, že ako nadpis stále vynikne.

desktop-phone

Obr. 4: Tabuľka odporúčanej veľkosti písma na mobile a na desktope. Zdroj: impactplus.com.

Funkčný text (titulky, navigácia)

Predvolené: 12 až 14 pixelov alebo 0,75 až 0,875 em
Na mobile: neklesajte pod predvolené hodnoty, už sú veľmi malé
Na pracovnej ploche: prejdite na 16 pixelov alebo 1 em

Tento text môže byť menší ako body text, a to najmä preto, lebo inak by ste ho len ťažko zmestili do svojho dizajnu. Stále by však mal byť čitateľný. Jedným z tipov je použiť o niečo silnejšiu/tenšiu váhu (napríklad medium/light), väčší odstup písmen alebo kurzívu.

 
16px25pxPrednastvená veľkosť písma16px12px14px Obr. 5: Príklad produktovej karty, kde sa správne pracuje s veľkosťou písma. Veľkosť písma je držaná na minime, ale stále je dostatočne čitateľná. Zdroj: martinus.sk
 

Využitie relatívnych jednotiek

Em a rem sú relatívne jednotky používané v CSS. Dôvod, prečo ich používať je ten, že nám uľahčujú prácu. Samozrejme, váš text sa nakoniec zobrazí s konkrétnou veľkosťou v pixeloch, ale pri navrhovaní a kódovaní je veľmi užitočné uvažovať o vzťahoch medzi rôznymi prvkami a nie o absolútnych veľkostiach.

body {
 font-size: 1rem; /*prednastavená veľkosť textu*/
}

h1 {
 font-size: 2.5rem; /*hlavný nadpis, 2.5 násobok body textu*/
}

h2 {
 font-size: 2rem; /*nadpis, 2 násobok body textu*/
}

h3 {
 font-size: 1.5rem; /*podnadpis, 1 ½ násobok body textu*/
}

a {
 font-size: 0.75rem; /*odkaz, ¾ z body textu*/
}   

Pozor na väčšie obrazovky

Správna veľkosť v responzívnom dizajne je primeraná vzdialenosti čitateľa od zariadenia. Môžeme predpokladať, že čím väčšia je obrazovka, tým ďalej je od čitateľa. So šírkou 370px môže ísť o mobil, ktorý je bližšie k telu. Na druhej strane, 1920px veľká obrazovka môže byť externý monitor umiestnený na pracovnom stole ďalej od čitateľa.

To znamená, že v určitých krokoch je dobré zmeniť veľkosť písma. Tu vám relatívne jednotky prinášajú veľkú výhodu. Všetko môžete proporcionálne zväčšiť v závislosti od veľkosti obrazovky, resp. okna, v ktorom je webstránka otvorená.

Mobil Laptop Monitor 24px a viac 20px 16px 16px Tablet Obr. 6: Čím väčšia je obrazovka, tým väčšia by mala byť veľkosť písma. Na menšej obrazovke použite predvolené hodnoty, možno o niečo menšie.

Typ písma ovplyvní všetko

Vždy bude záležať na vašej webstránke alebo aplikácii a type písma, ktorý si vyberiete. Kvôli dizajnu písma a super komplikovaným technickým veciam nazývaným vertikálne metriky sa v tejto téme môžete takmer stratiť a o ďalších detailoch a výnimkách by sa dalo písať donekonečna. Nakoniec na tom až tak nezáleží. Vždy prihliadajte na to, čo vidíte a nie iba na to, čo ste vypočítali.
Group 11

Obr. 7: Oba fonty majú rovnakú veľkosť, ale nie sú rovnako veľké.

Ako obrázok č. 7 ilustruje, to, že pri zmene písma alebo použití viacerých typov písma máte nastavenú jeho veľkosť napríklad 28px, neznamená, že bude rovnako veľké.
„Tip na záver: Ak máte web v slovenčine, nevyberajte si typ písma, ktorý nepodporuje všetky potrebné špeciálne znaky ako sú mäkčene a podobne. Väčšinou sa používa kombinácia dvoch druhov písma, preto by mali tieto písma spolu tvoriť vhodný pár. Preveriť si tie svoje môžete napríklad tu.„
V tomto článku som pre vás zhrnul hrubé základy a pokyny, ktorými je dobré sa riadiť, myslite však na to, že je úplne ok robiť kompromisy. No nikdy nie na úkor čitateľnosti textu. Nezabúdajte na to, že rôzne veľkosti obrazovky potrebujú rôzne veľkosti písma. Čo je na notebooku ešte super čitateľné, to môže byť na mobile priveľké a na veľkom monitore v práci primalé. Prispôsobiť veľkosť písma nie je nič zložité a návštevníci vášho webu nebudú musieť žmúriť na monitor alebo krútiť hlavou nad nečitateľným textom a nadpisom na 4 riadky. V neposlednom rade sa vždy môžete poradiť so svojim web dizajnérom, alebo sa obrátiť na našu agentúru.

Inšpirácia:

w3-lab.com
penguindesigning.com
imarc.com
impactplus.com
learnui.design
pimpmytype.com
fontjoy.com
fonts.google.com
type-scale.com
filip_sharkani_web

Článok pre Vás pripravil Filip.

Rozluskneme otázku, či na veľkosti písma skutočne záleží. A to hneď v úvode. Áno, na veľkosti záleží.

Zdieľať

Neprestávajte čítať

WebP
5. decembra 2022

WEBP – ŠETRNÝ OBRÁZKOVÝ FORMÁT


čítaj viac >
3. októbra 2022

SÚHLAS SO SPRACOVANÍM SÚBOROV COOKIE


čítaj viac >
14. septembra 2022

VIDEO AKO POZADIE NA WEBSTRÁNKE


čítaj viac >

režim čítania

moon moon

SLEDUJTE NÁS AJ NA FACEBOOKU

Najnovšie články

  • ÚLOHA SOCIÁLNYCH SIETÍ PRI VAŠOM PODNIKANÍ
  • WEBP – ŠETRNÝ OBRÁZKOVÝ FORMÁT
  • SÚHLAS SO SPRACOVANÍM SÚBOROV COOKIE
  • VIDEO AKO POZADIE NA WEBSTRÁNKE
  • Moja stáž v SHARKANI
© 2023 Betheme by Muffin group | All Rights Reserved | Powered by WordPress
    • No translations available for this page
      SHARKANI
      Spravujte súhlas so súbormi cookie
      Na poskytovanie tých najlepších skúseností používame technológie, ako sú súbory cookie na ukladanie a/alebo prístup k informáciám o zariadení. Súhlas s týmito technológiami nám umožní spracovávať údaje, ako je správanie pri prehliadaní alebo jedinečné ID na tejto stránke. Nesúhlas alebo odvolanie súhlasu môže nepriaznivo ovplyvniť určité vlastnosti a funkcie.
      Funkčné Vždy aktívny
      Technické uloženie alebo prístup sú nevyhnutne potrebné na legitímny účel umožnenia použitia konkrétnej služby, ktorú si účastník alebo používateľ výslovne vyžiadal, alebo na jediný účel vykonania prenosu komunikácie cez elektronickú komunikačnú sieť.
      Nastavenia
      Technické uloženie alebo prístup je potrebný na legitímny účel ukladania preferencií, ktoré si účastník alebo používateľ nepožaduje.
      Štatistiky
      Technické úložisko alebo prístup, ktorý sa používa výlučne na štatistické účely. Technické úložisko alebo prístup, ktorý sa používa výlučne na anonymné štatistické účely. Bez predvolania, dobrovoľného plnenia zo strany vášho poskytovateľa internetových služieb alebo dodatočných záznamov od tretej strany, informácie uložené alebo získané len na tento účel sa zvyčajne nedajú použiť na vašu identifikáciu.
      Marketing
      Technické úložisko alebo prístup sú potrebné na vytvorenie používateľských profilov na odosielanie reklamy alebo sledovanie používateľa na webovej stránke alebo na viacerých webových stránkach na podobné marketingové účely.
      Spravovať možnosti Správa služieb Spravovať predajcov Prečítajte si viac o týchto účeloch
      Nastavenia
      {title} {title} {title}
      Send me my password
      Your password has been sent by email
      Make a payment
      Total to pay :
      $5
      Powered by Stripe

      Payment could not be made
      Pay now

      Poďme na to

      0$

      Ďakujeme. Kalkulácia aj so sprievodnými informáciami už je vo vašej emailovej schránke.

      Sharkulačka

      Cenová kalkulačka tvorby webovej stránky

      Uvažujete o novej webstránke, no nemáte predstavu aký rozpočet na to budete potrebovať? Využite našu intuitívnu šesťkrokovú kalkulačku, ktorá Vás prevedie výberom podstatných parametrov, na základe, ktorých získate orientačnú cenovú kalkuláciu.
      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      Aký rozsah webovej stránky
      potrebujete?

      Označte 1 možnosť

      onepage

      Jedna stránka (bez podstránok)

      Do 5 podstránok

      6 a viac podstránok

      Musíte vybrať aspoň jednu možnosť
      Ďalej

      Kde sa bude primárne
      webová stránka prezentovať?

      Označiť môžete viacero možností

      Mobil

      Laptop / desktop

      Veľké obrazovky

      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      Aké funkcie na webovej stránke
      potrebujete?

      Označiť môžete viacero možností

      Kontaktný formulár

      Newsletter

      Online chat

      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      Budete potrebovať tvorbu
      obsahových podkladov?

      Označiť môžete viacero možností

      Copywriting

      Fotografie na mieru

      Jazykové mutácie

      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      To je všetko!

      Orientačnú cenu tvorby vašej novej webstránky na mieru si nájdete na:


      *podmienky spracovania a ochrany osobných údajov

      Summary

      Popis Informácie Množstvo Cena
      Discount :
      Spolu :
      Odoslať
      Späť

      MILÍ ČITATELIA,

      do našich blogových článkov sme pridali novú funkcionalitu, vďaka ktorej si jednoducho zmeníte režim čítania zo svetlého do tmavého režimu a naopak. Stačí kliknúť vpravo na ikonu.

      • Služby
        • Grafika
        • Web
        • Marketing
        • Programovanie
      • Blog
      • Referencie
      • O nás
        • Filozofia
        • Tím
        • História
      • Kontakt
      • English