Skale typograficzne: dlaczego wybrałem 13 stopni i jak dobrałem współczynnik

Robert Bringhurst w książce The Elements of Typographic Style wykazał, że harmonijne relacje typograficzne opierają się na tych samych proporcjach matematycznych co muzyka: kwarta czysta (1,333), kwinta czysta (1,5) i złoty podział (1,618). Zacząłem od kwarty czystej, a skończyłem na niestandardowej progresji, której żaden standardowy współczynnik nie wygeneruje — ponieważ struktura moich treści wymagała konkretnych kroków między tekstem głównym a nagłówkami displayowymi.¹

W skrócie

Skala typograficzna generuje hierarchię rozmiarów czcionek na podstawie rozmiaru bazowego i współczynnika matematycznego. Po zbudowaniu systemu typograficznego dla blakecrosley.com — 13 stopni od 0,75rem (12px) do 5rem (80px), wyłącznie z fontami systemowymi — przekonałem się, że sam współczynnik ma mniejsze znaczenie niż dystans między tekstem głównym a nagłówkiem H1. Moja skala stosuje w przybliżeniu progresję 1,18 między sąsiednimi stopniami, ale wprowadza celowe skoki (z 3,875rem do 5rem) tam, gdzie struktura treści wymaga wizualnego oddzielenia. Interaktywne porównanie poniżej pokazuje różnicę między ścisłymi współczynnikami a korektami podyktowanymi treścią.

Moja skala typograficzna: 13 stopni

Oto faktyczna skala z pliku critical.css mojej strony:

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

Progresja między sąsiednimi stopniami nie jest ścisłym współczynnikiem matematycznym. Kroki od xs do xl podążają za mnożnikiem ok. 1,17–1,18×. Kroki od 5xl do display rosną bardziej agresywnie (1,20–1,29×), ponieważ nagłówek hero wymaga wizualnego oddzielenia od nagłówków na poziomie strony.²

Dlaczego nie ścisły współczynnik?

Ścisła tercja wielka (1,25) od bazy 16px daje następujące wartości: 16, 20, 25, 31,25, 39,06, 48,83, 61,04. Skok od tekstu głównego (16px) do H3 (31,25px) to niemal 2× — zbyt dramatyczny na stronach z dużą ilością treści, gdzie H3 pojawia się często. Moja skala kompresuje zakres środkowy (18, 21, 25, 30, 36), utrzymując proporcjonalność nagłówków względem tekstu głównego, jednocześnie rozszerzając zakres górny (43, 52, 62, 80) dla typografii displayowej.

Skalę podyktowała struktura treści, nie matematyka. Każdy stopień testowałem na rzeczywistej treści wpisów blogowych i korygowałem rozmiary tam, gdzie test zmrużonych oczu wypadał niekorzystnie.³

Dlaczego fonty systemowe

Mój stos fontów:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

Argument wydajnościowy

Fonty systemowe ładują się w zero milisekund. Brak żądań sieciowych, brak FOIT (Flash of Invisible Text), brak FOUT (Flash of Unstyled Text). To rozwiązanie przyczynia się do mojego wyniku 100/100 w Lighthouse.

Niestandardowe fonty webowe zazwyczaj dodają 100–300ms do First Contentful Paint ze względu na pobieranie plików fontów i decyzje renderowania przeglądarki. Google Fonts ładuje się z CDN (minimum jedno wyszukanie DNS + jedno żądanie HTTP). Fonty hostowane lokalnie eliminują wyszukiwanie DNS, ale nadal wymagają pobrania pliku. Fonty systemowe eliminują każdy składnik opóźnienia związanego z ładowaniem fontów.⁴

Argument projektowy

Fonty systemowe są spójne z platformą. Na macOS moja strona renderuje się w SF Pro — tym samym kroju, którego używa interfejs systemowy macOS, Apple Mail i pasek Safari. Wizualna ciągłość między systemem operacyjnym a stroną internetową sprawia, że witryna wygląda natywnie, a nie „brandowo”.

Linear, Vercel i Raycast stosują to samo podejście. Wzorzec wyłonił się z moich 16 studiów projektowych produktów: produkty stawiające czytelność treści ponad ekspresję marki zwykle korzystają z fontów systemowych.

Kiedy fonty niestandardowe się opłacają

Fonty niestandardowe sprawdzają się na stronach marketingowych, w identyfikacji wizualnej i typografii displayowej, gdzie krój pisma JEST projektem. Moja strona stawia treść na pierwszym miejscu (wpisy blogowe, opisy projektów), więc typografia powinna być przezroczysta — czytelnik powinien przyswajać treść, nie zauważać fontu.

