31. Mar 2022Design

Dobrá typografia je neviditeľná: význam a dôležitosť typografie

Podľa Interaction Design Foundation tvorí text 90 % online informácií a je hlavným nositeľom informácií aj napriek rastúcemu trendu videí a obrázkov. V tomto článku vás prevedieme základnými pojmami, rozdielmi, anatómiou písma a nakoniec vám povieme, prečo by mali digitálni dizajnéri a developeri nahradiť px (pixely) za rem.

Aneta StašikováDigital Product Designer

Dôležitosť typografie

Užitočná, no stále nedocenená. Typografia je dôležitým funkčným prvkom dizajnu. Znaky – písmená, číslice, symboly a interpunkčné znamienka nie sú len nositeľmi informácií. Vďaka svojim rozmanitým tvarom a štýlom znakov môže typografia definovať charakter webu alebo značky. Typografia má obrovský vplyv na čitateľnosť, čítavosť a dokáže ovplyvniť správanie zákazníkov.

Aký je rozdiel medzi písmom, fontom a rezom?

‍Písmo – konkrétny súbor znakov, ktoré majú spoločný charakter. Helvetica je písmo.‍

Rez (tiež štýl) – variant písma. Helvetica Bold je rez, Helvetica Medium je iný rez.‍

Font – konkrétny variant písma v konkrétnej veľkosti a reze, napr. Helvetica Bold 12 pt alebo Helvetica Light 16 pt (kedže v časoch kníhtlače bolo potrebné každý variant vyrobiť fyzicky samostatne).

‍Základné rozdelenie písiem

Serif

Používajú sa na dlhšie texty, obvykle napríklad v tlačených knihách.

Serifové písmo je kresbový variant písma s ťahmi ukončenými serifmi (hovorovo bežne označované ako pätky, avšak tento výraz sa v odbornej terminológii neodporúča).

Sans-serif

Sans-serifové alebo bezserifové (hovorovo bezpätkové) písmo je kresbový variant písma bez serifov.

Sans-serifové písmo je vývojovo mladšie ako serifové, preto sa často považuje za čistejšie a modernejšie. Vďaka svojmu charakteru je ľahšie čitateľné na obrazovkách digitálnych zariadení s nižším rozlíšením.

💡 Zaujímavosť: Podľa štúdie ACM Transactions on Computer-Human Interaction serifové písmo čítajú rýchlejšie ľudia nad 35 rokov, naopak ľudia pod 35 rokov čítajú rýchlejšie sans-serifové písma.

Display

Nazývané aj nadpisové písmo. Displayové písmo má dekoratívny charakter, a preto nie je vhodné pre dlhšie texty, prioritne sa používa na nadpisy/podnadpisy.

Monospace

Všetky znaky monospace písiem sú rovnako široké a rovnako široké sú aj medzery medzi slovami, preto sa s monospace písmom často stretávame v tabuľkách, kódoch, zápisoch čísel. V reálnom svete sa s ním môžeme stretnúť napr. na letisku.

💡 Zaujímavosť: Pre dyslektikov je toto písmo ťažko čitateľné.

Script

Scriptové písma alebo taktiež písma napodobňujúce ručne písané písmo sú písma vhodné na nadpisy alebo značky. Scriptové písma nie sú vhodné na dlhšie nadpisy alebo texty.

‍

Písmová rodina a písmová superrodina

Písmová rodina obsahuje niekoľko rezov (Regular, Bold, Italic, atď.). To je napríklad Roboto.

Písmová superrodina obsahuje viacero písiem, ktoré vychádzajú z rovnakého základu a zdieľajú dizajnové parametre, napr. proporcie, tieňovanie, konštrukciu alebo kresbové detaily. Písmové superrodiny najčastejšie obsahujú serifový a bezserifový variant alebo rôzne šírkové varianty toho istého písma. Sú to napr. Roboto, Roboto Slab a Roboto Mono.

Výhody používania superrodiny

Niektoré projekty si vyžadujú väčšiu vizuálnu konzistenciu, kde párovanie rôznych písiem nie je správnym riešením. Dizajnér môže použiť rôzne rodiny z jednej superrodiny pre zobrazenie používateľského rozhrania (menu, popisy) a redakčného obsahu (nadpisy, hlavný text). Týmto vytvorí konzistentný tón s jasnou hierarchiou naprieč produktom.

