Webová typografie: jak nastavit velikosti, řádkování a mezery

Dobře nastavená webová typografie pomáhá návštěvníkům číst bez zbytečné námahy a rychle najít to podstatné. Rozhoduje přitom souhra několika parametrů: velikosti písma, řádkování, mezer mezi odstavci, šířky textového sloupce i kontrastu.

Neexistuje jedna správná hodnota pro každý web. Berte doporučené hodnoty jako výchozí bod a upravujte je podle konkrétního webového fontu, obsahu a zařízení. Níže najdete postup i ukázky CSS, které můžete rovnou vyzkoušet.

Proč na webové typografii záleží

Webová typografie ovlivňuje, jak snadno čtenář text přečte, pochopí a najde v něm důležité informace. Dobře nastavená velikost písma, řádkování a mezery podporují čitelnost i orientaci, zatímco nevhodné proporce mohou znepříjemnit čtení na mobilu i na velkém monitoru.

Typografie vytváří také vizuální hierarchii. Nadpisy, odstavce, seznamy a popisky mají na první pohled ukazovat, jak spolu informace souvisejí. Když jsou všechny prvky stejně výrazné nebo naopak příliš odlišné, čtenář musí věnovat více pozornosti samotné orientaci.

Výsledek závisí i na webovém fontu. Dva fonty při stejné velikosti mohou působit různě: jeden má vyšší znaky, jiný širší písmena nebo odlišné mezery. Proto se nastavení nedá hodnotit jen podle čísel v CSS. Důležitý je skutečný text, kontrast vůči pozadí a rozvržení stránky.

Čitelnost je navíc jen jednou částí přístupnosti. Správné řádkování samo o sobě přístupný web nezaručí; záleží také na kontrastu, sémantické struktuře, ovládání a možnosti obsah zvětšit.

Jak zvolit velikost písma

Pro běžný text na webu začněte přibližně na 16 až 18 px a ověřte, zda se dobře čte na telefonu i počítači. Nadpisy nastavte tak, aby bylo zřejmé jejich pořadí, ne pouze proto, aby byly co největší.

V CSS je praktické používat relativní jednotku rem, která vychází z velikosti písma kořenového prvku stránky. Pokud je výchozí velikost 16 px, pak 1 rem odpovídá 16 px a 1,25 rem odpovídá 20 px. Jednotka em se odvozuje od velikosti písma rodičovského prvku, takže se může vnořením násobit. To se hodí pro lokální vztahy, ale vyžaduje pečlivější kontrolu.

Jednotku px můžete použít například pro jemně definované detaily, ale pro základní typografickou škálu bývá rem přehlednější a lépe respektuje uživatelské nastavení prohlížeče. Ani relativní jednotky ovšem automaticky nezajistí dobrou čitelnost, pokud jsou zvolené hodnoty příliš malé.

Jednoduchý základ může vypadat takto:

body { font-size: 1rem; } h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } small { font-size: 0.875rem; }

Jde o výchozí poměr, ne hotovou typografickou stupnici. Zkontrolujte, zda se nadpisy při čtení skutečného obsahu zřetelně odlišují a zda menší text zůstává pohodlný i na displeji s vysokým rozlišením.

Řádkování pro pohodlné čtení

Pro běžné odstavce začněte s hodnotou line-height mezi 1,4 a 1,7, tedy s výškou řádku přibližně 1,4 až 1,7násobku velikosti písma. Vhodná hodnota závisí na fontu, délce řádku i velikosti textu.

Řádkování nastavujte zpravidla jako bezrozměrné číslo. Pro základní text tak například platí:

body { line-height: 1.55; }

Pro nadpisy se často hodí těsnější řádkování, třeba 1,1 až 1,3, protože jsou větší a obvykle zabírají méně řádků. U dlouhého nadpisu ale ponechte dost prostoru, aby se řádky neslévaly. Naopak příliš volné řádkování může ztížit návrat očí na začátek dalšího řádku, zejména u úzkého sloupce.

Všímejte si také znaků s diakritikou a výšky konkrétního fontu. Řádek, který v jednom písmu působí vzdušně, může v jiném vypadat stísněně. Hodnotu proto posuzujte na několika odstavcích, ne jen na krátké ukázkové větě.

Mezery mezi odstavci a dalšími prvky

Mezery mezi odstavci nastavte tak, aby bylo zřejmé, kde končí jedna myšlenka a začíná další, ale text se zbytečně nerozpadal. Jako první pokus použijte spodní okraj odstavce přibližně 0,8 až 1násobku velikosti písma a dolaďte jej podle řádkování a šířky sloupce.

Vertikální rytmus funguje lépe, když mezery vycházejí z jednotné škály. Pokud například používáte základní krok 8 px, můžete v rozhraní pracovat s násobky 8, 16, 24 a 32 px. Nejde o povinnost; účelem je, aby rozestupy mezi textem a ostatními prvky působily záměrně, ne náhodně.

Odstavec pod nadpisem často potřebuje menší mezeru než prostor před novou sekcí. Seznamy zase udržujte dostatečně oddělené od okolního textu, přičemž položky seznamu mohou mít menší vzájemné rozestupy. Příklad základního nastavení:

p { margin: 0 0 1em; } h2 { margin: 1.5em 0 0.5em; } ul { margin: 0 0 1em; }

