Typografia robi pierwsze wrażenie

Typografia to jeden z najważniejszych elementów designu strony internetowej — a jednocześnie jeden z najczęściej zaniedbywanych. Wybór fontów, ich rozmiar, interlinia i sposób ładowania mają bezpośredni wpływ na czytelność, estetykę i wydajność strony. Źle dobrana typografia utrudnia czytanie i sprawia, że strona wygląda nieprofesjonalnie. Dobrze dobrana — jest niewidoczna, bo pozwala skupić się na treści.

Fonty systemowe vs fonty webowe

Fonty systemowe

Fonty systemowe to czcionki zainstalowane na urządzeniu użytkownika. Ich największa zaleta: zerowy czas ładowania. Nie trzeba pobierać żadnych plików — font jest już dostępny.

Nowoczesny stack fontów systemowych:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji";

Każdy system operacyjny użyje swojego domyślnego fontu:

  • macOS/iOS: San Francisco (-apple-system)
  • Windows: Segoe UI
  • Android: Roboto
  • Linux: Noto Sans lub Liberation Sans

Zalety fontów systemowych:

  • Brak dodatkowych żądań HTTP
  • Natychmiastowe renderowanie tekstu
  • Spójność z interfejsem systemu operacyjnego
  • Doskonała wydajność na słabszych urządzeniach

Google Fonts

Google Fonts to najpopularniejsza biblioteka darmowych fontów webowych z ponad 1500 rodzinami czcionek. Fonty są serwowane z CDN Google, co zapewnia szybkie ładowanie i globalne cache.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

Popularne i sprawdzone fonty z Google Fonts:

Do tekstu głównego (body):

  • Inter — czytelny, nowoczesny bezszeryfowy, zaprojektowany specjalnie do ekranów
  • Source Sans 3 — neutralny i czytelny, dobrze sprawdza się w dłuższych tekstach
  • Lora — elegancki szeryfowy font, świetny do blogów i artykułów

Do nagłówków:

  • Poppins — geometryczny, nowoczesny, wyrazisty
  • Playfair Display — klasyczny szeryfowy z charakterem
  • Montserrat — inspirowany plakatami Buenos Aires, doskonały do nagłówków

Self-hosting fontów

Alternatywą dla ładowania z CDN Google jest hostowanie fontów na własnym serwerze. Eliminuje to zależność od zewnętrznego serwisu i zapytanie DNS do domeny Google:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-regular.woff2') format('woff2');
}

Narzędzie google-webfonts-helper (https://gwfh.mranftl.com) automatycznie generuje pliki CSS i pobiera fonty w odpowiednich formatach.

Optymalizacja ładowania fontów

font-display

Właściwość font-display kontroluje zachowanie przeglądarki podczas ładowania fontu:

  • swap — tekst jest natychmiast wyświetlany fontem zastępczym, po załadowaniu następuje podmiana. Zalecany dla większości stron.
  • fallback — krótki okres niewidoczności (100 ms), potem font zastępczy. Podmiana tylko jeśli font załaduje się szybko.
  • optional — przeglądarka decyduje, czy użyć fontu webowego. Przy wolnym połączeniu zostaje font systemowy.

Dla stron firmowych swap jest najlepszym wyborem — tekst jest czytelny od razu, a podmiana fontu to akceptowalny kompromis.

Preload krytycznych fontów

Fonty potrzebne do renderowania treści above-the-fold warto załadować z wyprzedzeniem:

<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>

Ograniczaj preload do 1-2 plików fontów. Każdy preload to dodatkowe żądanie HTTP o wysokim priorytecie, które może opóźnić ładowanie innych zasobów.

Format WOFF2

WOFF2 to najbardziej skompresowany format fontów webowych, obsługiwany przez wszystkie nowoczesne przeglądarki. W porównaniu z WOFF oferuje 30% lepszą kompresję. Dla nowych projektów WOFF2 jest jedynym potrzebnym formatem — obsługa starszych formatów (TTF, EOT) jest zbędna.

Subsetting — ograniczenie zestawu znaków

Pełna rodzina fontu może ważyć setki kilobajtów. Jeśli strona jest wyłącznie w języku polskim, nie potrzebujesz znaków cyrylicy, greki czy CJK:

# Użycie narzędzia pyftsubset
pyftsubset Inter-Regular.ttf \
  --output-file=Inter-Regular-latin.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes="U+0000-00FF,U+0100-024F,U+2000-206F"

Google Fonts automatycznie stosuje unicode-range subsetting — przeglądarka pobiera tylko podzbiory znaków, których potrzebuje strona.

Dobre praktyki typograficzne w CSS

Rozmiar i interlinia

body {
  font-size: 16px;        /* minimum dla czytelności na ekranach */
  line-height: 1.6;       /* interlinia 160% — komfortowa dla dłuższych tekstów */
  letter-spacing: -0.01em; /* delikatne zagęszczenie dla fontów bezszeryfowych */
}

h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }

Funkcja clamp() zapewnia responsywną typografię — rozmiar skaluje się płynnie między wartością minimalną a maksymalną.

Długość wiersza

Optymalna długość wiersza to 45-75 znaków. Zbyt długie wiersze utrudniają powrót wzroku do początku kolejnej linii:

article {
  max-width: 65ch; /* ok. 65 znaków */
  margin: 0 auto;
}

Jednostka ch odpowiada szerokości znaku „0" w danym foncie — to najdokładniejszy sposób kontrolowania długości wiersza.

Kontrast

Tekst musi spełniać wymagania WCAG 2.1 dotyczące kontrastu:

  • Normalny tekst: stosunek kontrastu co najmniej 4.5:1
  • Duży tekst (18px bold lub 24px): co najmniej 3:1

Czysty czarny tekst (#000) na białym tle (#fff) ma kontrast 21:1 — to maksimum, ale może być męczący dla oczu przy dłuższym czytaniu. Ciemnoszary (#1a1a1a lub #333) na białym tle to bardziej komfortowe rozwiązanie przy zachowaniu wymaganego kontrastu.

Ile fontów używać?

Ogólna zasada: maksymalnie dwa fonty na stronie — jeden do nagłówków, drugi do tekstu głównego. Każdy dodatkowy font to dodatkowe kilobajty do pobrania i ryzyko wizualnego chaosu.

Sprawdzone kombinacje:

  • Inter + Inter — jeden font w różnych grubościach
  • Playfair Display + Source Sans 3 — klasyczny kontrast szeryfowego i bezszeryfowego
  • Poppins + Lora — nowoczesne nagłówki z eleganckim tekstem

Podsumowanie

Typografia webowa to balans między estetyką a wydajnością. Fonty systemowe oferują najlepszą wydajność, ale ograniczony wybór wizualny. Google Fonts i self-hosting dają pełną kontrolę nad wyglądem, ale wymagają optymalizacji: format WOFF2, font-display: swap, rozsądny subsetting i preload krytycznych plików. Niezależnie od wyboru fontu, fundamentem dobrej typografii pozostaje odpowiedni rozmiar tekstu, komfortowa interlinia i właściwa długość wiersza.