Typografia — stylowanie tekstu w CSS

Po co się tego uczymy?

Dobrze dobrana typografia (czytelny rozmiar, odpowiednia wysokość linii, konsekwentne wyrównanie) odróżnia stronę, która wygląda profesjonalnie, od takiej, która wygląda na niedokończoną — a to jest jeden z pierwszych elementów, na które zwraca uwagę każdy odbiorca.

Teoria

Tekst to najczęstszy rodzaj treści na każdej stronie — CSS daje szeroką kontrolę nad tym, jak dokładnie ma wyglądać.

Krój i rozmiar czcionki:
font-family: Arial, sans-serif; — "stos" czcionek: przeglądarka próbuje pierwszej (Arial), a jeśli jej nie ma, używa kolejnej z listy (sans-serif to ogólna kategoria bezszeryfowa, zawsze dostępna jako ostateczny wybór).
font-size: 16px; / 1rem; / 1.2em; — rozmiar czcionki (o jednostkach px/em/rem więcej w Lekcji 11).
font-weight: bold; lub liczbowo 400 (normalny) do 700 (pogrubiony), 900 (bardzo gruby) — zależnie od tego, jakie "grubości" udostępnia dana czcionka.
font-style: italic; — kursywa.

Odstępy i wyrównanie:
line-height: 1.6; — wysokość linii tekstu (odstęp między wierszami) — wartość bez jednostki to mnożnik rozmiaru czcionki, bardzo ważny dla czytelności dłuższych akapitów.
text-align: center; — wyrównanie tekstu (left/right/center/justify — wyjustowanie do obu krawędzi).
letter-spacing: 0.05em; — odstęp między literami (przydatne np. w nagłówkach pisanych wersalikami).

Dekoracja tekstu:
text-decoration: none; — usuwa podkreślenie (najczęściej stosowane do linków, które domyślnie są podkreślone).
text-transform: uppercase; — WYŚWIETLA tekst wielkimi literami (bez zmiany samego tekstu w HTML!) — inne wartości: lowercase, capitalize (Wielka Litera Każdego Słowa).

Czcionki spoza systemu (np. Google Fonts): jeśli chcesz użyć czcionki, której użytkownik może nie mieć zainstalowanej, dołącz ją przez <link> w <head> (np. z serwisu Google Fonts), a dopiero potem odwołaj się do niej w font-family.

Przykład z życia

Zbyt mała wysokość linii (line-height) w długim tekście sprawia, że wiersze "sklejają się" wizualnie i trudno je czytać — to jeden z najczęściej pomijanych, a najbardziej wpływających na odbiór szczegółów stylowania tekstu.

Kod (CSS)

body {
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
    color: #222;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
}

.cena {
    font-size: 1.2rem;
    font-weight: bold;
    color: #27ae60;
}

.opis-filmu {
    font-size: .95rem;
    line-height: 1.7;
    text-align: justify;
}

a {
    color: #5b7cf8;
    text-decoration: none; /* usuwa domyślne podkreślenie linków */
}

.etykieta-nowosc {
    font-style: italic;
    font-weight: 300;
}

Komentarz i wyjaśnienie kodu

font-family: "Segoe UI", Arial, sans-serif; to typowy "stos bezpieczeństwa" — jeśli użytkownik nie ma zainstalowanej czcionki Segoe UI, przeglądarka spróbuje Arial, a gdyby i tej zabrakło, użyje dowolnej dostępnej czcionki bezszeryfowej systemu. text-transform: uppercase na nagłówku h1 zmienia TYLKO wyświetlanie — w kodzie źródłowym HTML tekst może być zapisany normalnie, wielkimi literami pokazuje go dopiero CSS, co ułatwia ewentualną zmianę stylu w jednym miejscu.

Ćwiczenie samodzielne

Ostyluj dowolny akapit tekstu: ustaw krój czcionki, rozmiar i wysokość linii poprawiającą czytelność.

Zadania do pracy własnej

Ostyluj nagłówek strony tak, żeby był wyśrodkowany, pogrubiony i pisany wielkimi literami.
Ostyluj cenę produktu (większa czcionka, pogrubienie, wyróżniający kolor) oraz opis produktu (mniejsza czcionka, dobra wysokość linii, wyjustowany tekst).
Zbuduj spójny system typografii dla katalogu filmów: tytuł filmu (duża, pogrubiona czcionka), rok i gatunek (mała, wyszarzona czcionka, np. color: #999), cena (średnia czcionka, pogrubiona, wyróżniona kolorem) — wszystko w jednej karcie filmu, z jednolitym font-family dla całej strony.

Typowe błędy

Częsty błąd to ustawienie font-family tylko na JEDNĄ, konkretną czcionkę bez żadnego zapasowego wyboru — jeśli użytkownik jej nie ma, przeglądarka użyje losowej domyślnej czcionki systemowej, co może całkowicie zepsuć zaplanowany wygląd. Drugi błąd: zbyt mała wartość line-height (np. 1 lub mniej) w dłuższych blokach tekstu — pogarsza to czytelność. Trzeci: mylenie text-decoration: none (usuwa podkreślenie) z próbą użycia go do pogrubienia czy zmiany koloru tekstu — to zupełnie inna właściwość.

Nawiązanie do egzaminu zawodowego

Podobnie jak pozostałe właściwości CSS, typografia nie ma osobnego efektu w INF.03.5, ale jest oczekiwanym elementem jakości wykonania każdej praktycznej aplikacji webowej ocenianej na egzaminie.