System płynnej (responsywnej) typografii

Piksele (px) w typografii to przeszłość. Są sztywne, nie skalują się poprawnie przy zmianie ustawień przeglądarki i wymagają ręcznego pisania breakpointów dla każdego urządzenia.

Rozwiązaniem jest funkcja CSS clamp() oraz jednostki rem. Poniższy snippet to mój sprawdzony system typografii, który automatycznie skaluje się od Mobile (min) do Desktop (max), zachowując idealne proporcje i czytelność.

Dlaczego to działa? Funkcja clamp(MIN, IDEAL, MAX) sprawia, że font:

  1. Nigdy nie będzie mniejszy niż MIN.
  2. Nigdy nie będzie większy niż MAX.
  3. Pomiędzy tymi wartościami „pływa” płynnie w zależności od szerokości okna (vw).

Jak używać ten snippet?

Opcja A: Elementor (Global Custom CSS)

  1. Wejdź w Ustawienia Witryny (Site Settings) -> Custom CSS.
  2. Wklej powyższy kod.
  3. Elementor automatycznie zastosuje te style do domyślnych nagłówków HTML.

Opcja B: Motyw Potomny (style.css)

Wklej kod do pliku style.css w swoim motywie potomnym (lub przez Wtyczkę).

				
					:root {
    /* --- HIERARCHIA NAGŁÓWKÓW (Mobile -> Desktop) --- */
    
    /* H1: 34px -> 52px */
    --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
    --lh-h1: 1.1;

    /* H2: 29px -> 42px */
    --fs-h2: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
    --lh-h2: 1.15;

    /* H3: 24px -> 34px */
    --fs-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
    --lh-h3: 1.2;

    /* H4: 24px -> 26px */
    --fs-h4: clamp(1.5rem, 1.1rem + 0.7vw, 1.625rem);
    --lh-h4: 1.25;

    /* H5: 18px -> 21px */
    --fs-h5: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --lh-h5: 1.3;

    /* H6: 16px -> 18px */
    --fs-h6: clamp(1rem, 0.98rem + 0.2vw, 1.125rem);
    --lh-h6: 1.35;

    /* Body Text */
    --fs-body: 1rem; /* 16px domyślnie */
    --lh-body: 1.6;
}

/* --- IMPLEMENTACJA GLOBALNA --- */

body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }