Koszmar pod tytułem "czcionka"

czyli typografia na stronach internetowych

Rozsypana czcionka drukarska | CC0

Sądzę, że nie jedna osoba tworząca szablony miała problem z doborem czcionek, a kiedy już udało się je wybrać, pojawiał się kolejny kłopot – z ich umiejętnym dozowaniem. Chciałabym tym artykułem pomóc wszystkim znaleźć w szybki i przyjemny sposób złoty środek.

Liczba czcionek na blogu

Im mniej tym lepiej. Stosowanie większej liczby jest bardzo ryzykowne. Według mnie dwa fonty to maksimum i zdania nie zmienię. Przekroczenie tej granicy zazwyczaj jest równoznaczne z estetyczną katastrofą, chyba że ma się naprawdę genialną intuicję designerską. Dlatego radzę wszystkim przy projektowaniu kolejnych szablonów ograniczyć się do jednej lub dwóch czcionek.

Tylko jedna czcionka?

Wcale nie tylko, ale aż! Nie zapominajmy, że każda czcionka jest wyposażona jeszcze w wersję pochyloną i pogrubioną, które, odpowiednio zastosowane, mogą dać naprawdę niesamowite efekty. Gdyby i tego wciąż było mało, zawsze można połączyć pochylenie z pogrubieniem lub zastosować drukowane litery.

Załóżmy, że naszą podstawową czcionką jest Times New Roman. Jej odpowiednio powiększona i pogrubiona wersja idealnie nadaje się na tytuł, jej zwykłą wersję zastosujemy dla postów, a kursywy możemy użyć do dat i cytatów. Taki model jest uniwersalny i zazwyczaj wygląda dobrze w każdym foncie, więc korzystajcie z niego śmiało.

Przykładowe pary fontów | fontpair.com

Dwie czcionki

W tym przypadku ważne jest nie tylko odpowiednie dopasowanie ich do siebie, ale do funkcji, którą mają pełnić na blogu.

Czcionka do postów

Ten font powinien być przede wszystkim czytelny i neutralny. W związku z tym, że taką czcionką będzie się wyświetlać większość tekstu na blogu, nie może być ona zbyt intensywna. Nasze oczy męczą się, gdy mają czytać zbyt skomplikowany krój, dlatego lepiej im tego oszczędzić. Gwarantuję, że będą wdzięczne!

Opcjonalną wysokość takiej czcionki dobrze odda następujący przedział: od 10px do 14-15px, w zależności od rodzaju. Niektóre czcionki mogą w tym przedziale nadal wyglądać na zbyt małe, więc właściwie górną granicę można pozostawić otwartą (oczywiście w granicach rozsądku). Co do dolnej granicy – jest to zdecydowanie minimum, którego nie radzę przekraczać. Minimum, które w przypadku niektórych czcionek powinno się plasować już przy 12 pikselach. Nie mam nic przeciwko, gdy drobne, mało istotne elementy na blogu mają wysokość nawet 8px, ale nie tekst w poście.

Czcionka do tytułów

Ta czcionka powinna wręcz krzyczeć do czytającego, ale krzyczeć wyraźnie i tak, aby nie ogłuchł. Pamiętajcie, że towarzyszy już jej "chór" w postaci czcionki dla postów, więc im mniej ta w postach jest ozdobna, tym bardziej możemy sobie pofolgować z tą w tytułach i to w obie strony. Mam namyśli to, że w przypadku mocno stonowanej czcionki głównej, tę dla tytułów możemy zarówno maksymalnie podkreślić jak i maksymalnie wyciszyć, ponieważ ta wciąż będzie odpowiednio kontrastować, by nie zatracić swojej funkcji.

Jeżeli chodzi o wielkość, tutaj już nie ma jakiegoś szczególnego ograniczenia. Należy tylko pamiętać, aby przy stosowaniu wysokości czcionki zbliżonej do tej w postach, postarać się wyróżnić font w inny sposób, na przykład pogrubieniem lub drukowanymi literami. Czasami jednak sam krój czcionki jest na tyle ozdobny, że takie zabiegi stają się zbyteczne.

