Velikost písma patří mezi nejdůležitější prvky webového designu, které přímo ovlivňují čitelnost a uživatelský komfort vašich stránek. Správné nastavení font-size v CSS není jen otázkou estetiky, ale především funkčnosti a přístupnosti webu pro všechny návštěvníky.
Proč je správná velikost písma tak zásadní
Výzkumy ukazují, že až sedmdesát procent návštěvníků opustí web, pokud je text špatně čitelný. Velikost písma ovlivňuje nejen čitelnost, ale také SEO optimalizaci, dobu strávenou na webu a konverzní poměr. Google ve svých Page Experience guidelines přímo zmiňuje důležitost dobře čitelného obsahu pro mobilní zařízení.
Základní jednotky pro nastavení velikosti písma
CSS nabízí několik jednotek pro definování velikosti textu. Každá má své specifické využití a výhody:
Pixely (px)
Pixely představují absolutní jednotku, která zajišťuje přesnou kontrolu nad velikostí písma. Nastavení font-size: 16px znamená, že text bude mít vždy stejnou velikost bez ohledu na ostatní nastavení.
Výhody: Přesná kontrola, předvídatelnost, snadné použití pro začátečníky.
Nevýhody: Problémy s přístupností, text se nezvětší při změně nastavení prohlížeče uživatelem.
Em jednotky
Jednotka em je relativní k velikosti písma rodičovského elementu. Pokud má rodič nastavenou velikost šestnáct pixelů a vy nastavíte font-size: 1.5em, výsledná velikost bude dvacet čtyři pixelů.
Výhody: Flexibilita, škálovatelnost, dobrá pro vnořené elementy.
Nevýhody: Složitější výpočty při hlubokém vnoření, možnost kaskádových problémů.
Rem jednotky
Rem (root em) je relativní jednotka vztažená k root elementu HTML, typicky k tagu html. Toto je dnes nejdoporučovanější metoda pro nastavení velikosti písma.
Výhody: Konzistentní chování, snadná údržba, přístupnost, responzivní design.
Nevýhody: Minimální, vyžaduje pochopení základního konceptu.
Procenta (%)
Procentuální hodnoty fungují podobně jako em jednotky, jsou relativní k rodičovskému elementu. Nastavení font-size: 150% odpovídá hodnotě 1.5em.
Viewport jednotky (vw, vh)
Jednotky vw (viewport width) a vh (viewport height) nastavují velikost relativně k rozměrům okna prohlížeče. Jeden vw odpovídá jednomu procentu šířky viewportu.
Praktické příklady nastavení velikosti písma
Základní nastavení pro celý web
Doporučený základ pro responzivní web začíná nastavením root velikosti:
html { font-size: 16px; }
Toto vytvoří základ, od kterého budete odvíjet všechny ostatní velikosti pomocí rem jednotek. Pro tělo dokumentu pak můžete nastavit:
body { font-size: 1rem; line-height: 1.6; }
Typografická hierarchie
Správná hierarchie nadpisů zajišťuje přehlednost obsahu. Zde je osvědčený systém:
- h1 { font-size: 2.5rem; } – hlavní nadpis stránky
- h2 { font-size: 2rem; } – hlavní sekce
- h3 { font-size: 1.75rem; } – podsekce
- h4 { font-size: 1.5rem; } – menší členění
- h5 { font-size: 1.25rem; } – detailní členění
- h6 { font-size: 1rem; } – nejmenší nadpis
Responzivní velikost písma
Pro optimální čitelnost na různých zařízeních využijte media queries:
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }
@media (min-width: 1200px) { html { font-size: 18px; } }
Tento přístup automaticky upraví velikost všech textů na webu podle šířky obrazovky.
Pokročilé techniky pro nastavení velikosti písma
Fluid typography pomocí calc()
Moderní přístup využívá funkci calc() pro plynulé škálování textu mezi breakpointy:
font-size: calc(16px + (24 – 16) * ((100vw – 320px) / (1200 – 320)));
Tento vzorec zajistí, že velikost písma plynule roste od šestnácti pixelů na mobilech po dvacet čtyři pixelů na desktopu.
Funkce clamp()
Nejmodernější metoda využívá CSS funkci clamp(), která definuje minimální, preferovanou a maximální hodnotu:
font-size: clamp(1rem, 2.5vw, 2rem);
Text nebude nikdy menší než jeden rem, ideálně bude 2.5vw, ale nepřekročí dva rem.
CSS proměnné pro konzistentní typografii
Využití CSS custom properties usnadňuje údržbu a konzistenci:
:root {
–font-size-small: 0.875rem;
–font-size-base: 1rem;
–font-size-large: 1.25rem;
–font-size-xlarge: 1.5rem;
}
Tyto proměnné pak použijete kdekoli v CSS: font-size: var(–font-size-large);
Běžné chyby při nastavování velikosti písma
Příliš malý text
Minimální doporučená velikost pro běžný text je šestnáct pixelů. Menší velikosti výrazně snižují čitelnost, zejména na mobilních zařízeních. Google dokonce penalizuje stránky s příliš malým textem v mobilním indexování.
Nedostatečný kontrast velikostí
Pokud je rozdíl mezi nadpisem a běžným textem příliš malý, hierarchie obsahu se ztrácí. Doporučený poměr je minimálně 1.5 mezi jednotlivými úrovněmi nadpisů.
Ignorování line-height
Velikost písma musí být vždy doplněna správným řádkováním. Optimální line-height pro běžný text je 1.5 až 1.6, pro nadpisy 1.2 až 1.3.
Pevné jednotky v responzivním designu
Používání pouze pixelů bez media queries způsobuje problémy na různých zařízeních. Moderní web vyžaduje flexibilní přístup.
Optimalizace pro přístupnost
Přístupný web musí respektovat uživatelská nastavení prohlížeče. Uživatelé s horším zrakem často zvětšují základní velikost písma v prohlížeči. Použití rem jednotek zajistí, že váš web toto nastavení respektuje.
Doporučené minimum pro hlavní obsah je šestnáct pixelů, ideálně osmnáct pixelů. Pro poznámky a vedlejší text ne méně než čtrnáct pixelů.
Testování a ladění velikosti písma
Před nasazením webu otestujte velikost písma na různých zařízeních a rozlišeních. Využijte vývojářské nástroje prohlížeče pro simulaci mobilních zařízení.
Praktický test: Zobrazte web na mobilním telefonu ve vzdálenosti čtyřicet centimetrů. Pokud musíte přimhouřit oči nebo telefon přibližovat, text je příliš malý.
Nástroje pro výpočet a testování
Pro usnadnění práce s velikostmi písma existují online kalkulačky, které převádějí mezi jednotkami. Vývojářské nástroje prohlížeče umožňují živé testování různých hodnot přímo v kódu stránky.
Browser DevTools zobrazují computed hodnoty, což pomáhá odhalit skutečnou velikost písma po aplikaci všech CSS pravidel včetně dědičnosti.
Shrnutí doporučených postupů
Pro moderní webové stránky doporučujeme následující přístup:
- Nastavte základní velikost na root elementu (html) pomocí pixelů
- Všechny ostatní velikosti definujte pomocí rem jednotek
- Implementujte responzivní škálování pomocí media queries nebo clamp()
- Udržujte jasnou typografickou hierarchii s dostatečnými rozdíly
- Testujte na reálných zařízeních a respektujte přístupnost
- Používejte CSS proměnné pro snadnou údržbu
- Nikdy nenastavujte text menší než čtrnáct pixelů
Správné nastavení velikosti písma v CSS není jednorázová záležitost, ale kontinuální proces optimalizace. S rostoucí diverzitou zařízení a rozlišení je flexibilní a přístupný přístup klíčem k úspěšnému webu, který si uživatelé oblíbí a na který se budou rádi vracet.
Pamatujte, že typografie tvoří devadesát pět procent webového designu. Investice času do správného nastavení velikosti písma se vám mnohonásobně vrátí v podobě lepší uživatelské zkušenosti, delší doby strávené na webu a vyšší konverze.