Rozmiar czcionki w CSS: font-size

5.2. Rozmiar czcionki (`font-size`)

Strona główna > Kurs CSS > Rozdział 5: Stylizowanie Tekstu > Rozmiar czcionki (font-size)

Wprowadzenie: Kontrola wielkości tekstu

Właściwość font-size w CSS pozwala kontrolować wielkość (rozmiar) tekstu wyświetlanego na stronie internetowej. Jest to jedna z kluczowych właściwości typograficznych, mająca ogromny wpływ na czytelność i wygląd treści.

Rozmiar czcionki można definiować za pomocą różnych jednostek, zarówno absolutnych (jak px), jak i relatywnych (jak em, rem, %, vw). Wybór odpowiedniej jednostki ma znaczenie dla skalowalności i dostępności strony.

Jednostki dla `font-size`

Najczęściej używane jednostki do określania font-size to:

px (piksele): Jednostka absolutna. Definiuje rozmiar czcionki w pikselach CSS. Jest łatwa do zrozumienia, ale może utrudniać skalowanie tekstu przez użytkownika w niektórych przeglądarkach/ustawieniach, co wpływa na dostępność.
em: Jednostka relatywna do obliczonego rozmiaru czcionki **elementu nadrzędnego**. 1em równa się font-size rodzica. Może prowadzić do efektu kaskadowego przy zagnieżdżaniu.
rem (root em): Jednostka relatywna do rozmiaru czcionki **elementu głównego (root)**, czyli <html>. 1rem równa się font-size elementu <html> (domyślnie 16px). Unika problemu kaskadowego em i jest świetna dla globalnej skalowalności.
% (procenty): Jednostka relatywna, działa podobnie do em dla font-size – odnosi się do rozmiaru czcionki **elementu nadrzędnego**. 100% równa się font-size rodzica, 120% to 1.2 razy font-size rodzica.
vw / vh / vmin / vmax: Jednostki relatywne do viewportu. Pozwalają na tworzenie płynnej typografii, gdzie rozmiar tekstu skaluje się wraz z rozmiarem okna przeglądarki. Należy używać ostrożnie, często w połączeniu z clamp(), aby uniknąć zbyt małego lub zbyt dużego tekstu.
Słowa kluczowe (absolutne): xx-small, x-small, small, medium, large, x-large, xx-large. Definiują rozmiary względne do domyślnego rozmiaru czcionki przeglądarki (medium). Rzadziej używane w nowoczesnym designie ze względu na mniejszą precyzję.
Słowa kluczowe (relatywne): smaller, larger. Zmniejszają lub zwiększają rozmiar czcionki względem rozmiaru czcionki rodzica.

p {
  font-size: 16px; /* Stały rozmiar w pikselach */
}

blockquote {
  font-size: 1.1em; /* 1.1 raza większy niż font-size rodzica */
}

body {
  font-size: 1rem; /* Równy font-size elementu  (domyślnie 16px) */
}

h1 {
  font-size: 2.5rem; /* 2.5 raza większy niż font-size elementu  */
}

.drobny-druk {
  font-size: 80%; /* 80% rozmiaru czcionki rodzica */
}

.naglowek-plynny {
  font-size: 5vw; /* Rozmiar zależny od szerokości viewportu */
}

.stary-styl {
  font-size: large; /* Użycie słowa kluczowego */
}

`px` vs `em` vs `rem` - Dostępność i Skalowalność

Wybór jednostki dla font-size ma kluczowe znaczenie dla dostępności i możliwości skalowania tekstu przez użytkownika:

px: Ustawienie rozmiaru w pikselach może uniemożliwić lub utrudnić użytkownikom powiększanie samego tekstu w ustawieniach przeglądarki (szczególnie w starszych wersjach). Użytkownik nadal może powiększać całą stronę (zoom), ale niekoniecznie sam tekst.
em / %: Pozwalają na skalowanie tekstu względem rodzica. Jeśli użytkownik zmieni domyślny rozmiar czcionki w przeglądarce, elementy zdefiniowane w em lub % (jeśli są powiązane z tym domyślnym rozmiarem przez dziedziczenie) również się przeskalują. Główną wadą jest potencjalny efekt kaskadowy.
rem: Obecnie uważane za **najlepszą praktykę** dla definiowania font-size pod kątem dostępności i skalowalności. Ponieważ rem odnosi się do rozmiaru czcionki elementu <html>, zmiana domyślnego rozmiaru czcionki przez użytkownika w przeglądarce spowoduje proporcjonalne przeskalowanie wszystkich elementów zdefiniowanych w rem w spójny sposób w całej witrynie.

