Kerning

Co je kerning?

Kerning je úprava mezer mezi jednotlivými páry písmen s cílem dosáhnout opticky vyváženého a harmonického vzhledu textu. Na rozdíl od obecného prostrkání, které mění mezery mezi všemi písmeny stejně, kerning pracuje s každým párem písmen individuálně. Některá písmena totiž vyžadují menší nebo větší mezery než jiná, aby text působil vyrovnaně. Například kombinace „AV" potřebuje menší mezeru než „HI", protože tvar písmen A a V vytváří mezi sebou opticky větší prostor. Kerning je tedy jemné vylaďování mezer mezi písmeny pro dosažení co nejlepší čitelnosti a estetiky. Pro webdesignéry a majitele webů je důležité rozumět kerningu, protože špatně nastavené mezery mezi písmeny mohou negativně ovlivnit profesionalitu webu a pohodu čtení návštěvníků.

V profesionální typografii je kerning klíčovou disciplínou, která odděluje kvalitní design od průměru. Většina moderních fontů obsahuje přednastavené kerningové páry (tzv. kerning tables), které automaticky upravují mezery mezi problematickými kombinacemi písmen. To znamená, že když napíšete text v kvalitním fontu, kerning probíhá automaticky na pozadí. V CSS můžete kerning ovlivnit pomocí vlastnosti letter-spacing, která přidává nebo odebírá mezery mezi všemi písmeny stejnoměrně – toto však není pravý kerning, ale spíše tracking (o rozdílu mezi těmito pojmy si povíme níže). Pro jemné doladění konkrétních párů písmen na webu existují pokročilé CSS techniky, ale ve většině případů postačí spoléhat na kvalitní font s dobrými kerningovými tabulkami.

Proč je kerning důležitý pro design webu?

Kerning má zásadní vliv na čitelnost a profesionalitu webu. Dobře nastavený kerning zajišťuje, že text působí harmonicky a čte se plynule, zatímco špatný kerning vytváří nepříjemné „díry" v textu nebo naopak stísněný dojem. Návštěvníci webu tyto detaily možná nevnímají vědomě, ale podvědomě je registrují a ovlivňují jejich celkovou důvěru v brand. Web s přehnaně velkými nebo malými mezerami mezi písmeny působí neprofesionálně, jakoby byl vytvořen amatérsky. Naopak pečlivě nastavený kerning signalizuje péči o detail a kvalitu. Pro majitele webů je důležité vědět, že kerning není jen estetickou záležitostí – ovlivňuje uživatelskou zkušenost a může mít dopad na konverze.

Obzvlášť důležitý je kerning u nadpisů, log a velkých textů. Čím větší písmo, tím viditelnější jsou nedostatky v mezerách mezi písmeny. Proto designéři často ručně upravují kerning u hlavních nadpisů H1, firemních názvů nebo sloganů, kde každý detail má velkou vizuální váhu. Na webech využívajících responzivní design se velikosti fontů mění podle zařízení, a proto je nutné testovat kerning na různých velikostech obrazovek – co vypadá dobře na desktopu, může působit stísněně na mobilu. Moderní webové fonty jsou optimalizované pro různá rozlišení, ale u custom fontů nebo designérských řešení je vhodné kerning zkontrolovat napříč zařízeními.

Rozdíl mezi kerningem a trackingem

Tyto dva pojmy se často zaměňují, ale každý má odlišný význam a použití. Kerning upravuje mezery mezi konkrétními páry písmen individuálně – například mezi „A" a „V" může být menší mezera než mezi „H" a „I", protože tvar písmen to vyžaduje. Kerning pracuje s detailem a snaží se dosáhnout optického vyrovnání tak, aby všechny mezery působily vizuálně stejně, i když technicky mají různou šířku. Tracking (neboli letter-spacing v CSS) naproti tomu upravuje mezery mezi všemi písmeny stejnoměrně – přidává nebo odebírá stejnou hodnotu mezery mezi každým písmenem v textu. Tracking se používá, když chcete celý odstavec nebo nadpis udělat vzdušnější nebo kompaktnější, zatímco kerning řeší konkrétní problémové páry.