Warto jeszcze wspomnieć, że im bardziej intensywną czcionkę chcemy zastosować, tym bardziej powinniśmy ograniczyć jej ilość wyświetlającą się na blogu. Rozumiem, że można być zachwyconym przepychem niektórych fontów, ale nie pozwólcie, aby ten zachwyt przyćmił wam zdrowy rozsądek.

Rodzaje fontów

Myślę, że dobranie dwóch pasujących do siebie czcionek jest najtrudniejszym zadaniem. Ale zanim się do niego zabierzemy, zapoznajmy się z podstawowymi grupami fontów (zaczerpniętych z Google Fonts, w końcu to główne, o ile nie jedyne, źródło czcionek do szablonów).

• serif,
• sans-serif,
• monospace,
• display,
• handwriting.

Myślę, że najlepiej różnicę pomiędzy dwoma pierwszymi rodzajami fontów obrazuje poniższy rysunek i nie ma sensu zbytnio się na tym rozpisywać. Jeżeli kogoś bardziej interesuje ten temat, Google zaprasza.

Różnica pomiędzy fontem szeryfowym a bezszeryfowym | Źródło: mukulmunir.com

Rodzaje display oraz handwriting są raczej umowne. Różne źródła podają inny podział czcionek nie zaliczających się do żadnej z trzech pierwszych grup. Google przyjęło sobie akurat taki podział, więc niech im będzie. W uproszeniu handwriting to czcionki przypominające odręczne pismo, natomiast display to po prostu wszystkie inne, zazwyczaj ozdobne czcionki, których nie można umieścić w żadnej z czerech wcześniej przedstawionych kategorii.

Jak łączyć?

Chyba właśnie na ten fragment wszyscy czekali, prawda?

Moim zdaniem najbezpieczniejszym rozwiązaniem, które sprawdza się w większości przypadków, jest stosowanie czcionek bezszeryfowych do postów, natomiast do tytułów jakiejś czcionki z grup: sans-serif, display lub handwriting. Zazwyczaj taka para dobrze się dopełnia.

Czcionki z rodzaju monospace moim zdaniem niosą z sobą spory potencjał, ale też pewne ryzyko. Mogą być stosowane zarówno do tytułów jak i postów, o ile te drugie są stosunkowo krótkie. Ze względu na swój design nadają specyficzny klimat szablonowi, w którym zostały użyte. Według mnie idealnie pasują do blogów z poezją.

Dosyć niekonwencjonalnym podejściem jest stosowanie bezszeryfowych czcionek w tytułach, a w postach – szeryfowych. W takich przypadkach należy pamiętać o odpowiednio dużej różnicy wysokości obu fontów. Jest to zasada, której nie wolno zaniechać.

Zdecydowanie odradzam stosowanie fontów z grup display i handwriting w postach. Gdybym mogła, zakazałabym takich praktyk definitywnie, ale nie mogę, więc odradzam. Bardzo. Odradzam.

Grupą wysokiego ryzyka nazwałam kombinacje czcionek display i handwriting w tytułach i sans-serif w postach. Niekiedy takie połączenia zapierają dech w piersiach, innym razem sprawiają, że uciekamy z krzykiem, więc jeżeli nie czujesz się na siłach, przejdź do bardziej bezpiecznych połączeń.

Wciąż tego nie czuję

Może się zdarzyć, że nawet po przeczytaniu powyższych wskazówek, dobór czcionek sprawia ci trudność. Jednak nic straconego, w Internecie powstało wiele stron pokazujących przykładowe połączenia różnego typu czcionek z Google Fonts! Wystarczy wybrać coś z proponowanych opcji. Zazwyczaj takie kombinacje są przygotowywane przez osoby znacznie bardziej obeznane z tematem fontów niż my, więc myślę, że można zaufać ich osądowi. Przykładowa strona to fontpair.co. Dla ciebie to wciąż za mało? Wpisz w Google Google Fonts combination. Powodzenia w szukaniu tej jedynej kombinacji!

Polskie znaki

