Podgląd Web Safe Fonts

Podgląd web safe fonts – czcionki systemowe dla każdej przeglądarki

Web safe fonts to czcionki preinstalowane na większości systemów operacyjnych (Windows, macOS, Linux, Android, iOS) – dostępne bez Google Fonts. Idealnie do fallback stacks i stron bez zewnętrznych zasobów fontów.

Jak działa podgląd web safe fonts

Podgląd nie pobiera żadnego pliku czcionki. Kafelek z daną rodziną to zwykły element HTML, który ma ustawione font-family: Georgia, "Times New Roman", serif — przeglądarka czyta tę listę od lewej i renderuje tekst pierwszą rodziną, którą znajdzie w systemie operacyjnym użytkownika. Jeśli pierwszej nie ma, przechodzi do kolejnej, aż do rodziny ogólnej (serif, sans-serif, monospace). Dlatego na jednym komputerze podgląd pokaże Georgię, a na innym od razu Times New Roman — i to jest właśnie informacja, którą narzędzie przekazuje.

Wynik zależy więc od dwóch rzeczy: od tego, co masz zainstalowane lokalnie, oraz od kolejności w łańcuchu fallback. Ponieważ web safe fonts są czcionkami systemowymi, przeglądarka nie wykonuje żądania HTTP — nie ma opóźnienia związanego z pobieraniem fontu ani ryzyka, że plik się nie wczyta. Widzisz dokładnie ten obraz, który zobaczy użytkownik o podobnej konfiguracji systemu.

Podgląd porównawczy ma sens tylko wtedy, gdy wszystkie kafelki renderują ten sam tekst, tę samą wielkością i tym samym krojem. Wtedy różnice, które widzisz — szerokość znaków, wysokość x, grubość linii, kształt diakrytyków — wynikają wyłącznie z samego fontu, a nie z ustawień strony. Wartości typu „dostępne na ponad 95% urządzeń” to dane historyczne dla rdzeniowych czcionek Microsoftu z 1996 roku, a nie wynik bieżącego pomiaru wykonywanego przez narzędzie.

Przykład: sprawdzenie łańcucha Georgia, Times New Roman, serif dla polskiego akapitu

1. Otwórz podgląd i znajdź kafelek opisany jako Georgia z fallbackiem na Times New Roman. Zwróć uwagę, że kafelek nie zawiera jednej nazwy, tylko cały łańcuch — to on decyduje o wyniku.
2. Wpisz w polu tekstowym akapit z pełnym zestawem polskich znaków: „Zażółć gęślą jaźń. Ćwiczenie: ą, ć, ę, ł, ń, ó, ś, ź, ż”. Dzięki temu od razu zobaczysz, czy dana rodzina ma komplet glifów, czy podstawia je z innego fontu.
3. Porównaj wygląd akapitu w kafelku Georgia i w kafelku Times New Roman. Georgia jest szeryfowa i projektowana pod ekran, Times New Roman ma węższe znaki i bardziej formalny rys — przy tej samej wielkości tekst zajmie różną szerokość.
4. Zmień wielkość tekstu o jeden stopień i obserwuj, jak zmienia się czytelność. Przy małych rozmiarach różnica między tymi rodzinami jest wyraźniejsza niż przy dużych.
5. Skopiuj gotowy łańcuch do arkusza stylów w postaci font-family: Georgia, "Times New Roman", serif; i zastosuj go do akapitu na własnej stronie.
6. Zweryfikuj wynik w przeglądarce: w narzędziach deweloperskich otwórz zakładkę z obliczonymi stylami i sprawdź, która rodzina została faktycznie użyta do renderowania. To potwierdza, czy Twój system miał Georgię, czy podgląd pokazał już podstawienie.

Tabela referencyjna web safe fonts

Jak korzystać z podglądu w praktyce

• Testuj łańcuch, nie pojedynczą nazwę. Wpisuj do podglądu pełną listę tak, jak trafi do CSS — dopiero wtedy widzisz zachowanie przy braku pierwszego fontu, czyli najczęstszy scenariusz na obcym systemie.
• Zawsze sprawdzaj polskie znaki diakrytyczne. Ustaw akapit z ą, ć, ę, ł, ń, ó, ś, ź, ż i porównaj grubość oraz kształt ogonków między rodzinami. Podstawienie brakującego glifu z innego fontu bywa widoczne jako nagła zmiana rysunku pojedynczej litery.
• Dobieraj rodzinę do funkcji, nie do wrażenia. Do kodu i danych używaj łańcucha monospace, do długiego tekstu szeryfowej lub humanistycznej sans-serif, do interfejsu neutralnej sans-serif — podgląd pozwala porównać je na tym samym tekście w tych samych warunkach.
• Pamiętaj o metrykach, nie tylko o kształcie. Arial i Helvetica wyglądają podobnie, ale mają inne szerokości znaków i odstępy, więc ten sam akapit może zajmować inną liczbę wierszy. W podglądzie porównuj długość linii, nie tylko krój.
• Traktuj podgląd jako punkt wyjścia do testu na urządzeniu. Po wklejeniu łańcucha do projektu sprawdź renderowanie na innym systemie niż Twój — dopiero wtedy zobaczysz realne podstawienie, które u Ciebie jest niewidoczne.

Ograniczenia podglądu

• Pokazuje tylko Twój system. Kafelek renderuje się czcionkami zainstalowanymi na komputerze, z którego korzystasz. Nie zobaczysz w nim wyglądu na Windows, jeśli pracujesz na macOS, ani odwrotnie — brak fontu u Ciebie zawsze uruchomi fallback.
• Nie symuluje podstawień systemowych. Część systemów i przeglądarek mapuje nazwy rodzin na własne odpowiedniki (np. Arial na metrycznie zgodny font z zestawu Liberation na Linuksie). Podgląd nie pokaże tej mapy, a jedynie efekt końcowy na Twojej maszynie.
• Nie ocenia metryk ani renderowania. Narzędzie nie mierzy szerokości znaków, wysokości x, kerningu, hintingu ani wygładzania podpikselowego. Dwa fonty mogą wyglądać podobnie w podglądzie, a łamać tekst w różnym miejscu w gotowym layoucie.
• Nie sprawdza pokrycia glifów poza tekstem, który wpiszesz. Jeśli nie wstawisz znaku, którego dana rodzina nie zawiera, nie dowiesz się o podstawieniu. Dotyczy to zwłaszcza znaków spoza podstawowego zestawu łacińskiego i symboli technicznych.
• Dane o dostępności są przybliżone. Procenty typu „ponad 95% urządzeń” odnoszą się do rdzeniowych czcionek z 1996 roku i nie uwzględniają nietypowych konfiguracji, systemów okrojonych ani ustawień dostępności zmieniających domyślne fonty.

Najczęstsze pytania

Powiązane narzedzia: generator CSS czcionek, podglad fukcji CSS i generator font-face.