Späť

Aká je 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.

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 textFunkčný textObr. 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.

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.

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ísma16px12px14pxObr. 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á.

MobilLaptopMonitor24px a viac20px16px16pxTabletObr. 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.

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

HUNGRY FOR MORE
PREČÍTAJTE SI VIAC Z NAŠICH ČLÁNKOV.