Generator par fontów systemowych

Galeria Par Fontów

Twórz niezawodne kombinacje nagłówków i treści bez czekania na pliki fontów z serwera. Filtruj według przeznaczenia, nastroju i kontrastu, a następnie kopiuj gotowe zmienne CSS dla wybranej pary.

  • Praktyczne stosy systemowe, które renderują się poprawnie na wszystkich głównych systemach operacyjnych.
  • Podgląd na żywo z kontrolą treści nagłówka, treści głównej, skali i interlinii.
  • Gotowy kod CSS do szybkich prototypów, stron dokumentacji i interfejsów użytkownika.
  • Wskazówki, gdzie każda para sprawdza się najlepiej i jaki tworzy kontrast.

Generuj zestaw par

Zmień filtry lub tekst podglądu, aby odświeżyć galerię. Puste pola i wartości poza zakresem zostaną skorygowane przed aktualizacją wyników.

Do 90 znaków. Kod HTML jest traktowany jako zwykły tekst.

Od 20 do 280 znaków. Białe znaki są normalizowane przed renderowaniem.

42px
18px
1.55

Pokazuję tylko pary fontów systemowych. Wyniki są generowane lokalnie w Twojej przeglądarce.

Zaokrąglanie: rozmiary nagłówka i treści używają pełnych pikseli; interlinia używa dwóch miejsc po przecinku.

Założenie: dostępność fontów systemowych zależy od urządzenia. Kolejność zapasowa jest zachowana w każdym eksportowanym bloku CSS. Przetestuj na docelowych urządzeniach przed wdrożeniem typografii marki.

Galeria par

Każda karta wyświetla ten sam tekst, aby umożliwić bezpośrednie porównanie tonu i hierarchii.

0 par

Jak to działa

Ten generator wykorzystuje zestaw praktycznych par stosów fontów. Filtruje je według Twoich preferencji, stosuje ustawienia podglądu i udostępnia zmienne CSS do szybkiego użycia.

1

Wybierz kontekst projektowy

Zastosowanie, nastrój i kontrast zawężają listę. Jeśli nic nie pasuje, narzędzie pokaże pełną galerię zamiast pustego ekranu.

2

Dostosuj rytm czytania

Rozmiar nagłówka, treści i interlinia są ograniczone do bezpiecznych zakresów. Dzięki temu podgląd pozostaje czytelny, a kopiowany kod CSS jest poprawny.

3

Porównaj i kopiuj

Każdy wynik zawiera nazwy stosów, deklaracje font-family i przycisk kopiowania. Eksportowany kod CSS używa zmiennych, co pozwala na szybkie wklejenie do plików stylów.

4

Sprawdź na urządzeniach

Stosy systemowe są niezawodne, ale renderowanie zależy od przeglądarki, systemu, antyaliasingu i dostępnych fontów. Traktuj galerię jako pomocniczą listę, a nie ostateczny test jakości.