Anatómia písma

Účarie (baseline) – linka na ktorej sedia znaky písma.

Stredná výška písma (x-height) – výška malého písmena.

Dolný doťah – je ťah písmen g, j, p, q, y pod účarím dosahujúci k dolnej doťažnici (descender)

Horný doťah – je ťah písmen b, d, f, h, k, l nad strednou výškou písma dosahujúci k hornej doťažnici (ascender)

Verzálková doťažnica (cap height) – vymedzuje výšku veľkých písmen (verzálok).

Serif – hovorovo označovaný ako pätka – malý dekoratívny ťah na konci hlavných ťahov písmena.

Driek (stem) - stredná časť písmena je hlavný, zvyčajne zvislý alebo šikmý ťah tvaru písmena, na ktorý nadväzujú oblé ťahy, nábehy, výbehy atď

Rameno (arm, bar) – horizontálny ťah písmen E, F, T a horný ťah písmena „K".

Výbeh (terminal) – u serifových písiem zakončenie ťahu iným spôsobom ako serifom, napr. krúžkom v písmene a.

Zaujímavosť

Viete prečo sa znaky volajú lowercase (mínusky) a UPPERCASE (verzálky)?

Podľa toho, z ktorej zásuvky bral sadzač písma daný znak. Verzálky sa umiestňovali hore, mínusky boli dole.

Variabilné písmo

Variabilné písma sú inováciou v oblasti digitálnej typografie, ktorá umožňuje v jednom fonte flexibilne zaobchádzať s parametrami znakov, ako je šírka, hrúbka či sklon. Umožňuje dizajnérom prispôsobiť písmo dizajnu namiesto toho, aby sa dizajn prispôsoboval písmu. To uvoľňuje obrovský potenciál pre dizajn a prináša flexibilitu do vizuálnych identít a značiek.

Čo sú variabilné písma?

V porovnaní so statickými písmami, ktoré obsahujú konkrétny počet preddefinovaných rezov (každý uložený v samostatnom súbore), variabilné písma umožňujú nastaviť na danej škále ľubovoľný rez, pričom celé variabilné písmo je spravidla distribuované ako jeden súbor.

Variabilné fonty umožňujú plynulé generovanie rezov rodiny písma v určenom rozmedzí. Pomocou variabilného písma môžeme meniť a prispôsobovať šírku, výšku a sklon znakov aj mimo preddefinovaných rezov. Pomocou jedného fontu tak dokážete vytvoriť množstvo variácií.

Keďže technológia variabilných písiem priniesla nové možnosti a spôsoby uvažovania nad písmom mimo kontextu tradičnej rodiny rezov, často sa môžeme stretnúť s výrazne experimentálnymi variabilnými písmami, výnimkou napríklad nie sú písma, ktoré obsahujú iba verzálky.

‍

Malý tip na záver: Výhody používania rem namiesto px

Každý operačný systém a webový prehliadač má predvolenú veľkosť písma, zvyčajne 16 px. Kvôli zlepšeniu prístupnosti pre používateľa mnohé systémy umožňujú zmeniť veľkosť písma. Tu vzniká problém, ak sú veľkosti definované v absolútnych hodnotách (px).

px (pixel)

Absolútna hodnota je pevne daná a jej veľkosť sa zobrazí presne tak, ako je definovaná. Inými slovami, veľkosť fontu v px sa nebude prispôsobovať nastaveniam používateľa, ale bude ich prepisovať.

Príklad: Používateľ v systéme nastaví veľkosť písma 24 px, pretože má problémy s čítaním menších písmen. Stiahne si aplikáciu, v ktorej je typografia definovaná v px a body text má veľkosť 16 px. Hodnoty v px sa systému neprispôsobia, takže text nebude pre používateľa čitateľný.

rem (root em)

Relatívna jednotka, ktorá je viazaná na "root" – hodnotu z prehliadača a prispôsobuje sa systému.

Príklad: Používateľ v systéme nastaví veľkosť písma 24 px, pretože má problémy s čítaním menších písmen. Stiahne si aplikáciu, kde je typografia definovaná v rem a body text má veľkosť 1 rem. Hodnoty sa prispôsobia systému kde 1 rem = 24 px a používateľ tým pádom nemá žiadny problém. Zároveň zostane zachovaná hierarchia textu.