Jak naprawić mały rozmiar czcionki według GSC

Komunikat o zbyt małej czcionce w raportach użyteczności mobilnej Google Search Console potrafi skutecznie obniżyć ocenę strony w oczach Google – i frustrować właścicieli witryn. Dobra wiadomość jest taka, że ten problem da się stosunkowo łatwo naprawić, jeśli rozumiesz jego przyczyny i potrafisz przełożyć je na konkretne zmiany w kodzie, stylach CSS oraz ustawieniach szablonu. Poniżej znajdziesz praktyczne wskazówki, jak krok po kroku pozbyć się ostrzeżenia „mały rozmiar czcionki” i poprawić czytelność na urządzeniach mobilnych.

Jak Google Search Console wykrywa mały rozmiar czcionki

Na jakiej podstawie powstaje komunikat w raporcie

Google Search Console korzysta z danych pochodzących z tzw. indeksowania mobilnego oraz z symulacji działania przeglądarki na małym ekranie. Gdy robot Google analizuje Twoją stronę, bada między innymi:

• nominalny rozmiar fontu ustawiony w CSS (np. 10px, 12px),
• jak tekst skaluje się względem viewportu (szerokości ekranu),
• odległość między liniami, marginesy oraz odstępy między elementami,
• czy użytkownik musi powiększać ekran, by swobodnie przeczytać treść,
• czy strona ma konfigurację mobile‑friendly (np. meta viewport, responsywne style).

Jeżeli algorytm stwierdzi, że typowy użytkownik smartfona będzie miał trudności z odczytaniem tekstu bez przybliżania, w raporcie Użyteczność mobilna pojawia się ostrzeżenie o małym rozmiarze czcionki.

Gdzie w GSC szukać problemu i na co patrzeć

Aby zlokalizować szczegółowe informacje w GSC, przejdź do zakładki raportów dotyczących użyteczności mobilnej. Tam zobaczysz listę problemów. W przypadku małego rozmiaru czcionki:

• kliknij konkretny problem, aby rozwinąć listę adresów URL,
• sprawdź, które podstrony pojawiają się najczęściej – często są to szablony, np. artykuły lub kategorie,
• zwróć uwagę, czy problem dotyczy jedynie treści, czy również menu i stopki,
• skorzystaj z funkcji „Sprawdź adres URL” i „Test optymalizacji mobilnej”, aby zobaczyć podgląd strony oczami Googlebota.

Wiele błędów powtarza się, bo wynikają z jednego pliku CSS lub jednego komponentu szablonu. Dlatego naprawa kilku kluczowych miejsc często rozwiązuje problem dla setek lub tysięcy podstron.

Jakie progi rozmiaru tekstu są bezpieczne

Google nie podaje jednego oficjalnego minimalnego rozmiaru fontu, ale w praktyce przyjmuje się, że dla mobilnej czytelności:

• tekst główny (body) powinien mieć co najmniej 14–16px przy standardowej skali,
• nagłówki mogą być większe (18–24px i więcej, w zależności od hierarchii),
• aktywne elementy (np. linki w menu, przyciski) również nie powinny być mniejsze niż 14px.

Jednocześnie sam rozmiar w pikselach to nie wszystko – liczy się również kontrast, rodzaj fontu, interlinia i światło między blokami tekstu. Zbyt gęsty, ciemny na ciemnym, mały tekst skutkuje słabą czytelnością, nawet jeśli GSC nie zawsze od razu to wychwyci.

Najczęstsze przyczyny zbyt małej czcionki na urządzeniach mobilnych

Brak lub błędna konfiguracja meta viewport

Najczęstszy techniczny powód komunikatu w GSC to nieprawidłowe ustawienie meta viewport. Jeśli strona nie ma meta tagu viewport, przeglądarka mobilna próbuje wyświetlić szeroki widok strony (np. jak na desktopie) i „ściska” ją, aby zmieściła się na ekranie. W efekcie:

• tekst wygląda na dramatycznie pomniejszony,
• użytkownik musi dwukrotnie powiększać ekran,
• Google uznaje stronę za nieprzystosowaną do urządzeń mobilnych.

Standardowa, bezpieczna konfiguracja tego tagu wygląda mniej więcej tak:

<meta name=viewport content=width=device-width, initial-scale=1>

