Strona głównaNarzędzia projektoweParowanie czcionek

Parowanie czcionek

Narzędzie do łączenia fontów pokazuje podgląd 12 wyselekcjonowanych kombinacji Google Fonts do nagłówków i tekstu głównego, pozwala samodzielnie mieszać fonty i kopiuje pasujący CSS @import.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

O tym narzędziu

Narzędzie do łączenia fontów pokazuje podgląd 12 wyselekcjonowanych kombinacji Google Fonts do nagłówków i tekstu głównego, pozwala samodzielnie mieszać fonty i kopiuje pasujący CSS @import.

Jak używać

  1. Wybierz jedną z gotowych par albo sam dobierz font do nagłówków i tekstu.
  2. Użyj Random Pairing, aby odkrywać kombinacje.
  3. Oceń podgląd na żywo nagłówka i akapitu.
  4. Kliknij Copy CSS @import, aby załadować fonty na swojej stronie.

Warto wiedzieć

  • Klasyczna para zestawia font szeryfowy z bezszeryfowym, np. Playfair Display z Source Sans 3.
  • Wśród par są m.in. Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter oraz DM Serif Display + DM Sans.
  • Ograniczenie strony do dwóch rodzin fontów zapewnia spójność i zmniejsza rozmiar pobieranych plików.
  • Podgląd ładuje wybrane fonty z Google Fonts w grubościach 400 i 700.
  • Dodanie display=swap do adresu fontu wyświetla tekst zastępczy, dopóki font webowy się ładuje.

Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.

Najczęściej zadawane pytania

Jakie fonty dobrze do siebie pasują?

Zwykle dobrze łączą się fonty o kontrastujących stylach, ale podobnych proporcjach, np. kontrastowy szeryfowy nagłówek z czystym bezszeryfowym tekstem. Gotowe pary tutaj to sprawdzone kombinacje.

Ile fontów powinna mieć strona internetowa?

Dwie rodziny — jedna do nagłówków i jedna do tekstu — wystarczą większości stron. Trzecia rzadko jest potrzebna.

Czy Google Fonts są darmowe do użytku komercyjnego?

Tak. Fonty z biblioteki Google Fonts są udostępniane na otwartych licencjach, takich jak SIL Open Font License, i można ich używać komercyjnie.

Jak dodać fonty do strony?

Wklej skopiowany @import na początku swojego CSS albo zamień go na znacznik link w sekcji head HTML, a potem ustaw font-family dla nagłówków i body.