Typografia w web designie – 9 zasad, które zmienią wygląd Twojej strony

Wszystkie ładne strony, które widzisz na Behance czy Awwwards, mają jedno wspólne: świetnie dobraną typografię. To 80% udanego designu — kolory, animacje, layout to dopiero potem. Pokażę Ci 9 zasad, które stosujemy w każdym projekcie websky-studio.pl/.

W skrócie

• Typografia = 80% wrażenia z designu. Słabe fonty = amatorska strona, niezależnie od reszty.
• Maksymalnie 2 fonty na stronę. 3 to wyjątek dla bardzo skomplikowanych projektów.
• Polski rynek: sprawdź diakrytyki ą, ę, ł, ń — większość zachodnich fontów rysuje je źle.
• Performance: font lokalnie hostowany + font-display: swap = brak FOUT/FOIT.

1. Pairing fontów — maksymalnie 2 rodziny

Najczęstszy błąd amatorskiego designu: 4 różne fonty na home page. Wygląda chaotycznie.

Zasada 2 fontów

• Heading font — wyrazisty, charakterny (display, sans-serif z osobowością)
• Body font — czytelny, neutralny (sans-serif lub serif)

Czasem warto dodać 3. font dla akcentów (np. monospace dla cytatów lub liczb), ale to wyjątek.

Sprawdzone pary

Klasyczna i bezpieczna:
– Headings: Inter (sans-serif, świetne PL)
– Body: Inter (ten sam, w lżejszej wadze)

Z charakterem:
– Headings: Playfair Display (serif z elegancją)
– Body: Inter (sans-serif czyste)

Nowoczesna:
– Headings: Space Grotesk (geometryczny sans)
– Body: Inter lub DM Sans

Premium / luksusowa:
– Headings: Cormorant Garamond (klasyczny serif)
– Body: Manrope (modernowy sans)

Kiedy 1 font wystarczy

Coraz częściej w 2026: jeden font o szerokim zestawie wag (Light, Regular, Bold, Black). Strona wygląda spójnie.

Polecane mono-font solutions:
– Inter (cały zakres)
– Manrope
– Plus Jakarta Sans
– Geist (od Vercel, popularny w 2026)

2. Hierarchia rozmiarów — Type Scale

Nie używaj losowych rozmiarów (12, 14, 16, 18, 22, 26, 30, 38). Użyj type scale — proporcjonalnej skali.

Klasyczna skala 1.250 (Major Third)

Bardziej dynamiczna (1.333 — Perfect Fourth)

Generator skal: type-scale.com.

Mobile-first: skaluj w dół

Powyższe skale dla desktopa. Mobile (375 px) wymaga proporcjonalnie mniejszych rozmiarów:

h1 {
  font-size: 32px; /* mobile */
}
@media (min-width: 768px) {
  h1 {
    font-size: 50px; /* desktop */
  }
}

3. Line-height — dobierz właściwie

Line-height (leading) to odstęp między linijkami tekstu. Najczęściej spotykany błąd: za mały (zbity tekst) lub za duży (linie „płyną osobno”).

Zalecane wartości:

• Headings (large): 1.0–1.2 (ciasno, dramatycznie)
• Headings (mid): 1.2–1.3
• Body text: 1.5–1.6 (najlepsza czytelność)
• Captions / small: 1.3–1.4

body {
  font-size: 18px;
  line-height: 1.6; /* 28.8 px */
}

h1 {
  font-size: 50px;
  line-height: 1.1; /* 55 px */
}

4. Line-length — 45–75 znaków

Najlepsza czytelność: 45–75 znaków na linię. Krócej (30) = oczy „skaczą” zbyt często. Dłużej (90+) = oczy gubią początek następnej linii.

Konwersja na CSS

Bezpieczna szerokość kontenera tekstu na desktopie:

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

Jednostka ch = szerokość znaku „0” w bieżącym foncie. To bardziej semantyczne niż max-width: 720px.

5. Kontrast — czytelność = WCAG

Wymóg WCAG 2.2 AA: kontrast min. 4,5:1 dla tekstu < 18 pt.

Najczęstsze błędy:

❌ Szary tekst na białym tle — #999 na #FFF = 2,8:1 (FAIL)
✅ #666 na #FFF = 5,7:1 (OK)
✅ #444 na #FFF = 9,7:1 (great)