Brak tego elementu lub eksperymenty z innymi ustawieniami (np. wymuszanie dużej szerokości) często są pierwszym źródłem problemu.

Sztywne jednostki w CSS: px zamiast wartości względnych

Używanie małych, sztywnych wartości w pikselach, np. font-size: 10px; dla tekstu głównego, jest prostą drogą do ostrzeżeń w GSC. Fonts o takiej wielkości mogą być jeszcze czytelne na monitorach desktopowych, ale na smartfonie stają się niemal nieczytelne. Problemy pojawiają się zwłaszcza, gdy:

• projekt graficzny zakładał bardzo drobny tekst,
• programista przeniósł projekt „1:1”, bez korekt dla mobile,
• w CSS stosowane są globalne style (np. body { font-size: 11px; }).

Rozwiązaniem jest stopniowa migracja do jednostek względnych (em, rem, clamp) oraz zwiększenie wartości domyślnej dla tekstu.

Dziedziczenie stylów i konflikt różnych arkuszy CSS

Często wina nie leży w jednym prostym ustawieniu, ale w kombinacji wielu stylów, które się na siebie nakładają. Przykładowo:

• globalne style szablonu ustawiają body na 14px,
• moduł lub wtyczka stosuje dodatkowe reguły CSS zmniejszające font,
• media queries dla małych ekranów nieświadomie jeszcze bardziej pomniejszają tekst.

W efekcie tylko w części widoków czcionka staje się poniżej akceptowalnego minimum. GSC może flagować wtedy tylko wybrane podstrony lub konkretne typy treści, co utrudnia diagnozę. Do identyfikacji takich problemów przydaje się inspekcja elementów w narzędziach DevTools i śledzenie kaskady stylów.

Mała czcionka w elementach nawigacyjnych i dodatkowych

Problem z rozmiarem tekstu nie ogranicza się do samej treści artykułów. Bardzo często dotyczy też:

• górnego menu (linki upychane obok siebie),
• breadcrumbów (okruszki nawigacyjne),
• stopki z drobnym tekstem prawnym,
• widgetów bocznych i paneli filtrowania.

Jeśli w tych elementach użyto czcionek 10–12px, GSC może uznać stronę za problematyczną dla mobile, nawet jeśli sam tekst główny artykułu jest względnie czytelny. Naprawa powinna więc obejmować całą strukturę strony, a nie tylko blok contentu.

Jak prawidłowo ustawić rozmiary czcionek dla mobile

Domyślny rozmiar tekstu i hierarchia nagłówków

Podstawą jest zdefiniowanie przejrzystej hierarchii rozmiarów. Dobre praktyki dla urządzeń mobilnych:

• body: min. 16px (w jednostkach bezwzględnych) lub 1rem z bazą 16px,
• nagłówki H2: 1.4–1.6rem,
• nagłówki H3: 1.2–1.3rem,
• elementy interfejsu (przyciski, menu): co najmniej 0.9–1rem.

W praktyce warto ustawić rozmiar bazowy html { font-size: 100%; } lub 16px, a następnie używać rem do definiowania reszty. Dzięki temu użytkownik, który zmienił rozmiar czcionki w przeglądarce lub systemie, ma szansę zachować komfort czytania, a strona bardziej respektuje jego preferencje.

Używanie jednostek względnych: em, rem, a nawet clamp

Jednostki względne pozwalają lepiej dostosować się do różnych ekranów i ustawień użytkownika:

• em – zależy od rozmiaru fontu elementu nadrzędnego; przydatne w komponentach (np. przyciskach),
• rem – zależy od rozmiaru fontu elementu html; dobra baza do globalnej typografii,
• funkcja clamp() – umożliwia tworzenie płynnej typografii, np. clamp(1rem, 2vw, 1.2rem).

Choć clamp nie jest konieczny do wyeliminowania błędu w GSC, pomaga stworzyć wygodny, skalowalny system typografii, w którym tekst ani nie jest za mały na małych ekranach, ani zbyt ogromny na dużych.

Media queries dla najmniejszych ekranów

Responsywne arkusze stylów powinny wprost uwzględniać najmniejsze rozdzielczości. Przykładowy schemat dla szerokości do 480px:

• zwiększenie rozmiaru podstawowego tekstu, jeśli jest bliski minimum,
• powiększenie ważnych elementów interfejsu (przyciski, nawigacja),
• zwiększenie interlinii (line-height) do 1.4–1.6, aby tekst nie „zlewał się”.