System grubości

Cztery grubości obsługują wszystkie potrzeby hierarchii:

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

W połączeniu z 13 stopniami rozmiaru i czterema poziomami przezroczystości dysponuję 208 potencjalnymi kombinacjami (13 rozmiarów × 4 grubości × 4 przezroczystości). W praktyce konsekwentnie używam ok. 15 kombinacji. System zapewnia elastyczność bez konieczności podejmowania decyzji przy każdym elemencie tekstowym — większość tekstu korzysta z rozmiaru base, grubości normal i przezroczystości primary.⁵

Typografia responsywna

Problem pojedynczego współczynnika

Skala typograficzna zaprojektowana dla desktopu generuje zbyt duże nagłówki na urządzeniach mobilnych. Mój rozmiar display przy 80px pięknie wypełnia viewport 1440px, ale przytłacza ekran telefonu o szerokości 375px. Zamiast skalować cały system jednostkami viewport, nadpisuję konkretne breakpointy:

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

Tekst główny pozostaje na 16px we wszystkich viewportach — nie wymaga skalowania, ponieważ 16px pozostaje czytelne na każdym współczesnym ekranie. Tylko rozmiary displayowe i nagłówkowe zmniejszają się na mniejszych viewportach. To podejście jest prostsze niż typografia płynna (clamp()) i daje przewidywalne rezultaty przy znanych breakpointach.⁶

Kerning przy rozmiarach displayowych

Duży tekst wymaga ciaśniejszego trackingu. Przy 80px domyślny letter-spacing tworzy widoczne przerwy między znakami:

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

Wartość -0.03em letter-spacing i 1.05 line-height tworzą zwarte, wyraziste nagłówki. Tekst główny przy 16px korzysta z domyślnego letter-spacing i hojnego 1.7 line-height dla czytelności. Kontrast między ciasno ustawionymi nagłówkami a przestronnym tekstem głównym wytwarza rytm wizualny bez dodatkowych ozdobników.⁷

Testowanie typografii

Test zmrużonych oczu

Należy zmrużyć oczy lub odsunąć się od ekranu. Hierarchia nagłówków powinna pozostać wizualnie rozróżnialna na każdym poziomie. Jeśli H3 i H4 zlewają się w jedno, współczynnik jest zbyt mały dla wybranego kroju.

Zastosowałem test zmrużonych oczu do mojej skali i odkryłem, że --font-size-xl (21px) i --font-size-2xl (25px) początkowo się zlewały. Dodanie różnicy grubości (xl korzysta z normal 400, 2xl z semibold 600) rozwiązało problem bez zmiany rozmiarów. Grubość zapewnia hierarchię niezależnie od rozmiaru.⁸

Test na rzeczywistej treści

Należy wypełnić każdy poziom nagłówka prawdziwą treścią. Tekst zastępczy maskuje problemy z hierarchią, ponieważ „Lorem Ipsum” nie oddaje zróżnicowania wizualnej wagi rzeczywistego języka. Każdą korektę skali testuję na moim najdłuższym wpisie blogowym (korekcja błędów Hamminga, ponad 2000 słów z H2, H3, H4, blokami kodu, tabelami i przypisami). Jeśli skala sprawdza się dla najbardziej złożonej treści, sprawdzi się dla wszystkiego.

Kluczowe wnioski

Dla projektantów: - Warto zacząć od rozmiaru bazowego 16px i testować współczynniki od 1,15 do 1,25 na rzeczywistej treści; ścisłe współczynniki matematyczne często wymagają korekt podyktowanych treścią na krańcach skali - Test zmrużonych oczu i test na treści powinny poprzedzać finalizację; wizualna rozróżnialność na każdym poziomie nagłówka jest ważniejsza niż czystość matematyczna

Dla programistów: - Skale typograficzne należy definiować jako CSS custom properties na poziomie :root; odwoływanie się do var(--font-size-*) w całym kodzie zapobiega gromadzeniu się arbitralnych rozmiarów czcionek - Warto rozważyć fonty systemowe przed fontami niestandardowymi; oszczędność 100–300ms na ładowaniu fontów kumuluje się przy każdym wczytaniu strony, a fonty systemowe zapewniają natywną czytelność na danej platformie - Dla rozmiarów displayowych lepiej stosować nadpisania breakpointów niż typografię płynną, jeśli przewidywalność wyników przy znanych szerokościach jest ważniejsza niż płynna interpolacja

Źródła