Obrazy tekstu
Tekst powinien być zaimplementowany jako rzeczywisty tekst, a nie jako obraz rastrowy — chyba że obraz jest niezbędny (logo, zrzut ekranu omawianego interfejsu) lub w pełni konfigurowalny przez użytkownika.
Czego wymaga kryterium
Gdy to samo przedstawienie wizualne można osiągnąć za pomocą rzeczywistego tekstu i CSS, należy stosować rzeczywisty tekst. Obrazy tekstu nie skalują się czysto przy powiększeniu, nie można ich zaznaczać, przeglądarka nie może ich tłumaczyć, nie można ich przeformatować za pomocą arkuszy CSS użytkownika, a przy dużym powiększeniu wyglądają pikselowato. Wyjątki: logotypy, obrazy niezbędne (zrzut ekranu pokazujący wygląd interfejsu) oraz obrazy tekstu, które użytkownik może samodzielnie konfigurować.
Jak spełnić kryterium
- Nagłówki, banery i teksty promocyjne należy renderować jako tekst HTML z czcionkami internetowymi, a nie jako eksportowane pliki PNG.
- Dla oznaczeń marketingowych („Nowość”, „Wyprzedaż”, „30% zniżki”) należy użyć elementu
<span>ze stylizacją CSS zamiast obrazu-sprite. - Jeśli projektant dostarcza obraz hero z wbudowanym tekstem, należy poprosić o wydzielenie tekstu jako osobnej warstwy renderowanej nad obrazem za pomocą CSS.
- W przypadku kart z cytatami generowanych po stronie serwera (w stylu mediów społecznościowych) należy w miarę możliwości renderować je jako SVG z elementami
<text>— tekst SVG skaluje się czysto i można go zaznaczać. - Należy używać
@font-facedo ładowania niestandardowych krojów dekoracyjnych zamiast rasteryzowania ozdobnego tekstu.
Typowe błędy
- Banery reklamowe z całą treścią („Oferta ograniczona czasowo! Kup teraz!”) renderowaną jako JPEG — rozmazane przy powiększeniu do 200%.
- Karty z poziomami cenowymi, gdzie „99 €/miesiąc” jest częścią obrazu karty, a nie tekstem HTML.
- Separatory sekcji z ozdobnym tekstem („Nasze usługi”) dostarczone jako PNG zamiast ostylowanego elementu
<h2>. - Przyciski wezwania do działania wykonane w całości jako obraz z tekstem alternatywnym powielającym widoczną treść.
- Zrzuty ekranu w stylu e-maila używane na stronach marketingowych, gdzie treść marketingowa mogłaby być zwykłym tekstem.
Dlaczego to jest ważne
Obrazy tekstu to również problem z tłumaczeniem i SEO — Google nie może ich zaindeksować, Chrome nie może ich przetłumaczyć, a użytkownicy lup ekranowych widzą je pikselowato. Poprawka jest zwykle trywialna: zastąpienie eksportowanego pliku kodem HTML. Trudność leży w procesie pracy — projektanci dostarczają pliki JPEG, bo są szybsze do wygenerowania w Figma niż do opisania specyfikacją.