UX/UI principy

Typografie

Většina webu je text. Než začneme řešit barvy a obrázky, naučme se text sázet tak, aby se dobře četl a aby na první pohled bylo jasné, co je nadpis a co ne. Pomůžou nám k tomu tři věci: škála velikostí, řádkování a rozumný výběr písem.

Nejdřív dva pojmy, které se často pletou. UI (user interface) je rozhraní, tedy to, co na obrazovce vidíme: písmo, barvy, tlačítka. UX (user experience) je zkušenost, tedy jak se nám s tím rozhraním pracuje. Hezké UI se špatným UX existuje a obráceně taky. V téhle lekci se budeme věnovat UI, na UX dojde v příští.

Typografická škála

Velikosti písma si nevymýšlíme pro každý nadpis zvlášť. Zvolíme základní velikost a poměr a další stupně z nich spočítáme násobením:

:root {
  /* základ 16 px, poměr 1,25 */
  --text-s: 0.8rem;    /* 12,8 px */
  --text-m: 1rem;      /* 16 px */
  --text-l: 1.25rem;   /* 20 px */
  --text-xl: 1.563rem; /* 25 px */
  --text-2xl: 1.953rem; /* 31,25 px */
  --text-3xl: 2.441rem; /* 39 px */
}

Každý stupeň je o čtvrtinu větší než předchozí. Takové škále se říká modulární (modular scale) a poměr 1,25 se jmenuje velká tercie, protože si názvy půjčuje z hudby. Menší poměr (1,2) dává klidnější stránku, větší (1,333 nebo 1,5) dramatičtější nadpisy.

Škála má dvě výhody. Velikosti k sobě ladí, protože vznikly ze stejného poměru. A je jich málo, takže se nestane, že na stránce máme písmo 15, 16, 17 a 18 pixelů a nikdo neví proč.

Skutečnou škálu najdeme třeba v Design systému gov.cz, podle kterého se staví weby české státní správy. Má základ 16 px a nadpisy 18, 20, 24, 32 a 40 px. Není přesně modulární, ale stupňů je pár a jsou pevně dané.

Proč v rem

Jako rychlé opáčko z lekce o relativních jednotkách: rem je násobek velikosti písma kořenového prvku html. Ta je ve výchozím stavu 16 px, takže 1rem je 16 px a 1.25rem je 20 px.

/* chyba, nastavení prohlížeče se neprojeví */
h2 { font-size: 20px; }

/* správně, s nastavením prohlížeče se zvětší */
h2 { font-size: 1.25rem; }

Výchozí velikost písma si dá každý nastavit v prohlížeči, a lidé se slabším zrakem to opravdu dělají. Písmo v rem se s tím nastavením zvětší, písmo v px zůstane drobné. Proto velikosti písma píšeme v rem a pixely v komentářích u škály slouží jen pro představu.

Škála na mobilu

Nadpis o velikosti 39 px vypadá na monitoru akorát, ale na telefonu se do řádku vejdou dvě slova. Největší stupně škály proto necháme růst s šířkou okna. Fluidní typografii přes clamp() už znáte, tady ji jen zapojíme do škály:

:root {
  /* nejméně 25 px, nejvíc 39 px, mezi tím podle šířky okna */
  --text-3xl: clamp(1.563rem, 1rem + 2.5vw, 2.441rem);
}

Nadpis se drží mezi 25 a 39 px a mezi tím roste s šířkou okna. Díky 1rem v prostřední hodnotě nezapomene ani na velikost písma nastavenou v prohlížeči. Zmenšovat se vyplatí jen velké stupně, běžný text zůstává na 1rem všude.

Řádkování

Řádkování (line-height) je výška řádku vzhledem k velikosti písma. Pro odstavce se hodí zhruba 1,5, pro nadpisy méně:

body {
  line-height: 1.5;
}

h1,
h2,
h3 {
  /* velké písmo potřebuje menší řádkování, jinak se nadpis rozpadne */
  line-height: 1.2;
}

Hodnotu píšeme bez jednotky. Číslo 1.5 se pak přepočítá pro každý prvek podle jeho vlastní velikosti písma, kdežto 24px by zdědil i nadpis o velikosti 40 px a řádky by se mu překrývaly.

S řádkováním souvisí délka řádku. Oko se na konci dlouhého řádku těžko trefuje na začátek dalšího, proto se odstavce omezují na 45 až 75 znaků. V CSS na to máme jednotku ch, což je šířka znaku nula:

p {
  max-width: 65ch;
}

Párování písem

Na jednu stránku stačí jedna rodina písma, nanejvýš dvě. Jedna rodina s několika řezy (regular, medium, bold) zvládne nadpisy i text a nic nepokazí.

Když chceme dvě, mají se od sebe zřetelně lišit. Klasická dvojice je patkové písmo (serif) na nadpisy a bezpatkové (sans-serif) na text, nebo obráceně. Dvě podobná bezpatková písma vedle sebe působí jako chyba, ne jako záměr.

:root {
  --font-heading: "Merriweather", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

Za názvem písma vždy stojí náhradní písma pro případ, že se webové písmo nenačte. Pozor taky na češtinu: písmo musí mít háčky a čárky, jinak se ř a ů vysází jiným písmem a v textu svítí jako záplata. Na Google Fonts se dá vyhledávání omezit na písma s podporou jazyka.