Projektując strony internetowe, często stajemy przed wyzwaniem wyboru odpowiedniego kroju pisma. Font musi być czytelny, funkcjonalny, a jednocześnie spójny z estetyką projektu. Jeśli, podobnie jak ja, masz już dość Monsterrata i Roboto, zapraszam do sprawdzenia mojej listy ulubionych krojów, które są nie tylko darmowe, ale też doskonale sprawdzają się w interfejsach użytkownika.

Czym jest dla mnie dobry font? Jest czytelny, dobrze się renderuje, ma odpowiednie wsparcie dla polskich znaków i oferuje wystarczającą liczbę odmian, aby obsłużyć wszystkie potrzeby projektu – od nagłówków, przez teksty akapitowe, aż po buttony.

W dzisiejszym tekście skupiłam się celowo na krojach, które są wyjątkowo uniwersalne - nie mają specjalnie dużo “charakteru”. Świetnie sprawdzą się więc do składania minimalistycznych stron oraz dłuższych akapitów. Dzięki temu, że są starannie zaprojektowane, obronią się jako font główny na stronie, ale dobrze wyglądać będą także w towarzystwie jakichś bardziej zwariowanych kompozycji typograficznych.

Mam nadzieję, że ta lista będzie Twoim repozytorium w momencie kiedy musisz znaleźć coś uniwersalnego, co sprawdzi się w każdej okazji.

Inter i Inter Display

Pierwszą stronę z wykorzystaniem Intera stworzyłam w 2020 roku, kiedy był to jeszcze mało znany, ale już świetnie przygotowany font. Do dzisiaj pamiętam ekscytację jaka mi twoarzyszyła kiedy go znalazłam i lekki szok, kiedy zdałam sobie sprawę, że nie jest on aż tak znany, jak na to zasługiwał.

Od tego czasu Inter przeszedł ogromną metamorfozę, oferując nie tylko wyjątkowo dopracowane litery, ale też imponujące możliwości dostosowania. Na stronie twórców w zakładce Lab możecie eksperymentować z jego zmiennymi właściwościami – od grubości, przez szerokość, po kontrast. Inter oferuje także spore możliwości dostosowania go pod Wasze potrzeby dzięki wariantom stylistycznym.

Switzer