V praxi na webu nejčastěji pracujete s trackingem prostřednictvím CSS vlastnosti letter-spacing. Například letter-spacing: 0.05em; rozšíří mezery mezi všemi písmeny o 5% velikosti fontu, což může být užitečné u nadpisů psaných verzálkami (velkými písmeny), které jinak působí příliš stísněně. Kerning probíhá automaticky na základě kerningových tabulek obsažených ve fontu – moderní prohlížeče tyto tabulky respektují a aplikují kerning automaticky. Pro pokročilé úpravy můžete v CSS použít vlastnost font-feature-settings pro zapnutí nebo vypnutí automatického kerningu, ale to je spíše pro edge cases. Ve většině případů spoléháte na to, že kvalitní webový font má správně nastavené kerningové páry a vy pouze upravujete tracking pomocí letter-spacing pro dosažení požadovaného vizuálního efektu.

Jak se kerning používá na webu?

Na webu máte několik možností, jak pracovat s kerningem a mezerami mezi písmeny. První a nejdůležitější krok je výběr kvalitního fontu, který obsahuje dobře navržené kerningové tabulky. Fonty z knihovny Google Fonts nebo profesionální placené fonty obvykle mají kerning pečlivě vyladěný a funguje automaticky. Když použijete takový font na webu, prohlížeč automaticky aplikuje optimální mezery mezi páry písmen podle kerningových tabulek, které jsou v fontu zabudované. Nemusíte tedy nic speciálně nastavovat – kerning funguje „out of the box". Výjimkou jsou některé velmi levné nebo amatérské fonty, které kerningové tabulky nemají nebo jsou špatně navržené – v takovém případě budete muset mezery upravovat ručně pomocí CSS.

Pokud chcete globálně upravit mezery mezi písmeny (tracking, ne kerning), použijete CSS vlastnost letter-spacing. Například pro nadpisy psané velkými písmeny můžete nastavit: h1 { letter-spacing: 0.05em; }, což lehce rozšíří mezery mezi písmeny a zlepší čitelnost. Pro kompaktnější design můžete použít zápornou hodnotu: letter-spacing: -0.02em;, ale buďte opatrní – příliš malé mezery dělají text nečitelným. V CSS existuje také pokročilá vlastnost font-kerning, která umožňuje zapnout nebo vypnout automatický kerning fontu (hodnoty: auto, normal, none). Ve většině případů stačí výchozí nastavení auto, které nechá prohlížeč rozhodnout podle fontu. Pro velmi specifické úpravy jednotlivých párů písmen můžete použít font-feature-settings, ale to je už pokročilá technika vhodná spíše pro designéry než běžné majitele webů.

Při návrhu webu s důrazem na typografii testujte kerning a mezery na různých zařízeních a velikostech písma. Co funguje na desktopu v 48px nadpisu, může působit úplně jinak na mobilu v 28px. Responzivní design často vyžaduje upravit letter-spacing pro různé breakpointy pomocí media queries. Například: @media (max-width: 768px) { h1 { letter-spacing: 0.02em; } } může zlepšit čitelnost nadpisů na mobilech. Pamatujte, že kerning je jen jedna z mnoha součástí layoutu a typografie, která společně vytvářejí celkový dojem webu.

Časté chyby v kerningu

• Příliš velké mezery mezi písmeny

Přehnané hodnoty letter-spacing dělají text roztahaný a těžko čitelný. Písmena ztrácejí vizuální souvislost a čtení vyžaduje větší úsilí. Tato chyba se často objevuje u nadpisů, kde se designér snaží o „moderní" vzhled, ale výsledek působí spíše nekvalitně. Doporučuji držet se hodnot do 0.1em pro běžný text a maximálně 0.15em pro velké nadpisy.

• Záporný letter-spacing u běžného textu

Zmenšování mezer mezi písmeny (například letter-spacing: -0.03em;) u běžných odstavců je velkým problémem pro čitelnost. Písmena začínají splývat a text působí stísněně, což únavuje oči čtenářů. Záporný letter-spacing je přijatelný pouze u velkých display nadpisů se specifickými fonty, kde designér vědomě vytváří kompaktní vzhled.

• Ignorování verzálek (velkých písmen)

