[ Narzędzie online ]
Kalkulator
Typografii
Trzy zaawansowane narzędzia do profesjonalnej typografii web: skala, fluid CSS i dobieranie par fontów.
Wygenerowana skala — Perfect Fourth
base: 16px| Krok | px | rem | em | Podgląd |
|---|---|---|---|---|
| --text-xs | 9px | 0.563rem | 0.563em | Aa Typografia |
| --text-sm | 12px | 0.75rem | 0.75em | Aa Typografia |
| --text-base | 16px | 1rem | 1em | Aa Typografia |
| --text-lg | 21.33px | 1.333rem | 1.333em | Aa Typografia |
| --text-xl | 28.43px | 1.777rem | 1.777em | Aa Typografia |
| --text-2xl | 37.9px | 2.369rem | 2.369em | Aa Typografia |
| --text-3xl | 50.52px | 3.157rem | 3.157em | Aa Typografia |
| --text-4xl | 67.34px | 4.209rem | 4.209em | Aa Typografia |
| --text-5xl | 89.76px | 5.61rem | 5.61em | Aa Typografia |
Podgląd hierarchii — Perfect Fourth
Eksportuj
:root {
--text-xs: 0.563rem;
--text-sm: 0.75rem;
--text-base: 1rem;
--text-lg: 1.333rem;
--text-xl: 1.777rem;
--text-2xl: 2.369rem;
--text-3xl: 3.157rem;
--text-4xl: 4.209rem;
--text-5xl: 5.61rem;
}[ Wiedza ]
Zasady
TypografiiWeb
6 kluczowych zasad typografii dla stron internetowych — od hierarchii po wydajność fontów.
Hierarchia wizualna
Hierarchia typograficzna komunikuje strukturę treści — które elementy są ważniejsze. Stosuj max 3–4 rozmiary czcionek na stronie, zróżnicowane wagą (font-weight) i rodzajem kroju. Przy projektowaniu stron internetowych hierarchia nagłówków H1→H6 jest kluczowa zarówno dla UX, jak i dla SEO.
Czytelność i measure
Optymalna długość linii (measure) to 45–75 znaków, czyli ok. 600–750px dla body przy 16–18px. Zbyt szeroki tekst wymaga za dużego ruchu oka, zbyt wąski — za częstego łamania wzroku. Przy tworzeniu stron internetowych ogranicz szerokość kolumn tekstowych przez max-width lub CSS grid.
Line-height i rytm
Dla tekstu ciągłego optymalne line-height to 1.5–1.6, dla nagłówków 1.1–1.2. Pionowy rytm typograficzny (vertical rhythm) polega na stosowaniu spójnych wielokrotności bazowego line-height jako marginesów i paddingów — daje poczucie porządku i elegancji na stronie www.
Kontrast i czytelność
Minimalny kontrast tekstu względem tła wg WCAG AA to 4,5:1 dla tekstu normalnego i 3:1 dla dużego (18px+). Unikaj czystego czarnego (#000) na czystej bieli (#fff) — kontrast 21:1 jest zbyt intensywny. Ciemnoszary (#1a1a1a) na białym to elegantszy standard w projektowaniu stron.
Web fonts i wydajność
Każdy font to dodatkowy request HTTP i KB danych. Używaj max 2 fontów, ładuj tylko potrzebne wagi (400, 700). W Next.js użyj next/font do self-hostingu — eliminuje zewnętrzne żądania i zeruje Layout Shift (CLS). font-display: swap zapobiega FOIT (niewidoczny tekst podczas ładowania).
CSS i zmienne
Definiuj typografię przez CSS custom properties (--text-xl: 1.25rem) lub tokeny Tailwind. Fluid typography z clamp() eliminuje breakpointy dla czcionek. Skala oparta na współczynniku matematycznym (np. Perfect Fourth 1.333) daje harmonijną hierarchię bez ręcznego dobierania rozmiarów przy tworzeniu stron.
[ Studio Kalmus ]
Typografia w projektowaniu stron internetowych
Profesjonalna typografia stron internetowych to jeden z filarów dobrego UX. W Studio Kalmus każde projektowanie strony internetowej zaczyna się od doboru skali typograficznej dopasowanej do charakteru marki i grupy docelowej.
Przy tworzeniu stron internetowych stosujemy fluid typography z clamp() — tekst skaluje się płynnie między urządzeniami mobilnymi a dużymi monitorami, bez osobnych breakpointów dla każdego nagłówka. To przekłada się na lepsze Core Web Vitals i niższy CLS (Cumulative Layout Shift).
Strony internetowe z przemyślaną typografią mają wyższy czas przebywania na stronie (dwell time) i niższy współczynnik odrzuceń — Google interpretuje to jako sygnał jakości treści, co pozytywnie wpływa na pozycjonowanie.
Dlaczego typografia ma znaczenie dla SEO?
Prawidłowa hierarchia H1–H6, czytelność i szybkość ładowania fontów wpływają na zachowanie użytkownika (bounce rate, czas na stronie) oraz na wyniki Core Web Vitals.
Jak next/font poprawia wydajność strony?
next/font self-hostuje fonty Google, eliminuje zewnętrzne żądania DNS i subresource i zeruje layout shift (CLS = 0) dzięki automatycznemu font-display:swap.
Ile kosztuje typografia w profesjonalnym projekcie strony?
Dobór fontów, skala i tokeny typograficzne to element standardowego procesu projektowania stron www w Studio Kalmus — wliczone w każdą realizację.
[ Często zadawane pytania ]
FAQ
Typografia
Odpowiedzi na najczęstsze pytania o typografię, skalę i fonty w projektowaniu stron internetowych.
[ Studio Kalmus ]
Potrzebujesz strony z profesjonalną typografią?
Tworzymy strony internetowe z przemyślanym designem typograficznym od podstaw. Projektowanie stron, tworzenie stron internetowych i pozycjonowanie SEO — wszystko w jednym miejscu.