Skala Typograficzna

Generuj modularną skalę typograficzną dla swojego projektu. Wybierz rozmiar bazowy i stosunek dla idealnie proporcjonalnych nagłówków.

px
Scale PreviewPreview capped at 72px - CSS below ↓
h1
-
The quick brown fox
h2
-
The quick brown fox
h3
-
The quick brown fox
h4
-
The quick brown fox
h5
-
The quick brown fox
h6
-
The quick brown fox
body
-
The quick brown fox
small
-
The quick brown fox
Generated CSS

Czym jest modularna skala typograficzna?

Modularna skala typograficzna to zestaw rozmiarów czcionek zgodnych ze stałą proporcją matematyczną, np. Major Third (1,25x) lub Perfect Fourth (1,333x). Każdy poziom od h1 do h6 jest proporcjonalnie większy od poprzedniego, tworząc harmonijną i wizualnie wyważoną typografię.

Jak wybrać właściwą proporcję

Mniejsze proporcje jak Minor Second (1,067) tworzą kompaktowe skale dla gęstych interfejsów. Większe jak Perfect Fourth (1,333) lub Złota Proporcja (1,618) tworzą dramatyczne kontrasty dla serwisów redakcyjnych. Major Third (1,25) to bezpieczna wartość domyślna.

Korzystanie z wygenerowanego CSS

Panel CSS generuje właściwości niestandardowe w :root (np. --text-h1) i bezpośrednie selektory dla każdego poziomu nagłówka. Wklej je do swojego arkusza stylów. Użyj rem dla dostępnych, skalowalnych rozmiarów lub px dla stałych wymiarów.

Skala typograficzna a dostępność

Używanie rem zamiast px sprawia, że typografia skaluje się z preferencjami rozmiaru czcionki systemowej użytkownika, co jest ważnym aspektem dostępności. WCAG zaleca, aby tekst można było powiększyć do 200%. Modularna skala z rem automatycznie spełnia to wymaganie.