Warto też poprawić marginesy wewnętrzne (padding) wokół bloków tekstu, aby nie przylegały do krawędzi ekranu. Taka korekta nie tylko poprawia czytelność, ale też obniża ryzyko przypadkowych tapnięć w sąsiednie elementy.

Dostosowanie fontów webowych i systemowych

Rodzaj czcionki ma wpływ na to, jak duża musi być, by zachować komfort czytania. Wąskie, cienkie kroje mogą wyglądać gorzej na słabszych ekranach. Kilka zaleceń:

• unikać zbyt cienkich odmian (100, 200); preferować 400–500 jako podstawę,
• dbać o odpowiedni kontrast między tekstem a tłem (zgodny z WCAG),
• testować wygląd na różnych systemach – Android, iOS, różne przeglądarki,
• przetestować, czy „fallback” na font systemowy nie zmniejsza czytelności.

Niektóre fonty webowe domyślnie wyrenderują się optycznie mniejsze niż inne przy tej samej wartości px/rem. Dlatego zawsze opieraj się nie tylko na wartościach liczbowych, ale na faktycznym odbiorze na fizycznym urządzeniu.

Proces naprawy błędu małego rozmiaru czcionki w praktyce

Analiza zgłoszonych adresów i identyfikacja wspólnych elementów

Po wykryciu komunikatu w GSC pierwszym krokiem jest analiza podstron, na których występuje problem. Zazwyczaj można wskazać jeden z powtarzalnych wzorców:

• wszystkie artykuły blogowe korzystające z jednego szablonu,
• kategorie produktów w sklepie,
• landing page jednego typu,
• konkretny moduł, np. panel filtrów.

Otwórz kilka różnych adresów z listy w przeglądarce mobilnej (lub trybie symulacji) i sprawdź, które elementy są zbyt małe – tekst główny, nagłówki, nawigacja, czy może drobne fragmenty w sidebarze.

Weryfikacja stylów w narzędziach deweloperskich

Po zidentyfikowaniu elementu z małą czcionką przejdź do narzędzi deweloperskich (Chrome DevTools, Firefox DevTools) i:

• zaznacz problematyczny element,
• sprawdź w zakładce „Styles”, skąd pochodzi właściwość font-size,
• zwróć uwagę na media queries, które modyfikują ten parametr dla małych szerokości,
• sprawdź, czy nie ma nadpisania przez ważniejsze selektory (kaskada CSS).

Często wystarczy zmienić jedną, nadrzędną regułę w globalnym arkuszu stylów, aby poprawić czcionkę dla całego typu podstron, zamiast ręcznie modyfikować dziesiątki elementów.

Wprowadzenie zmian w szablonie lub systemie CMS

Jeśli korzystasz z popularnych systemów zarządzania treścią, jak WordPress, Shopify czy inny CMS, rozmiary czcionek zazwyczaj można ustawić na poziomie:

• panelu konfiguracyjnego motywu (typografia, ustawienia mobile),
• edytora motywu lub plików szablonu (style.css, theme.css),
• dodatkowego arkusza „Custom CSS” wtyczki lub motywu potomnego.

Wprowadzając zmiany, pamiętaj, aby:

• nie zmieniać oryginalnego motywu, jeśli możesz użyć motywu potomnego – unikniesz nadpisania ustawień przy aktualizacjach,
• dbać o spójność wszystkich poziomów nagłówków i tekstu,
• testować zarówno wersję mobilną, jak i desktopową – powiększenie fontu nie powinno zaburzyć układu na szerokich ekranach.

Testowanie i ponowna weryfikacja problemu w GSC

Po wprowadzeniu korekt przeprowadź serię testów:

• sprawdź kluczowe podstrony na kilku urządzeniach (lub emulatorach),
• skorzystaj z narzędzia „Test optymalizacji mobilnej” od Google,
• zweryfikuj, czy nie pojawiły się nowe problemy (np. nachodzące na siebie elementy).

Następnie w GSC przy danym komunikacie wybierz opcję ponownej weryfikacji poprawki. Google stopniowo przescanuje wskazane adresy URL i – jeśli problem zniknął – status zmieni się na „Rozwiązany”. Proces ten może potrwać od kilku dni do kilku tygodni, w zależności od skali witryny i częstotliwości indeksowania.