Biorąc pod uwagę, że Google Fonts jest usługą zagraniczną, nie wszystkie oferowane tam czcionki mają polskie znaki. Dlatego zanim zainstalujemy nasz ukochany font, najpierw sprawdźmy, czy zawiera znaki z naszego rodzimego języka. Można to zrobić na dwa sposoby. Wpisać na stronie googlowych czcionek w preview text nasze kochane zdanie: Zażół żółcią gęślą jaźń. Albo inne, zawierające wszystkie polskie znaki (wszystkie, ponieważ niektóre czcionki posiadają samogłoskę "ó" oraz spółgłoskę "ł", a reszty nie). Drugą możliwością jest skorzystanie z strony netwizards. Serwuje ona tylko czcionki z polskimi znakami, a przynajmniej z zasady tak ma być. Niestety zdarzają się im drobne błędy, więc mimo wszystko bądźcie czujni.

Najczęstsze błędy

Coś mnie w końcu musiało natchnąć do napisania tego postu, prawda? Wygląda na to, że szabloniarze często nie potrafią poskąpić sobie jakiejś ozdobnej czcionki i stosują ją prawie wszędzie, co wygląda źle, bardzo źle lub uczcijmy ten szablon minutą ciszy.

Wszystkiego należy się nauczyć, wyczucia także, ale przy stosowaniu bardzo ozdobnych krojów czcionek jest ono szabloniarzom wybitnie potrzebne. Czasami krój jest na tyle intensywny, że poza tytułem bloga nie powinno się nim wyświetlać żadnego teksu i pozostałe tytuły (tytuły postów, widgetów, inne wyróżnienia) należy zapełnić czcionką bazową (aby przypomnieć sobie jak to zrobić, wróć do akapitu Tylko jedna czcionka?).

Rzadszym błędem jest tak delikatne formatowanie tytułów, że na tle tekstu całego bloga przestają się wyróżniać. Czasami wystarczą dwa, trzy piksele więcej w wysokości fontów w tytułach albo mniej w wysokości fontów w postach, aby naprawić ten błąd.

Oczywistym błędem jest też stosowanie czcionek niezawierających polskich znaków, co strasznie utrudnia czytanie, zwłaszcza tekstów w postach.

Z ciekawości przejrzałam swoje stare szablony w poszukiwaniu fontowych błędów, ale na szczęście zbyt wielu nie dostrzegłam, chociaż moje zamiłowanie do stosowania Georgii w tytułach określiłabym jako nieco niepokojące.

Font czy czcionka

Jakby to ująć? W środowisku toczy się sprzeczka na temat tego czy font można nazwać czcionką skoro czcionka to, według słownika języka polskiego, znaki pisma drukarskiego. Po przeczytaniu paru artykułów z różnymi opiniami na ten temat, dochodzę do wniosku, że ta sprzeczka jest równie bezsensowna jak i nieistotna. Niektórym naprawdę się nudzi.

Podsumowanie

Czcionki są zdecydowanie newralgicznym punktem w przypadku tworzenia szablonów i często ich odpowiedni dobór sprawia nam trudność. (Mnie również, dlatego zazwyczaj stosuję w swoich szablonach bezpieczne rozwiązania bądź gotowce, których w internecie jest pełno). Najlepiej ograniczyć się do jednej lub dwóch czcionek. Niestety ta druga opcja jest bardziej problematyczna i wymaga od nas więcej wyczucia oraz wprawnego oka. W przypadku par, czcionki bardzo ozdobne należy stosować z umiarem, aby nie zaszkodzić swojej pracy.

Mam nadzieję, że dobrnęliście jakoś do końca tego dosyć obszernego tekstu, otoczeni zewsząd moimi genialnymi radami i ponadprzeciętną elokwencją, która była główną przyczyną dezercji w połowie czytania tego artykułu. W każdym razie będę szczęśliwa, jeżeli chociaż w najmniejszym stopniu pomogłam wam z doborem czcionek do waszych szablonów/blogów.

W planach mam jeszcze artykuł o czcionkach bardziej od strony kodowania. Będzie, jak się opublikuje. Ale będzie!