Mezery mezi písmeny a slovy

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Font

Font

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

Font-feature-settings

Font-feature-settings

S CSS vlastností font-feature-settings lze dosáhnout zajímavější typografie u OpenType písem.

Word-spacing

Word-spacing

CSS vlastnost word-spacing upravuje velikost mezer mezi slovy.

Letter-spacing

Letter-spacing

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

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

Komentáře