Jeśli Inter wydaje się Wam zbyt przewidywalnym wyborem, polecam Switzera – font, który swego czasu mocno mnie zafascynował. To klasyczny kroj neo-groteskowy, inspirowany szwajcarskim designem. Wciąż nie jest dostępny na Google Fonts, nie jest więc jeszcze aż tak popularny. Jest elegancki, czytelny, a drobne detale (jak chociażby ciekawie zaprojektowana litera “a” sprawiają, że wygląda świeżo nawet w minimalistycznych projektach.

W porównaniu do Intera jest nieco mniej zaokrąglony, będzie idealny dla fanów prostoty i funkcjonalności, w projektach nieco bardziej brutalistycznych.

Poppins

Poppins to jeden z tych fontów, które przez długi czas omijałam szerokim łukiem. W przeszłości miał problemy z polskimi znakami i znakami interpunkcyjnymi, które często wyglądały nierówno i nieestetycznie. Ostatnio szukałam jednak darmowego geometrycznego kroju i dałam mu kolejną szansę.

Muszę przyznać, że powrót do niego po latach bardzo mnie zaskoczył i trochę żałuję, że nie zrobiłam tego wcześniej, bo wszystkie problemy z którymi miałam styczność, zostały poprawione, a Poppins to po prostu porządnie przygotowany geometryczny font, który może być darmową alternatywą na przykład dla popularnego Gilroy.

Satoshi

Satoshi to kolejny font, który uwielbiam, zwłaszcza za jego obłe, nowoczesne kształty. Oferuje szeroki wybór odmian – od lekkich po grube – zarówno w wersji zwykłej, jak i pochylonej.

W porównaniu do Poppinsa ma zdecydowanie mniejszą wysokość “x”, prezentuje się więc zdecydowanie smuklej, lżej. Sprawdzi się wszędzie tam, gdzie zależy Wam na geometrycznym efekcie, ale Poppis zajmuje za dużo miejsca na szerokość.

Satoshi dostępny jest na Fontshare, nie ma go jeszcze w Google Fonts, jest więc duża szansa, że (przynajmniej na razie) nie grozi mu pojawianie się na co drugiej stronie internetowej.

Krój ten posiada alternatywy stylistyczne dla “a”, “g”, “G”, czy “t”, więc jeśli macie silne preferencje w tym zakresie (ja niestety mam), będzie opcja dopasowania go do swoich potrzeb.

DM Sans

DM Sans to krój bazujący na wspomnianym wcześniej Poppinsie, ale posiadający nieco więcej charakteru - przede wszystkim dzięki charakterystycznemu wyglądowi litery “g” czy “r”.

Bardzo ciekawą funkcją jest uważnie oprogramowana opcja “Optical Size” - jej działanie możecie podejrzeć w zakładce “Type tester” na Google Fonts. Polega ona na dopasowywaniu się kształtu liter w kroju do stopnia wielkości pisma. W tym konkretnym przypadku wraz ze zmianą wielkości zmieniają się nam odstępy międzyliterowe oraz poziom skomplikowania samych znaków. Dzięki temu krój zachowuje czytelność przy mniejszych tekstach, ale wciąż jest wizualnie bardzo ciekawy w nagłówkach.

Manrope

Manrope to font, który łączy nowoczesny design z funkcjonalnością. Jest wyjątkowo czytelny i świetnie renderuje się na ekranach, co czyni go idealnym wyborem do interfejsów czy sklepów internetowych.

Manrope, to jeden z tych krojów, które są praktycznie “przezroczyste”. Sam w sobie nie ma zbyt wiele charakteru, więc jeśli musisz stworzyć uniwersalny projekt i którym ważna jest czytelność (ma dość dużą wysokość “x”), zdecydowanie się na niego może być bardzo dobrą decyzją.

Hanken Grotesk

Kolejnym bardzo dobrym krojem, którego praktycznie nie widać w projekcie jest Hanken Grotesk (wcześniej HK Grotesk). Jest nieco mniej geometryczny niż Manrope, więc chcecie uniknąć skojarzeń ze stylistyką material design, a równocześnie zależy Wam na dużej czytelności, może być dobrym wyborem.

Świetnie nada się jako samodzielny krój i towarzysz dla odważniejszych nagłówków.

Outfit

Outfit, to kolejny krój, który może przydać się jeśli klient chciałby na swojej stronie zobaczyć Gilroy, ale ma na niego budżetu. W porównaniu do Poppinsa ma zdecydowanie niższą wysokość “x”, będzie więc prezentować się nieco lżej, szczególnie w nagłówkach.

Mona Sans

Świetny font bezszeryfowy od twórców Github, a więc dedykowany typowo do Internetu. Jest to krój variable z dwoma osiami - grubością oraz szerokością, dzięki temu za pomocą jednego kroju stworzyć możemy spójne nagłówki w wersji condensed i wide oraz dłuższy tekst o klasycznej szerokości. Dodatkowo font dopasować można do swoich preferencji zmieniając kształt niektórych charakterystycznych liter (takich jak “a”, “l” czy “g”).

Krój ciągle jest rozwijany i w obecnej wersji miałam dość duże problemy z wysokością tekstu (nierówne położenie względem linii bazowej, które dość boleśnie obija się podczas projektowania przycisków). Jeśli natkniecie się na ten problem - pobierzcie krój z Google Fonts, albo dedykowany Google Fonts wariant z githuba projektu.

Nunito Sans

Bardzo ciekawy krój, który z pewnością sprawdzi się w niejednym interfejsie za sprawą swoich możliwości dopasowania go do własnych potrzeb.

Wersja variable Nunito daje nam możliwość zmiany go za pomocą aż 3 osi - grubości, szerokości (tak aby uzyskać wariant wide i condensed) oraz lowercase height (zmieniającą wysokość “x”) co może okazać się przydatne wtedy gdy chcemy przygotować spójne, ale jednak dopasowane do potrzeb warianty nagłówkowe, dla tekstów akapitowych i na przykład małych przypisów.