Písmo a typografie

Doba čtení: cca 3 min

Typografie je umění sázet text tak, aby byl čitelný, srozumitelný a příjemný. Na webu ji řídí CSS. Správně nastavené písmo je základ každé stránky – a přitom se jím mnoho vývojářů příliš nezabývá. Tato lekce ti ukáže nejdůležitější CSS vlastnosti pro práci s textem.

Rodina písma – font-family

Vlastnost font-family určuje, jakým písmem se text zobrazí. Zadává se seznam fontů oddělených čárkami – prohlížeč zkusí první, pokud ho nemá, zkusí druhý atd. Na konci se obvykle uvádí generická rodina jako záloha:

body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}

Generické rodiny jsou: serif (s patkami), sans-serif (bez patek), monospace (stejná šířka znaků – pro kód), cursive a fantasy.

Pro použití webového fontu (například z Google Fonts) ho nejdříve načteš v sekci <head>:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

A pak použiješ v CSS:

body {
  font-family: 'Inter', sans-serif;
}

Velikost písma – font-size

Vlastnost font-size určuje velikost textu. Lze ji zapsat v různých jednotkách:

  • px – pixely, absolutní velikost. 16px je výchozí velikost textu ve většině prohlížečů.
  • rem – relativní vůči kořenové velikosti dokumentu (html). Doporučená jednotka pro texty, protože respektuje uživatelská nastavení prohlížeče.
  • em – relativní vůči velikosti písma nadřazeného prvku. Hodí se pro komponenty, které mají škálovat spolu s kontextem.
  • % – procento z velikosti nadřazeného prvku.
body {
  font-size: 1rem;     /* výchozí velikost */
}

h1 {
  font-size: 2.25rem;  /* 36px při základu 16px */
}

small {
  font-size: 0.875rem; /* 14px */
}

Další typografické vlastnosti

font-weight – tučnost

Hodnoty: normal (400), bold (700), nebo číselné hodnoty 100–900 (pokud je font podporuje):

strong {
  font-weight: 700;
}

font-style – kurzíva

em {
  font-style: italic;
}

line-height – výška řádku

Výška řádku zásadně ovlivňuje čitelnost. Pro delší texty se doporučuje hodnota mezi 1,5 a 1,8:

p {
  line-height: 1.7;
}

letter-spacing – mezery mezi písmeny

h1 {
  letter-spacing: 0.05em;
}

text-align – zarovnání textu

Hodnoty: left, right, center, justify. Zarovnání do bloku (justify) nevypadá špatně vizuálně, ale pro čtenáře s dyslexií je obtížněji čitelné.

text-decoration – podtržení a podobně

a {
  text-decoration: none;       /* odstraní podtržení */
}

a:hover {
  text-decoration: underline;  /* přidá při najetí */
}

text-transform – velikost písmen

.uppercase-label {
  text-transform: uppercase;
}

Typografie a přístupnost

Dobrá typografie je zároveň přístupná typografie. Několik pravidel:

  • Nepoužívej pro tělo textu velikost menší než 16px (1rem).
  • Nepoužívej px pro základní velikost textu – respektuj uživatelská nastavení prohlížeče pomocí rem.
  • Nastavuj line-height alespoň 1,5 pro delší texty.
  • Vyhni se textu, jehož délka řádku přesáhne přibližně 75 znaků (max-width: 70ch).
  • Nepoužívej justify pro delší texty – nepravidelné mezery mezi slovy ztěžují čtení.

Tip od Zdeňka

Zdeněk radí: Vždy používej rem místo px pro velikosti textu. Já jako nevidomý uživatel sice texty nečtu očima, ale znám spoustu slabozrakých, kteří si v nastavení prohlížeče zvětší základní písmo. Pokud použiješ pixely, jejich nastavení ignoruješ. S rem se vše automaticky přizpůsobí – a tvůj web bude přístupnější bez jakékoli extra práce.