Ranyboskie!

Domyślne i preferowane rozmiary tekstu

TL;DR


Popularne podejścia w ustawianiu rozmiaru fonta na stronie

Istnieje kilka sposobów na ustawienie rozmiaru tekstu na stronie internetowej. Niektóre są lepsze, niektóre gorsze, a inne mogą znacznie ograniczyć używalność strony. Omówmy pokrótce najpopularniejsze z nich:

Opcja 1: 'font-size' w pikselach

Jest to pewnie najbardziej oczywiste podejście do określania rozmiaru tekstu. Piksele mają stały i absolutny rozmiar, co jest również ich poważną wadą. Piksele nadpiszą preferowany rozmiar tekstu ustawiony w przeglądarce użytkownika, ale dalej możliwe będzie powiększenie tekstu wbudowanym w przeglądarkę zoomem (⌘/ctrl+), oraz ustawiając większy rozmiar tekstu w systemie (mac, windows).

Opcja 2: 'font-size: 62.5%' na html

Sztuczka polega na ustawieniu font-size: 62.5% na tagu html. Sprawi to, że na większości przeglądarek jeden rem będzie równy około 10px. Dzięki temu w prosty sposób można odtworzyć rozmiar czcionki w pikselach zachowując przy tym relatywność remów. Przy tym podejściu użytkownik będzie mógł powiększyć tekst zarówno na poziomie systemu, jak i w samej przeglądarce (Firefox, Chrome). Wydawać by się mogło że jest to idealne podejście, posiada ono jednak jedną poważną wadę: zmniejszamy domyślny font-size dla całej strony. W związku z tym, gdy polegać będziemy wyłącznie na domyślnym stylowaniu przeglądarki, teksty mogą okazać się zbyt małe. Do takiej sytuacji może dojść również w przypadku gdy przeglądarka nie będzie wspierała jednostek rem (Caniuse.com). Problem będzie jeszcze bardziej dotkliwy gdy na html ustawimy font-size: 6.25%, tak aby 10rem równe było 10px. Wtedy teksty na nieostylowanych elementach będą bliske zniknięciu.

Opcja 3: używanie remów z domyślnym 'font-size'

To podejście opiera się na założeniu że domyślny rozmiar tekstu w przeglądarce to około 16px. W tej sytuacji taką właśnie wartość będzie miał 1rem. Wymaga to odrobinę więcej kalkulacji, jednak właśnie to rozwiązanie jest najbezpieczniejsze - użytkownik ma pełną kontrolę nad preferowanym rozmiarem tekstu, a domyślny rozmiar tekstu pozostaje niezmieniony. Dla ułatwienia warto stworzyć helper.

(@wopolow, dzięki za sugestie ❤︎)

← Wróć