Moderní tvorba webových aplikací
O webu

Letter-spacing

CSS vlastnost letter-spacing upravuje vzdálenost mezi písmeny.

3 minuty

Písmena mají velké mezery.

Zápis

element {
  letter-spacing: 1em;
}

Výchozí hodnota je 0/normal. Vyšší hodnotou se rozestupy mezi písmeny zvětší. Záporné hodnoty naopak písmena více přiblíží k sobě:

Písmena jsou nalepená na sebe.

Při nastavení moc velké záporné hodnoty se dějí divné věci:

−20 px10 px

Velikost mezer mezi písmeny

element {
  letter-spacing: 0px;
}

Podpora v prohlížečích

Široce podporovaná vlastnost ve všech běžně používaných prohlížečích. Chování při velké záporné hodnotě se může lišit.

Využití

Zvětšení mezer mezi písmeny jde použít pro zvýraznění/odlišení textu. V dávné minulosti se to občas používalo na psacím stroji prokládáním textu běžnou mezerou.

Zvýraznění v textu

Většinou si sice jde vystačit se zvýrazněním tučným nebo šikmým, ale právě využití proložení písmen může být další možnost.

V takovém případě je vhodné proložení písmen doplnit i odsazením zleva a zprava pomocí paddingu, aby byly zřetelné hranice slov.

Ozvláštnění nadpisů

Změnou mezer mezi písmeny jde vytvořit visuálně zajímavější nadpis i s běžným fontem.

Nadpis s menšími mezerami

Záložní písmo

Při používání webových fontů trvá nějakou dobu jejich načtení. Do té doby, než se načtou, lze jejich vzhled prostorově připodobnit změnou odstupů.

Ruční proložení mezerami

Odstupy mezi písmenky jde realisovat i klasickou mezerou:

P r o l o ž e n í   t e x t u m e z e r a m i

Není to ale dobré řešení, protože automatické programy (hlasové čtečky, vyhledávání) nemusí poznat hranice slov.

Dále je to pracné a nakonec by bylo i komplikovanější zajistit mezery mezi slovy – více mezer se v HTML spojí v jednu, takže by se musela požívat pevná mezera (entita  ) a podobně.

Odkazy

Co si myslíte o tomto článku?

Diskuse

Související články

Šířka znaků ve fontech

Proč mají znaky různou šířku a jak to řešit v responsivním designu.

17 minut

CSS @font-face

Pomocí CSS pravidla @font-face jde na stránce používat různá webová písma.

15 minut

Systémová písma

Jak a proč používat lokální písma dostupné v operačních systémech.

4 minuty

Font

CSS vlastnost font slouží k nastavení písma na stránce.

13 minut

Novinky e-mailem

Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

Přidej se k 500+ čtenářům
Jen kvalitní obsah
Žádný spam

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků · Témata · Zkratky
2013–2026