Używaj czytelnych rozmiarów czcionek

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje na stronie tekst, który jest tak mały, że trudno go przeczytać.

Omówienie

Rozmiar czcionki w internecie można określać w czterech popularnych jednostkach: pikselach (px), punktach (pt), jednostkach EM (em) oraz w procentach (%).

  • Piksele to „piksele CSS”. Ich rozmiar różni się w zależności od urządzenia i gęstości.
  • Punkty definiuje się w odniesieniu do pikseli. Pojedynczy piksel to 0,75 punktu*.
  • Jednostki EM i procenty to miary względne, określane w odniesieniu do rozmiaru i właściwości używanej czcionki. 1 EM to 100%.

* Zob. dodatkowe uwagi.

Ponadto na skalowanie czcionek na urządzeniach przenośnych wpływ ma widoczny obszar. Na urządzeniach przenośnych strony bez poprawnie skonfigurowanego widocznego obszaru są zmniejszane, co często powoduje, że tekst napisany czcionką o niewielkim rozmiarze staje się nieczytelny.

Zalecenia

Przede wszystkim skonfiguruj widoczny obszar. W ten sposób zadbasz, by czcionki były skalowane na różnych urządzeniach w oczekiwany sposób. Następnie skorzystaj z kolejnych zaleceń, podanych poniżej.

  1. Jako podstawowy rozmiar czcionki wybierz 16 pikseli CSS. Zmieniaj ten rozmiar zgodnie z potrzebami na podstawie właściwości używanej czcionki.
  2. Zdefiniuj skalę typograficzną, dobierając rozmiary czcionek w odniesieniu do rozmiaru podstawowego.
  3. Konieczne jest zachowanie pionowej przestrzeni pomiędzy poszczególnymi znakami tekstu; niezbędne może się okazać dostosowanie każdej czcionki. Ogólnie zalecamy stosowanie domyślnej wysokości wiersza przeglądarki, czyli 1,2 em.
  4. Ogranicz liczbę czcionek i wielkość skali typograficznej, ponieważ zbyt duża różnorodność typów i rozmiarów wprowadza bałagan i nadmiernie komplikuje układ strony.

Na przykład poniższy fragment CSS określa podstawowy rozmiar czcionki jako 16 pikseli CSS, klasa CSS „small” określa rozmiar czcionki jako 75% czcionki podstawowej (12 pikseli CSS), a klasa CSS „large” określa rozmiar jako 125% czcionki podstawowej (20 pikseli CSS):

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Więcej zaleceń na temat czcionek stosowanych w przypadku urządzeń przenośnych znajdziesz w wytycznych typograficznych Androida.

Dodatkowe informacje

Warto dokładnie przeczytać specyfikację CSS 2.1, by zrozumieć, jak są w niej definiowane jednostki długości. Specyfikacja uwzględnia więcej jednostek, których tu nie wymieniliśmy: cale, centymetry, milimetry i pica. Łatwo przeoczyć informację, że cal CSS nie zawsze jest równy calowi fizycznemu.

Wszystkie jednostki bezwzględne są zdefiniowane względem siebie nawzajem: 1 piksel to 0,75 punktu, 1 punkt to 1/72 cala, 1 cal to 2,54 centymetra itd. Jednak to od urządzenia zależy, jak zostaną zinterpretowane. Na przykład przy drukowaniu na papierze 1 cal jest interpretowany jako 1 cal fizyczny, a wszystkie pozostałe jednostki powinny się odnosić do cala fizycznego. Tymczasem przy wyświetlaniu na ekranie urządzenia przenośnego interpretacja uwzględnia tak zwany „piksel odniesienia”. 1 piksel CSS definiuje się na podstawie tego piksela odniesienia, a wszystkie pozostałe jednostki (cale, centymetry itp.) są dostosowywane w odniesieniu do piksela CSS. Dlatego na komórce 1 cal CSS wyświetla się zwykle mniejszy niż 1 prawdziwy, fizyczny cal.

Z tego powodu zalecamy definiowanie rozmiarów czcionek za pomocą pikseli. Cale i punkty mogą wprowadzać niektórych projektantów i programistów w błąd – są to przecież wymiary fizyczne, a niekoniecznie odpowiadają rzeczywistym rozmiarom. Tymczasem piksel zawsze może zmienić rozmiar w zależności od urządzenia, które go wyświetla.

Wreszcie każda czcionka ma szereg indywidualnych właściwości: rozmiar, odstępy itp. Domyślnie przeglądarka wyświetla każdą czcionkę w rozmiarze 16 px (piksele CSS). W większości przypadków takie ustawienie domyślne doskonale się sprawdza, można je jednak zmienić dla wybranych czcionek, zmniejszając lub zwiększając rozmiar domyślny w celu dostosowania do różnych właściwości czcionki. Po ustawieniu domyślnego rozmiaru czcionki należy określić rozmiar mniejszy i większy w odniesieniu do rozmiaru domyślnego, posługując się pikselami. Tych wartości można następnie użyć do określenia rozmiaru tekstu poszczególnych typów zawartości strony: głównego, dodatkowego itd.

Niektóre przeglądarki na komórki mogą próbować dopasowywać rozmiary czcionek na stronach bez poprawnie skonfigurowanego widocznego obszaru. Efekt takich prób będzie jednak odmienny w każdej przeglądarce i nie należy na nim polegać, jeśli się chce, aby czcionki wyświetlane na urządzeniach przenośnych były czytelne. PageSpeed Insights wyświetla tekst z Twojej strony bez stosowania mechanizmów dostosowywania rozmiarów właściwych dla przeglądarki.