Moderní tvorba webových aplikací

O webu

Odsazení písmen a slov

Nastavení odsazení jednotlivých písmen (letter-spacing) a mezer mezi slovy (word-spacing).

2 minuty

Mezera mezi písmeny

element {
  letter-spacing: 1em;
}

K úpravě mezer mezi písmeny slouží CSS vlastnost letter-spacing. Jako hodnota se zadává libovolná délková jednotka (kromě procent):

Text s velkými mezerami

Odsazování jednotlivých slov

element {
  word-spacing: 2em;
}

Vlasnost word-spacing funguje obdobně, jen vytváří mezery mezi celými slovy.

Text s velkými mezerami

Využití

Praktické využití word-spacingu nemusí být na první pohled zřejmé. Ale něco se přece jen najde:

  1. V případě použití velkého letter-spacingu (odsazením písmen slova) může zvětšení mezer mezi slovy pomoci lépe poznat hranice slov.

  2. Záporný word-spacing umí mezery mezi slovy úplně zrušit nebo zmenšit (do určité hranice – tj. nemohou se slova překrývat):

    Text bez mezer

  3. V případě řádkových elementů dokáže word-spacing zastoupit odsazování vlastnostmi margin/padding.

Podpora v prohlížečích

Obě vlastnosti jsou široce podporovány napříč všemi běžně používanými prohlížeči.

Roztažení textu

V některých grafických editorech si je možno povšimnout funkce, která roztáhne písmo na přesně stanovenou šířku.

Roztažení textu na šířku

Stejného efektu lze dosáhnout vhodným nastavením letter a word-spacingu s špetkou JavaScriptu.

Nástroj Font-to-Width

Související články

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

Word-spacing

CSS vlastnost word-spacing upravuje velikost mezer mezi slovy.

5 minut

Letter-spacing

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

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025