Typografie

General Sans nese veškeré UI — headliny, body i štítky (eyebrow). Barlow Condensed je v manuálu jako sekundární font, ale držíme ho rezervovaný pro etikety / obaly, ne pro web chrome.

Písma

General + Barlow

Řezy (oba)

Extralight → Bold

Stupňů scale

Display → caption

.num

Tabular číslice

ceny, data

Písma

Primární General Sans nese vše na webu (vč. eyebrow/štítků). Barlow Condensed = sekundární, rezervovaný pro etikety a obaly.

General Sans

font-sans · font-display · .eyebrow

Primární — headliny, body, UI, eyebrow / štítky

Příliš žluťoučký kůň úpěl ďábelské ódy.

Tělo, které tě posloucháExtralight · 200

Tělo, které tě posloucháLight · 300

Tělo, které tě posloucháRegular · 400

Tělo, které tě posloucháSemiBold · 600

Tělo, které tě posloucháBold · 700

Barlow Condensed

.font-condensed

Sekundární — jen etikety / obaly (ne web UI)

Příliš žluťoučký kůň úpěl ďábelské ódy.

Tělo, které tě posloucháExtralight · 200

Tělo, které tě posloucháLight · 300

Tělo, které tě posloucháRegular · 400

Tělo, které tě posloucháSemiBold · 600

Tělo, které tě posloucháBold · 700

Type scale

Osm stupňů od Display po caption. General Sans, tracking-tight na velkých nadpisech.

Display

60px / 700 / tight

Tělo, které tě poslouchá

Hero momenty

36px / 700

Tělo, které tě poslouchá

Titul stránky

24px / 600

Tělo, které tě poslouchá

Sekce

20px / 600

Tělo, které tě poslouchá

Podsekce, karty

Body L

18px / 400

Tělo, které tě poslouchá

Perex, úvody

Body

16px / 400

Tělo, které tě poslouchá

Základní text

Small

14px / 400

Tělo, které tě poslouchá

Popisky, meta

Caption

12px / 400 / fg-3

Tělo, které tě poslouchá

Captions

Kompozice

Hotové typo vzory — jak skládat text dohromady (eyebrow + nadpis, nadpis + perex, statistika, štítky). Vzor pro konzistentní psaní headlinů a bloků.

Eyebrow + display

Doplňky stravy · CZ

Síla z přírody

<p class="eyebrow">…</p> <h1 class="text-5xl font-bold tracking-tight">

Nadpis + perex

Adaptogeny pro klid i výkon

Čisté složení, klinicky podložené dávky. Nic navíc.

<h2 class="text-3xl font-semibold"> + <p class="text-lg text-fg-2">

Statistika · .num + eyebrow

25 gprotein / dávka

<span class="num text-4xl font-bold"> + <span class="eyebrow">

Kategorie štítky · .eyebrow

AdaptogenOrganicVitaminsOrgansBeauty

<span class="eyebrow">Adaptogen</span>

Type tester

Naživo — text, font, řez, velikost.

TextFontŘezVelikost · 48px

Tělo, které tě poslouchá.

Text × podklad

Čitelnost na klíčových plochách.

AjemFIT

Tělo, které tě poslouchá.

page

AjemFIT

Tělo, které tě poslouchá.

surface-sage

AjemFIT

Tělo, které tě poslouchá.

surface-blush

AjemFIT

Tělo, které tě poslouchá.

surface-dark

Číslice / .num

Tabular figures na ceny, data, telefon, množství — sloupce zarovnané, čísla neposkakují.

S .num (tabular)

499 Kč · 1 199 Kč · 89 Kč

01. 06. 2026 · 14:09

25 g / dávka · 90 caps

Bez .num (proporční)

499 Kč · 1 199 Kč · 89 Kč

01. 06. 2026 · 14:09

25 g / dávka · 90 caps

CSS reference

Token / třída	Hodnota	Použití
font-sans	General Sans	Výchozí — body, headliny, UI
font-display	General Sans	Display momenty (heavy řezy)
.eyebrow	General Sans 600 uppercase 0.07em	Štítky / eyebrow (web UI)
.font-condensed	Barlow Condensed	Jen etikety / obaly (rezervováno)
.num	tabular-nums	Ceny, data, množství

Nadpisy tracking-tight; body necháváme normal. Eyebrow / štítky jedou .eyebrow (General Sans uppercase) — UI chrome nepoužívá Barlow Condensed (ten je jen pro etikety/obaly). Číslice v cenách/datech vždy .num.