Zalecenie: Używaj rem dla większości definicji font-size, aby zapewnić najlepszą skalowalność i dostępność. Jednostki em mogą być przydatne w specyficznych przypadkach, gdy rozmiar czcionki ma być ściśle powiązany z rozmiarem rodzica wewnątrz komponentu.

Domyślny rozmiar czcionki

Większość przeglądarek ma domyślny rozmiar czcionki ustawiony na 16px. Oznacza to, że jeśli nie zdefiniujesz inaczej font-size dla elementu <html> lub <body>, to 1rem będzie równy 16px, a 1em lub 100% dla elementu bezpośrednio w body również będzie równe 16px.

Można zmienić domyślny rozmiar dla całej strony, ustawiając font-size na elemencie <html>. Popularna technika "62.5%" (html { font-size: 62.5%; }) sprawia, że 1rem staje się równy 10px, co ułatwia obliczenia, ale należy jej używać świadomie.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Ustaw bazowy rozmiar czcionki dla elementu body na 1rem. Następnie ustaw rozmiar czcionki dla nagłówków h1 na 2rem, h2 na 1.5rem, a dla małego tekstu w elemencie z klasą .small-text na 0.8rem.

Rozwiązanie:

CSS:

/* Zakładając domyślny font-size: 16px dla html */
body {
  font-size: 1rem; /* = 16px */
}

h1 {
  font-size: 2rem; /* = 32px */
}

h2 {
  font-size: 1.5rem; /* = 24px */
}

.small-text {
  font-size: 0.8rem; /* = 12.8px */
}

Efekt: Rozmiary czcionek będą proporcjonalne do bazowego rozmiaru (domyślnie 16px) i będą się skalować, jeśli użytkownik zmieni domyślny rozmiar w przeglądarce.

Zadanie 2 (do samodzielnego wykonania)

Stwórz zagnieżdżone listy (ul > li > ul > li). Ustaw font-size dla zewnętrznej listy ul na 1em. Następnie ustaw font-size dla wszystkich elementów li na 0.9em. Zaobserwuj, jak rozmiar czcionki zmniejsza się na każdym poziomie zagnieżdżenia.

Zadanie 3 (do samodzielnego wykonania)

Użyj jednostki vw, aby ustawić font-size dla elementu h1 na 6vw. Następnie użyj funkcji clamp(), aby ograniczyć ten rozmiar: minimalnie 1.5rem, maksymalnie 4rem. (Składnia: font-size: clamp(min, preferowany, max);)

FAQ - Najczęściej zadawane pytania

Czy zawsze powinienem używać `rem` dla `font-size`?

W większości przypadków rem jest najlepszym wyborem dla font-size ze względu na globalną skalowalność i dostępność. Jednostki em mogą być przydatne wewnątrz samodzielnych komponentów, gdzie rozmiar czcionki ma być relatywny do rodzica tego komponentu. px należy używać ostrożnie, głównie tam, gdzie precyzja co do piksela jest ważniejsza niż skalowalność tekstu.

Jak technika `font-size: 62.5%` wpływa na stronę?

Ustawienie html { font-size: 62.5%; } zmienia bazowy rozmiar czcionki z domyślnych 16px na 10px. To ułatwia przeliczanie rem na px (1rem = 10px, 1.6rem = 16px). Jednak może to również wpłynąć na domyślne rozmiary elementów ustawiane przez przeglądarkę (np. rozmiary pól formularzy), które mogą stać się mniejsze. Należy to przetestować.

Czy mogę używać różnych jednostek dla `font-size` w jednym projekcie?

Tak, jest to powszechne. Można używać rem dla podstawowej typografii, em wewnątrz niektórych komponentów, a nawet px dla bardzo specyficznych elementów, gdzie stały rozmiar jest kluczowy. Ważne jest, aby robić to świadomie i konsekwentnie.

Co jeśli użytkownik ma bardzo duży lub bardzo mały domyślny rozmiar czcionki w przeglądarce?

Strony zbudowane z użyciem jednostek relatywnych (rem, em) powinny się poprawnie przeskalować, dostosowując się do preferencji użytkownika. Strony oparte głównie na px mogą nie skalować się dobrze, utrudniając czytanie. Dlatego testowanie z różnymi ustawieniami rozmiaru czcionki jest dobrą praktyką.

5.2. Rozmiar czcionki (font-size)