Typografia w CSS: Czcionki i Stylizacja Tekstu

Na tej witrynie dowiesz się czym jest typografia w CSS, jakie są przykłady czcionek oraz jak z nich korzystać

Formatowanie tekstu oraz czcionek w CSS

Typografia w wyglądzie strony pełni jedną z podstawowych funkcji. Poniżej zobaczysz jak ustawić krój czcionki, rozmiar, wagę, styl oraz inne właściwości wyglądu czcionki.

Aby ustawić krój/ rodzinę czcionki należy podać nazwę dokładnie tej czcionki którą chcemy mieć. Duży wybór rodziny czcionki daje nam Google Fonts, lecz aby z nich skorzystać musimy dołączyć dodatkowy arkusz styli. W arkuszu CSS możemy zmienić krój czcionki w taki sposób:

Font-size

Jest to właściwość pozwalająca określić rozmiar tekstu. Aby to zrobić można skorzystać z różnych jednostek m.in. px, %, em, ex. Jest dużo innych jednostek lecz nie są one zalecane. Do tego można także skorzystać ze stałych tekstowych: xx-small, x-small, small, medium, large, x-large, xx-large lub określić rozmiar relatywnie do elementu nadrzędnego np. smaller.

Font-weight

Ustawiając wagę czcionki regulujemy jej tłustość.  Możemy użyć stałych tekstowych: normal oraz bold. Także można to zrobić ustawiając grubość tekstu liczbami od 100 do 900.

Istnieje także możliwość określenia rozmiaru relatywnie do elementu nadrzędnego: lighter (mniejsza grubość tekstu), bolder (tekst grubszy niż w elemencie nadrzędnym).

Wygląd tekstu

• Font-style – Aby wystylizować tekst musimy użyć wartości normal, italic bądź oblique. Jest to właściwość która pochyla tekst w prawą stronę, italic tylko troszkę a oblique bardziej
• Text-align – Aby zmienić pozycje tekstu korzystamy z właściwości text-align. Żeby to zrobić możemy skorzystać z jednostek left, center, right, justify.
• Text-transform – Właściwość text-transform CSS określa sposób pisania wielkimi literami w tekście elementu. Można go użyć, aby tekst był wyświetlany wyłącznie wielkimi lub małymi literami, albo też każde słowo było pisane wielką literą. Może również pomóc poprawić czytelność rubinu.
• Text-decoration – przyjmuje zazwyczaj wartości underline (podkreślenie) lub none (brak podkreślenia). Większość przeglądarek obsługuje też wartości: line-through (przekreślenie) oraz overline (linia ponad).

Wcięcie tekstu

Do tworzenia wcięcia akapitowego  służy atrybut text-indent. W przyszłości prawdopodobnie będzie mogli za jego pomocą również dodać wcięcie po każdym wymuszeniu łamania linii (<br>) za pomocą wartości each-line, a także do odwrócenia wcięć (wcięcie będzie dodane do wszystkich linii z wyjątkiem pierwszej) używając wartości hanging. Obie te nowe wartości są obecnie nie obsługiwane przez żadną z przeglądarek.

Cień

Obsługiwany jest przez każdą nowoczesną przeglądarkę za pomocą atrybutu text-shadow. Jako wartość, przyjmuje: przesunięcie w osi X i Y, wielkość rozmycia a także kolor. Do tekstu można dodawać kilka cieni oddzielając je przecinkiem, tworząc w ten sposób ciekawe efekty.

Odstęp między znakami i wyrazami

Zarówno letter-spacing jak i word-spacing dostępny jest w specyfikacji CSS od wersji 2, jednak odstęp między znakami był źle obsługiwany w Internet Explorerze, a by użyć go w przeglądarkach działających na silniku Webkit, potrzebny był odpowiedni prefiks. Obecnie, oba działają w każdej przeglądarce. Odstępów między znakami używać możemy na przykład do poprawiania czytelności tekstu zapisanego wersalikami.

Wyróżnianie pierwszego akapitu, pierwszej linii i pierwszej litery

Pierwszy element danego rodzica możemy zawsze łatwo znaleźć za pomocą selektora :first-child. Jeśli tekst zaczyna się na przykład nagłówkiem i chcemy odnieść się do pierwszego akapitu w artykule, lepiej będzie zastosować selektor :first-of-type. Ten efekt możecie podpatrzeć na naszej obecnej stronie. Pseudoelement ::first-line pozwala nadawać unikalny styl dla pierwszej linii danego elementu. Natomiast dzięki pseudoelementowi ::first-letter możemy zastosować wybrany styl tylko do pierwszej litery danego elementu. Możemy to wykorzystać do stworzenia efektownej pierwszej litery tekstu rodem ze starych ksiąg kaligrafowanych ręcznie.