Łączenie fontów – podgląd par czcionek

Jak korzystać z podglądu par fontów

1. Zacznij od jednej z opcji Proponowane pary (Redakcyjna, Nowoczesny blog, Landing page, Wiadomości, Elegancka, Magazyn technologiczny, Książka, Klasyczna, Dokumentacja, Zabawna). Każdy przycisk pokazuje font nagłówków i font tekstu, które ustawia.
2. Możesz też wybrać własny Font nagłówków i Font tekstu. Listy są pogrupowane na fonty bezszeryfowe, szeryfowe, ozdobne, o stałej szerokości i odręczne. Zamień fonty zamienia je miejscami.
3. Dostosuj Rozmiar nagłówka, Rozmiar tekstu i Interlinia oraz wybierz Grubość nagłówka (Pogrubiona (700) lub Normalna (400)). Zaznacz Ciemne tło, aby sprawdzić parę w trybie ciemnym.
4. Zastąp Tekst nagłówka i Tekst główny własnymi słowami: prawdziwy tytuł i prawdziwy akapit powiedzą ci znacznie więcej niż pangram. Akapity oddzielaj pustą linią.
5. Skopiuj Kod CSS, a następnie skorzystaj z sekcji Hosting własny z Fontsource, aby dodać fonty do swojego projektu.

Fonty wczytują się przy pierwszym wyborze (około 12–50 KB na grubość). Są serwowane z tej strony, nigdy z CDN fontów.

Polskie znaki

Wszystkie 20 fontów zawiera podzbiór latin-ext, czyli litery środkowoeuropejskie, w tym ą, ć, ę, ł, ń, ó, ś, ź i ż. Na tej polskiej stronie podzbiór ten jest wczytywany od razu, więc podgląd pokazuje polski tekst w wybranym foncie, a nie w foncie zastępczym. Pole instalacji podaje też wiersze import dla podzbioru latin-ext – bez niego polskie litery na twojej stronie wyświetlałyby się fontem systemowym.

Co sprawia, że para fontów jest dobra

• Kontrast, nie konflikt. Klasyczna recepta to font szeryfowy w jednej roli i bezszeryfowy w drugiej: Playfair Display nad Lato albo Montserrat nad Merriweather. Dwa fonty podobne, ale nie identyczne (np. dwa geometryczne bezszeryfowe), często wyglądają jak pomyłka.
• Spokojny font tekstu. To w tekście głównym czytelnik spędza najwięcej czasu. Wybierz font o otwartych kształtach liter i dużej wysokości x (Inter, Lato, Open Sans, Source Serif 4, Merriweather), a fonty ozdobne, takie jak Playfair Display, DM Serif Display, Oswald czy Caveat, zostaw na krótkie nagłówki.
• Zgodne proporcje. Fonty o podobnej wysokości x dobrze współgrają w jednej linii i w jednej kolumnie.
• Dwa fonty wystarczą. Hierarchię buduj rozmiarem, grubością i odstępami, a nie trzecim krojem.

Dla czytelnego tekstu głównego dobrym punktem wyjścia jest 16–20 px z interlinią od 1,4 do 1,7 i około 60–75 znaków w wierszu. Nagłówki zwykle potrzebują ciaśniejszej interlinii (1,1–1,3), którą kod CSS ustawia za ciebie.

Kod CSS

Kod deklaruje dwie zmienne CSS, --font-heading i --font-body, każdą ze stosem fontów zastępczych: jeśli font internetowy jeszcze się nie wczytał, przeglądarka pokazuje podobny font systemowy (Georgia dla szeryfowych, systemowy font interfejsu dla bezszeryfowych). Rozmiary są zapisane w rem (16 px = 1rem), więc respektują ustawienie rozmiaru czcionki w przeglądarce czytelnika.

Hosting własny i licencje

Wszystkie 20 fontów pochodzi z Fontsource, który pakuje fonty open source do npm. Pole instalacji podaje polecenie npm install i wiersze import dla podzbioru latin (oraz latin-ext) i wyłącznie używanych grubości; bundler kopiuje następnie pliki woff2 do twojego builda. Serwowanie fontów z własnej domeny jest szybsze (bez dodatkowego połączenia), działa offline i pozwala uniknąć przesyłania adresów IP odwiedzających do zewnętrznej usługi fontów – znanego problemu z RODO w UE.

Według metadanych pakietów każdy font jest tu na licencji SIL Open Font License 1.1: możesz go używać na stronach, w aplikacjach i w druku, komercyjnie lub nie, oraz osadzać. Nie możesz sprzedawać samych plików fontów. Jeśli zmodyfikujesz font, musi on pozostać na licencji OFL i nie może używać oryginalnej zastrzeżonej nazwy. Plik licencji jest dołączony do każdego pakietu.