4 jednostki CSS, które decydują o skalowaniu czcionki

Najbardziej zawodne są testy polegające na wpisaniu samej nazwy czcionki bez zapasowego stosu. Jeśli krój nie jest dostępny, przeglądarka użyje domyślnego, a ty nie masz żadnej kontroli nad tym, co się wyświetli. Zawsze podawaj co najmniej dwie rodziny — jedną docelową i jedną systemową. Pamiętaj, że kolejność na liście ma znaczenie: pierwsza dostępna wygrywa, a nie ta, która wygląda najlepiej. Warto też unikać nazw potocznych i skrótów, bo nie każdy system je rozpoznaje.

Kiedy konkretna wartość ratuje układ, a kiedy go psuje Konkretna wartość, np. flex-basis 200px, daje przewidywalność. Świetnie sprawdza się w kartach produktów, panelach i kolumnach, które mają mieć podobną szerokość. Jeśli chcesz, aby elementy równo się rozkładały, ustaw flex-basis na 0 i pozwól, by flex-grow decydował o podziale. Wtedy treść nie wpływa na proporcje, a układ pozostaje stabilny. Pamiętaj jednak, że sztywne wartości nie uwzględniają długich słów ani obrazków, które mogą rozepchnąć kontener.

Warto też sprawdzić, czy plik fontu w ogóle dociera do przeglądarki. W panelu sieciowym odfiltruj żądania typu font i zobacz, czy status odpowiedzi jest poprawny. Częsty błąd to zła ścieżka do pliku albo brak deklaracji formatu — wtedy przeglądarka pobiera zasób, ale go odrzuca i przechodzi do kolejnego kroju. Inny typowy problem to zbyt restrykcyjna polityka bezpieczeństwa, która blokuje wczytywanie fontów z innej domeny. Objawia się to dokładnie tak samo: tekst wygląda inaczej, choć w kodzie wszystko się zgadza.

flex-grow działa jak licznik udziałów w wolnej przestrzeni. Jeśli dwa elementy mają flex-grow: 1 i flex-grow: 2, to drugi dostanie dwa razy więcej wolnego miejsca niż pierwszy. Ważne: dzielona jest tylko nadwyżka, a nie cała szerokość kontenera. Gdy elementy mają flex-basis: 100px każde, a kontener ma 400px, wolne 200px zostanie rozdzielone proporcjonalnie do wartości flex-grow. Wartość 0 oznacza, że element nie bierze udziału w podziale. Wartości ujemne są ignorowane, a liczby niecałkowite działają normalnie.

Procenty działają podobnie do em, bo również liczą się od rodzica. font-size: 100% to zwykle 16px, a 150% da 24px. W praktyce warto używać ich do ustawienia bazowego rozmiaru na html, a resztę budować w rem. Mieszanie jednostek bez planu prowadzi do sytuacji, w której część interfejsu skaluje się z ustawieniami przeglądarki, a część nie — i całość przestaje być przewidywalna.

Ostatnia rzecz: nie ufaj wyłącznie podglądowi na własnym komputerze. System, na którym testujesz, może mieć zainstalowany krój, którego nie ma u odbiorców. Sprawdź stronę na innym urządzeniu lub w środowisku bez dostępu do twoich lokalnych fontów. Dopiero wtedy zobaczysz, czy stos działa zgodnie z założeniem, czy tylko przypadkowo wygląda dobrze.

Rozmiar czcionki w CSS można ustawić na kilka sposobów i każdy z nich zachowuje się inaczej przy zmianie ustawień przeglądarki lub rozmiaru okna. Najczęściej używane jednostki to px, em, rem, a obok nich procenty. Zrozumienie, co skaluje się z czym, pozwala uniknąć layoutu, który rozsypuje się u użytkownika powiększającego tekst.

Przeglądarka nie zawsze używa tej czcionki, którą wpiszesz jako pierwszą w deklaracji font-family. Gdy plik fontu nie jest dostępny, system nie ma go zainstalowanego albo format nie jest obsługiwany, silnik renderujący po cichu przechodzi do kolejnej pozycji na liście. Problem w tym, że użytkownik zwykle nie widzi różnicy — dopóki nie porówna szerokości znaków albo nie sprawdzi faktycznie użytego kroju. Warto więc wiedzieć, jak to zweryfikować zamiast zgadywać.

Typowe błędy, które pogarszają sytuację: zapisywanie tego samego pliku kilka razy pod rząd, wyostrzanie po kompresji, mieszanie formatów bez kontroli jakości, powiększanie obrazu z już widocznymi blokami, a także ustawianie jakości na najniższą możliwą wartość, żeby tylko zmniejszyć rozmiar pliku. Każdy z tych nawyków dokłada artefakty, których nie da się już usunąć. Warto też pamiętać, że krawędzie na jednolitym tle psują się szybciej niż krawędzie na tle bogatym w szczegóły — dlatego kontur na niebie albo ścianie bywa najbardziej widoczny.

Sprawdzanie po metrykach i szerokości znaków Drugi sposób nie wymaga zaglądania w narzędzia. Wystarczy porównać wygląd tekstu z wzorcem. Zrób zrzut ekranu i zmierz odległość między skrajnymi punktami dwóch takich samych liter w różnych fragmentach. Jeśli szerokości się różnią, mimo że styl jest ten sam, prawdopodobnie na jednej podstronie font się załadował, a na innej nie. Uwaga na pułapkę: czcionka zastępcza często ma inne proporcje, przez co tekst może wyglądać „prawie tak samo", ale zajmować inną liczbę linii. To szczególnie widać przy dłuższych akapitach i w przyciskach, gdzie nagle pojawia się zawijanie.