Kurs HTML

Problem ze stałym rozmiarem czcionki

Tradycyjnie rozmiar czcionki ustawiało się za pomocą stałych jednostek jak piksele (px) lub punktów (pt). W kontekście RWD, stały rozmiar czcionki może prowadzić do problemów:

• Na bardzo małych ekranach tekst może być zbyt duży, zajmując za dużo miejsca lub powodując niechciane zawijanie.
• Na bardzo dużych ekranach tekst może wydawać się nieproporcjonalnie mały w stosunku do layoutu.

Używanie Media Queries do zmiany font-size na różnych breakpointach jest rozwiązaniem, ale może prowadzić do skokowych zmian rozmiaru tekstu i wymaga zarządzania wieloma regułami.

Celem **responsywnej (lub płynnej) typografii** jest sprawienie, aby rozmiar tekstu skalował się płynnie wraz ze zmianą rozmiaru viewportu, zapewniając optymalną czytelność na każdym urządzeniu.

Jednostki Viewportu dla font-size

Jak wspomnieliśmy w lekcji o jednostkach relatywnych, jednostki viewportu (vw, vh, vmin, vmax) mogą być używane do ustawiania rozmiaru czcionki. Najczęściej wykorzystuje się vw (Viewport Width).

h1 {
  /* Rozmiar czcionki to 5% szerokości viewportu */
  font-size: 5vw;
}

p {
  /* Rozmiar czcionki to 2% szerokości viewportu */
  font-size: 2vw;
}

Zalety:

• Tekst skaluje się płynnie wraz ze zmianą szerokości okna.

Wady:

• Na bardzo wąskich ekranach tekst może stać się **zbyt mały**, aby był czytelny.
• Na bardzo szerokich ekranach tekst może stać się **zbyt duży**, dominując layout.
• Może to powodować problemy z dostępnością (WCAG wymaga możliwości powiększania tekstu przez użytkownika, a czcionka oparta tylko na vw może to utrudniać).

Czyste użycie vw dla font-size jest często zbyt ekstremalne. Lepszym podejściem jest połączenie vw z inną jednostką, np. rem, za pomocą funkcji calc():

h1 {
  /* Minimalny rozmiar 1.5rem + skalowanie 2vw */
  font-size: calc(1.5rem + 2vw);
}

To zapewnia pewien minimalny rozmiar bazowy (1.5rem), do którego dodawane jest płynne skalowanie (2vw). Jednak nadal nie mamy kontroli nad maksymalnym rozmiarem.

Funkcja clamp()

Nowoczesnym i bardzo eleganckim rozwiązaniem problemów z ekstremalnymi wartościami przy skalowaniu jest funkcja CSS clamp(). Pozwala ona zdefiniować **minimalną wartość**, **preferowaną (płynną) wartość** i **maksymalną wartość** dla danej właściwości CSS, w tym font-size.

Składnia:

property: clamp(MIN, PREFERRED, MAX);

• MIN: Minimalna dozwolona wartość. Właściwość nie przyjmie mniejszej wartości, nawet jeśli preferowana wartość obliczy się na mniej.
• PREFERRED: Wartość preferowana, która zazwyczaj zawiera jednostkę relatywną (np. vw) pozwalającą na płynne skalowanie.
• MAX: Maksymalna dozwolona wartość. Właściwość nie przyjmie większej wartości, nawet jeśli preferowana wartość obliczy się na więcej.

Przykład dla font-size:

h1 {
  /* Min: 1.5rem, Preferowany: 1rem + 3vw, Max: 3rem */
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}

p {
  /* Min: 1rem, Preferowany: 0.8rem + 0.5vw, Max: 1.2rem */
  font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
}

Jak to działa?

• Przeglądarka oblicza wartość preferowaną (np. 1rem + 3vw).
• Jeśli obliczona wartość jest **mniejsza niż MIN** (1.5rem), używana jest wartość MIN.
• Jeśli obliczona wartość jest **większa niż MAX** (3rem), używana jest wartość MAX.
• Jeśli obliczona wartość mieści się **pomiędzy MIN a MAX**, używana jest obliczona wartość preferowana.

Dzięki clamp() uzyskujemy płynne skalowanie tekstu w określonym zakresie szerokości viewportu, ale z gwarancją, że tekst nigdy nie będzie ani za mały, ani za duży, co znacznie poprawia czytelność i dostępność.