Nagłówki na stronie internetowej – dobre praktyki

Przeglądając stronę Festiwalu Kultury Żydowskiej w Krakowie, tak bardzo zauroczył mnie jej minimalistyczny, elegancki dizajn, że odruchowo kliknąłem prawym przyciskiem > Zbadaj element. Ot, stary nawyk każdego web developera, który zamiast podziwiać – od razu grzebie pod maską. I co znalazłem?

SVG zamiast nagłówka

Zamiast klasycznego tytułu strony w tagu <h1>, autorzy użyli takiego fragmentu:

<h1 class="page-title page-title-mt">
  <img src="O-festiwalu.svg" alt="">
</h1>

W skrócie: cały nagłówek to obrazek zapisany w wektorowym formacie SVG. Ogromna zaleta takiego rozwiązania – nagłówek jest zawsze perfekcyjnie dopasowany do szerokości kontenera w którym się znajduje, niezależnie od skalowania. Ale taki patent ma też swoją bardziej mroczną stronę.

Problem – SEO i screen readery

Problem tkwi w tym, że nagłówki są bardzo ważne dla robotów Google przeczesujących stronę a także dla screen readerów dla osób niewidomych. A to z kolei ma wpływ na SEO, czyli pozycję w wyszukiwarce.

Jeśli ktoś koniecznie chce korzystać z SVG w nagłówku, można zrobić coś takiego:

<h1>
  <span class="visually-hidden">O festiwalu</span>
  <img src="O-festiwalu.svg" alt="O festiwalu">
</h1>

Albo jeszcze prościej – ukryć tekst wewnątrz h1 za pomocą opacity: 0:

<h1>
  <span style="opacity: 0;">O festiwalu</span>
  <img src="O-festiwalu.svg" alt="">
</h1>

Plusy:

• h1 zawiera prawdziwy tekst – screen reader i SEO go widzą,
• jest to dobre rozwiązanie dla tych, którzy nie chcą dłubać w CSS, mnożyć klas albo pracują w jakimś frameworku, który nie ma wartości takich jak clamp (o czym za chwilę)
• SVG nadal wygląda pięknie i można je skalować stylem jak wcześniej.

Uwaga: to rozwiązanie jest estetyczne i technicznie „legalne”, ale istnieje alternatywa. Stylizowanie nagłówka w CSS tak, aby zawsze miał szerokość kontenera.

Nowoczesne skalowanie nagłówków

Patent ze skalowaniem nagłówka strony, jak na stronie Festiwalu, jest totalnie możliwy we współczesnym CSS. I są na to dwa sposoby! Pierwszy to cqw. Rozwiązanie to sprawia, że nagłówek będzie w nieskończoność zmniejszać się i zwiększać wraz z kontenerem. Jeżeli kontener ma swój max-width – na przykład 48 rem – to skalowanie oczywiście zatrzyma się w tym punkcie. To rozwiązanie jest dobre dla nagłówków krótkich, które na komórce nie skurczą się do niedorzecznie krótkich rozmiarów. Dla dłuższych za chwilę przedstawię alternatywę, czyli clamp.

Jak działa cqw? Rodzicowi nagłówka, jego kontenerowi musisz nadać właściwość container-type: inline-size;

.container {
  container-type: inline-size;
}

Jeżeli kontener ma 48rem szerokości i nagłówek pasuje do niego idealnie mając wielkość 8.4rem, to 8.4rem / 48rem = 17.5% → czyli font powinien mieć 17.5% szerokości kontenera. A zatem ustawiasz nagłówkowi 17.5cqw.

clamp() – skalowanie w określonych granicach

A co jeżeli nagłówek jest nieco dłuższy i zacznie wyglądać komicznie mały na mobilu? Możesz ustawić maksymalną i minimalną wartość skalowania z clamp():

h1 {
  font-size: clamp(2rem, 5vw, 8.4rem);
}

To oznacza:

• minimum – 2rem → np. na smartfonie,
• preferowane skalowanie – 5vw → dynamiczne dopasowanie do szerokości viewportu,
• maksimum – 8.4rem → np. na desktopie lub przy szerokim kontenerze.

Zaleta: działa we wszystkich nowoczesnych przeglądarkach, nie wymaga dodatkowego setupu.

Ale to jest skalowanie względem całego okna przeglądarki, a nam chodzi o skalowanie względem kontenera – tak jak jest na stronie festiwalu.

Użyjemy więc clamp() z wartością cqw w środku.

.container {
  container-type: inline-size;
}

h1 {
  font-size: clamp(2rem, 17.5cqw, 8.4rem);
}

Co tu się dzieje?

• container-type: inline-size mówi przeglądarce: „hej, traktuj ten kontener jako punkt odniesienia do jednostek cqw”.
• 17.5cqw = 17.5% szerokości kontenera → w naszym przypadku daje dokładnie 8.4rem, gdy kontener ma 48rem.
• clamp() ogranicza skalowanie – 17.5cqw i 8.4rem to w zasadzie tam sama wartość, więc font będzie zmniejszać się począwszy od 8.4rem i przestanie skalowanie w dół na wartości 2 rem. W tym momencie czcionka zacznie zachowywać się „normalnie”, czyli po prostu będzie przełamywać tekst na linijki.

Spacing

Nagłówkom można, a nawet trzeba zmieniać leading i tracking! Czyli odstępy międzyliterowe – zmniejszać je – oraz odstępy pomiędzy wierszami tekstu – również je zmniejszać. Czemu? Odstępy między literami w czcionkach projektowane są pod tekst ciągły w mniejszych rozmiarach. Nagłówki natomiast rządzą się swoją estetyką, ponieważ stanowią one najcześciej jedno, max dwa zdania pisane dość dużą czcionką. Spójrz na zrzut ekranu strony TailwindCSS, jak cholernie dobrze wygląda ten nagłówek z ciasnymi światłami – zarówno pomiędzy literami jak i wierszami tekstu. Wygląda on tak, jakby stanowił pewną wizualną spójność. Leading ma wartość 100% (99px wielkość fontu, 99px leading). Ponadto widzimy tam klasę .tracking-tighter.

Efektu takiego nie osiągnąłbyś, gdybyś po prostu wklepał tekst w h1, na standardowych ustawieniach fontu.

Na marginesie polecam wtyczkę do przeglądarki WhatFont, dzięki której możemy podejrzeć krój pisma i ustawienia typografii na naszych ulubionych stronach.

Skala

Jeżeli chodzi o hierarchię wielkości nagłówków (h1, h2, h3 itd.) to warto trzymać się sprawdzonych wzorców. Albo skali typograficznej (predefiniowanych liczb, jakie znajdują się w edytorach tekstu lub programach takich jak Photoshop lub Figma), albo innych sprawdzonych skal. Polecam tutaj odwiedzić stronę https://typescale.com/

Nie bój się dużych stopni pisma w nagłówkach. Dizajn to gra kontrastami!

p.s. Jeżeli Twój tekst jest wyrównany do środka, niech nagłówek również będzie wyrównany do środka. Jeżeli tekst jest wyrównany do lewej, nagłówek również powinien być do lewej – nawet jeżeli czasami kusi Cię, by wyrównać do środka, celem dopasowania do innych elementów na stronie, które są centered. To nie jest dogmat, ale zazwyczaj dość bezpieczna praktyka.