Text psaný velkými písmeny (ALL CAPS) téměř vždy vyžaduje zvětšené mezery mezi písmeny kvůli optickému vnímání. Bez úpravy letter-spacing působí verzálky stísněně a jsou hůře čitelné. Doporučuji pro verzálky nastavit letter-spacing: 0.05-0.1em;, což výrazně zlepší čitelnost a profesionalitu.

• Použití fontu s chybějícími kerningovými tabulkami

Některé levné nebo amatérské fonty neobsahují kerningové páry, což vede k nerovnoměrným mezerám mezi písmeny – zejména problematické jsou kombinace jako „AV", „WA", „To" nebo „Ty". Výsledkem jsou viditelné optické „díry" v textu. Pokud používáte custom font, vždy zkontrolujte jeho kvalitu a kerning. Alternativně zvolte prověřené fonty z Google Fonts nebo Adobe Fonts, které mají kerning profesionálně nastavený.

• Nerespektování kontextu a účelu textu

Kerning a tracking by měly odpovídat účelu textu. Pro dlouhý blogový článek je prioritou maximální čitelnost, tedy standardní mezery bez úprav. Pro logo nebo hlavní nadpis můžete experimentovat s letter-spacing pro dosažení specifického vizuálního efektu. Chybou je aplikovat stejný letter-spacing na všechny typy obsahu – každý element má jiné požadavky na mezery mezi písmeny.

Tipy pro správný kerning

• Vyberte font s kvalitními kerningovými tabulkami

Základ správného kerningu je dobrý font. Profesionální fonty z Google Fonts (například Open Sans, Roboto, Lato, Montserrat) nebo placené fonty z Adobe Fonts mají kerning pečlivě vyladěný a většinu práce udělají za vás. Otestujte si font před implementací – napište různé kombinace písmen (AV, WA, To, Ty) a zkontrolujte, zda mezery působí opticky vyrovnaně.

• Používejte letter-spacing s mírou

Méně je často více. Pro většinu běžných textů není potřeba letter-spacing vůbec upravovat – výchozí nastavení fontu je optimální. Používejte letter-spacing pouze u nadpisů, verzálek nebo speciálních designérských prvků, kde to má konkrétní účel. Hodnoty držte v rozmezí -0.05em až 0.15em podle velikosti písma a účelu.

• Testujte na různých zařízeních a velikostech

Kerning a mezery mezi písmeny vypadají jinak na různých velikostech písma a rozlišeních obrazovek. Co funguje pro 48px nadpis na desktopu, může vypadat úplně jinak při 24px na mobilu. Vždy testujte váš web na skutečných zařízeních nebo pomocí developer tools v prohlížeči. Pro responzivní weby zvažte různé hodnoty letter-spacing pro různé breakpointy.

• Věnujte extra pozornost nadpisům a logům

Velké texty jako hlavní nadpisy H1 nebo logo vyžadují větší péči o kerning, protože nedostatky jsou mnohem viditelnější. U nadpisů nad 32px zvažte jemné upravení letter-spacing podle konkrétního fontu a designu. Logo firmy by mělo mít kerning ručně vyladěný pro dokonalou optickou vyváženost – i drobný detail může ovlivnit profesionalitu brandingu.

• Zvažte přístupnost webu

Kerning a mezery mezi písmeny ovlivňují přístupnost webu pro osoby s dyslexií nebo zrakovým postižením. Příliš malé mezery mohou ztížit čtení těmto uživatelům. Doporučuje se držet výchozích hodnot nebo lehce zvětšit letter-spacing (například 0.03em) pro zlepšení čitelnosti. Nikdy nezmenšujte mezery pod výchozí hodnotu u běžného textu.

• Kombinujte kerning s dalšími typografickými vlastnostmi

Kerning a letter-spacing jsou součástí širší typografické strategie, která zahrnuje také line-height (výška řádku), font-size, font-weight a word-spacing. Všechny tyto vlastnosti musí fungovat společně pro dosažení harmonického vzhledu. Například větší letter-spacing často vyžaduje i větší line-height pro zachování vizuální rovnováhy. Více o komplexním přístupu najdete v článku o typografii.

Související pojmy