Kontrolujte výslednou vzdálenost mezi prvky, ne pouze jednotlivé hodnoty okrajů. V CSS se okraje sousedních bloků mohou za určitých podmínek slučovat, takže jejich výsledná mezera nemusí odpovídat prostému součtu.

Šířka řádku a typografická hierarchie

Čitelný text potřebuje přiměřeně dlouhý řádek a jasné vizuální pořadí informací. U delších odstavců zkuste přibližně 60 až 75 znaků na řádku; na mobilu bude řádek kratší, což je přirozené. Sledujte hlavně, zda se oči snadno přesouvají na další řádek.

Šířku textu lze omezit pomocí max-width. Jednotka ch přibližně odpovídá šířce znaku „0“ v použitém fontu, a proto se hodí pro odhad délky řádku:

.article-text { max-width: 65ch; }

Pro hierarchii využijte několik jasných úrovní: hlavní nadpis, nadpisy sekcí, běžný text a případné popisky. Rozlišení může vzniknout velikostí, řezy písma, barvou i rozestupy, ale nepoužívejte všechny prostředky současně. Příliš mnoho stylů soupeří o pozornost a zhoršuje orientaci.

Barvu textu posuzujte vždy na skutečném pozadí. Světle šedý text může v návrhu působit decentně, ale na běžném displeji se čte hůř než tmavší odstín. Samotná velikost písma slabý kontrast nevyřeší.

Responzivní typografie v praxi

Responzivní typografie přizpůsobuje velikost, řádkování a šířku textu prostoru na obrazovce, aniž by se obsah musel přibližovat nebo horizontálně posouvat. Začněte návrhem, který funguje na úzkém mobilu, a potom ověřte, zda se na větších šířkách text neroztahuje přes příliš dlouhé řádky.

Pro plynulé zvětšování nadpisu můžete použít CSS funkci clamp(). Ta nastaví minimální hodnotu, pružnou hodnotu podle šířky okna a maximální limit:

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

Funkce clamp() je užitečná, ale sama nevyřeší každý breakpoint. Dlouhý nadpis může na telefonu přetékat nebo zabrat většinu úvodní obrazovky, přestože jeho velikost roste plynule. Ověřte proto více šířek a při potřeby upravte i zalamování, mezery nebo maximální šířku bloku.

Testujte také zvětšení stránky v prohlížeči. Text by měl zůstat čitelný a obsah dostupný bez ztráty informací. Responzivní rozvržení se musí přizpůsobit nejen různým rozměrům, ale i individuálnímu nastavení uživatele.

Jak typografii otestovat a doladit

Typografii dolaďte na skutečném obsahu a v prohlížeči, ne jen v návrhovém souboru. Postupujte od základního textu přes řádkování a šířku sloupce až k mezerám a nadpisům; měňte vždy jednu skupinu parametrů, abyste poznali, co zlepšilo výsledek.

Vložte reprezentativní obsah. Použijte delší odstavce, nadpisy, seznamy, odkazy i text s českou diakritikou. Krátké zástupné věty neodhalí problematické zalomení.
Nastavte základní velikost a řádkování. Začněte například na 1 rem a line-height 1,55. Pokud text působí hustě, upravte nejprve řádkování nebo šířku sloupce.
Omezte délku řádku a vytvořte hierarchii. Nastavte maximální šířku textu, pak dolaďte rozdíly mezi nadpisy a odstavci.
Ověřte různé obrazovky a zvětšení. Prohlédněte si stránku na telefonu, tabletu i širokém monitoru a zkontrolujte ji při zvětšení v prohlížeči.
Prověřte kontrast a reálný font. Designový nástroj pomáhá s rozvržením, ale finální kontrolu proveďte v prohlížeči s načteným webovým fontem a skutečným pozadím.

V nástrojích pro webový design kontrolujte rytmus a porovnání variant. V prohlížeči otevřete vývojářské nástroje a upravujte CSS přímo: změňte font-size, line-height, okraje nebo max-width a sledujte výsledek na stránce. Návrhový nástroj ukazuje záměr; skutečný prohlížeč odhalí chování při zalomení, načítání fontu i změně velikosti.

Časté otázky

Jaké řádkování zvolit pro běžný text?

Začněte s hodnotou line-height 1,4 až 1,7. U delších odstavců často funguje přibližně 1,5 až 1,6, ale font a šířka sloupce mohou vyžadovat úpravu.

Je lepší nastavovat velikost písma v px, rem, nebo em?

Pro základní velikosti a typografickou škálu bývá přehledné rem. Jednotka em se hodí pro hodnoty navázané na rodičovský prvek, ale její velikost se může vnořením násobit. px je přesná jednotka, která se může hodit pro drobné detaily; žádná z nich však sama nezaručuje čitelnost.

Jak velké mezery ponechat mezi odstavci?

Vyzkoušejte spodní okraj přibližně 0,8 až 1em a ověřte, zda jsou odstavce jasně oddělené, ale stále tvoří souvislý text. Výsledek upravte podle šířky sloupce, řádkování a celkového rytmu stránky.

Jak přizpůsobit typografii mobilním obrazovkám?

Začněte čitelnou základní velikostí, omezte příliš dlouhé řádky a otestujte zalamování nadpisů na úzké obrazovce. Plynulé škálování pomocí clamp() může pomoci, ale vždy ověřte i zvětšení stránky a konkrétní obsah v prohlížeči.