Odstępy pomiędzy literami w słowie CSS letter-spacing

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS, Tekst Tagi: , , , , , , on przez .



Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy więc uzyskać rozszerzony (z dużymi odstępami, przerwami pomiędzy literami) lub zwężony (z nachodzącymi na siebie nawzajem literami) tekst.

letter-spacing – nie może przyjmować wartości procentowych (%) może być jednak określana w px, rem, em.

Domyślnym ustawieniem letter-spacing jest normal.

przykładowe odstępy między literami:
Normalny tekst

Lorem ipsum

Rozszerzony tekst – letter-spacing: 3px;

Lorem ipsum

Zwężony tekst – letter-spacing: -4px;

Lorem ipsum

Jak widać po przykładzie wartości ujemne powodują że tekst zaczyna się zwężać (kurczyć) a dodatnie rozsuwają go.

letter-spacing przyjmuje także wartości takie jak:

Gdzie „normal” to standardowe zwykłe ustawienie, a „initial” ustawia domyślną wartość.

Właściwość ta jest bardzo użyteczna jeśli np. do poprawienia czytelności tekstu na stronie. Taka zmiana czasami może bardzo dużo dać przy niewielkim wysiłku.

dodatkowe tagi:
odstępy między literami css

Przeczytaj również

Selektor CSS ::first-line Pseudoelement CSS ::first-line wykorzystywany jest do zmiany właściwości pierwszej linii obiektu blokowego. Bierze przy tym pod uwagę szerokość pierws...
Responsywne obrazki / zdjęcia z efektem Polaroid &... W jednym z wcześniejszych wpisów pisałam jak z użyciem PHP uzyskać efekt Polaroid dla zdjęć i ilustracji. Tym razem pokażę jak uzyskać ten sam efekt a...
Przerywane obramowanie – box-decoration-brea... Bardzo ciekawym selektorem CSS jest box-decoration-break, z jego pomocą możemy stworzyć tzw. przerywane obramowanie. Obramowanie to możemy umieścić np...
Zmienienie pierwszego elementu. Selektory CSS :fir... Selektory (pseudoklasa) :first-child i :first-of-type stanowią ciekawe rozwiązanie jakie oferuje nam CSS3 (stylach kaskadowych). Wykorzystuje się je d...