Czcionki i ich stylizacja (font-family, font-size, font-weight)

Stylizacja tekstu to jeden z najważniejszych elementów CSS. Dzięki niej możesz wpływać na wygląd i czytelność treści, a tym samym na komfort użytkownika.

W tej lekcji poznasz trzy kluczowe właściwości czcionek w CSS:

font-family – określa rodzaj czcionki
font-size – ustala rozmiar tekstu
font-weight – odpowiada za pogrubienie

1. font-family – wybór czcionki

Ta właściwość pozwala określić, jaka czcionka zostanie użyta w danym elemencie. Zaleca się podawać kilka czcionek (oddzielonych przecinkami), w kolejności priorytetu. Jeśli pierwsza nie będzie dostępna, przeglądarka użyje kolejnej.

p {
  font-family: Arial, Helvetica, sans-serif;
}

Efekt:

To jest przykładowy tekst z czcionką Arial.

Popularne czcionki:

Bezszeryfowe: Arial, Verdana, Helvetica
Szeryfowe: Georgia, Times New Roman
Monospace (równe znaki): Courier New, Consolas

Jeśli czcionka zawiera spacje, należy zapisać ją w cudzysłowie:

h1 {
  font-family: "Times New Roman", serif;
}

Efekt:

Nagłówek w czcionce Times New Roman

2. font-size – rozmiar czcionki

Ta właściwość określa rozmiar tekstu. Możesz używać różnych jednostek, najczęściej:

px – piksele (np. 16px)
em – względem elementu nadrzędnego
rem – względem <html>
% – procentowo

p {
  font-size: 18px;
}

Efekt:

To jest tekst z rozmiarem 18px.

1em to 100% rozmiaru rodzica.
Dla przykładu, 1.5em = 150% podstawowego rozmiaru czcionki (czyli zwykle 24px).

3. font-weight – grubość tekstu

Właściwość ta odpowiada za pogrubienie tekstu. Można używać wartości:

normal – normalna waga
bold – pogrubiona
lighter lub bolder – relatywnie cieńszy/grubszy
100 do 900 – im wyższa liczba, tym grubsza czcionka

h2 {
  font-weight: bold;
}

p {
  font-weight: 300;
}

Efekt:

To jest pogrubiony nagłówek

To jest tekst z wagą 300 (cieńszy)

Uwaga: nie każda czcionka obsługuje wszystkie poziomy wag.

🎯 Ćwiczenie w JSFiddle

Wejdź na JSFiddle i wklej poniższy kod w sekcjach HTML i CSS, aby przetestować, jak działają różne czcionki, rozmiary i pogrubienia.

HTML:

<h1>Nagłówek główny</h1>
<p class="czcionka1">Tekst bezszeryfowy</p>
<p class="czcionka2">Tekst szeryfowy</p>
<p class="czcionka3">Tekst pogrubiony i większy</p>

CSS:

h1 {
  font-family: "Georgia", serif;
  font-size: 28px;
}

.czcionka1 {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.czcionka2 {
  font-family: "Times New Roman", serif;
  font-size: 16px;
}

.czcionka3 {
  font-family: Verdana, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

✅ Podsumowanie

font-family – definiuje rodzaj czcionki, zalecane jest podawanie kilku alternatyw
font-size – pozwala ustawić wielkość tekstu w pikselach, em, rem lub procentach
font-weight – kontroluje grubość liter od normal do bold i 900

Opanowanie tych właściwości to pierwszy krok do świadomego i estetycznego formatowania tekstów na stronach internetowych.

Przejdź teraz do kolejnego tematu: Marginesy i odstępy (margin, padding).

Previous Temat

Back to Zagadnienie

Next Temat