❌ Jasne na jasnym akcentowym kolorze
❌ Zbyt wczesne ciemnienie tła w hero przy wideo (tekst znika)

Tester:

WebAIM Contrast Checker — wpisz hex tła i tekstu.

6. Polskie diakrytyki — sprawdź każdy font

Większość zachodnich fontów ma niedokładnie narysowane polskie znaki:

• ą wygląda jak „a z dziwną kreseczką”
• ł jest za cienkie lub za grube
• ż, ź, ć mają kropki/kreski poza pasem fontu

Test:

Napisz akapit z wszystkimi polskimi znakami:

„Zażółć gęślą jaźń. Stróż pchnął kość w quiz gędźb vel fax myjń.”

Czytaj. Czy wygląda spójnie? Czy ą i ę są tej samej wagi co a i e?

Fonty z dobrymi polskimi znakami:

• Inter (Google, darmowy)
• DM Sans / DM Serif (Google)
• Manrope (Google)
• Plus Jakarta Sans
• TWK Lausanne (premium)
• Caros / Capitalics (polskie foundries, premium)

7. Wagi fontu — używaj tylko potrzebnych

Każda dodatkowa waga fontu = dodatkowy plik do pobrania. Inter w 9 wagach to 9 plików × 100 KB = 900 KB.

Zasada minimum:

Najczęściej wystarcza 3 wagi:
– 400 (Regular) — body
– 500 lub 600 (Medium/SemiBold) — wyróżnienia
– 700 (Bold) — headings

W Google Fonts wybierz tylko te 3 — pobranie zajmie 60% mniej.

8. Performance — fonty lokalnie + font-display

Hostuj fonty lokalnie

Google Fonts przez <link> = 2 zewnętrzne requesty + zależność od Google. Lepiej:

1. Pobierz font z google-webfonts-helper.herokuapp.com
2. Wgraj na serwer (/fonts/inter/)
3. Dodaj @font-face w CSS:

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

font-display: swap — kluczowe!

Bez font-display: swap przeglądarka czeka 3 sekundy na pobranie fontu, pokazując pusty tekst. To FOIT (Flash of Invisible Text) — psuje LCP i Lighthouse.

font-display: swap mówi: „pokaż natychmiast tekst w foncie systemowym, podmień na webowy gdy się załaduje”. To FOUT (Flash of Unstyled Text) — szybsze, lepsze.

Preload kluczowych fontów

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

To mówi przeglądarce: „Pobierz ten font priorytetowo, nawet zanim parsujesz CSS”.

9. Detale typograficzne — kerning, ligatures, fluid type

Kerning

Niektóre kombinacje liter (AV, To, We) wyglądają źle z domyślnym kerning. Włącz auto:

body {
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

Ligatures

Niektóre fonty mają piękne ligatury (połączenia „fi”, „fl”, „ffi”). Włącz:

body {
  font-feature-settings: "liga", "kern";
}

Fluid typography (clamp)

Zamiast media queries dla każdego breakpointu:

h1 {
  font-size: clamp(32px, 5vw, 64px);
}

To znaczy: minimum 32 px, maksimum 64 px, w środku skalowane proporcjonalnie do szerokości okna.

Przykład pełnej konfiguracji typografii

/* Reset */
html { font-size: 16px; }

/* Body */
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.125rem;  /* 18px */
  line-height: 1.6;
  color: #333;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

/* Headings */
h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}

h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: clamp(22px, 3vw, 32px); }
h4 { font-size: clamp(18px, 2.5vw, 24px); }

/* Article content */
article {
  max-width: 65ch;
  margin: 0 auto;
}

article p { margin-bottom: 1.5rem; }

Co dalej

W tym tygodniu:

1. Otwórz swoją stronę i sprawdź: czy używasz max 2 fontów?
2. Sprawdź kontrast wszystkich tekstów (WebAIM)
3. Sprawdź polskie diakrytyki (Zażółć gęślą jaźń)
4. Sprawdź font-display: swap w CSS
5. Sprawdź line-height body (powinno być 1.5–1.6)

Robimy redesigny ze szczególnym naciskiem na typografię — w pakiecie podstawowym dostajesz dobrze dobrany font system + audyt typograficzny istniejącej witryny. Sprawdź ofertę.