czyli typografia na stronach internetowych

Zdjęcie z rozsypaną czcionką drukarską
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
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óż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 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!

11 komentarzy:

  1. mogą dać naprawdę niesamowite efekty. gdyby i tego wciąż było – mała litera.

    Ja się tylko odniosę do wojny font-czcionka. Cały problem zaczął się, gdy jakiś Janusz translatorski zabrał się za tłumaczenie Windowsa i angielskie „font” zamienił na czcionka, nie zdając sobie sprawy, że czcionek używają zecerzy w zakładach drukarskich do składania tekstów (jest to dokładnie ta jedna literka naniesiona na kawałek drewna lub ołowiu, z własnymi odstępami i interlinią). Font to określenie na przekaz cyfrowy. Typografowie rozróżniają te dwa terminy, bo muszą. Zwykli zjadacze chleba, wprowadzeni w błąd przez wspomnianego wyżej Janusza, nie mają pojęcia, że używają błędnego określenia.

    Myślę, że fajnym podpunktem na następny artykuł będzie różnica w kodowaniu między font a text ;) Ogólnie, cały artykuł mi się bardzo podobał i miałam się nawet kłócić o ilość czcionek w szablonie, po czym zdałam sobie sprawę, że przecież sama ostatecznie staram się schodzić do dwóch.

    Pozdrawiam, Niah.

    OdpowiedzUsuń
    Odpowiedzi
    1. Zastanawiam się, czy stałoby się coś złego, gdyby jednak do znaczeń słowa czcionka dołączyć czcionkę komputerową - font. Nie będzie to w języku polskim pierwszy wyraz o dwóch o różnych znaczeniach. (Oczywiście typografowie utrzymywaliby rozróżnienie). Jak myślisz?

      O ilość czcionek zawsze możesz się kłócić. Ten artykuł jest całkowicie subiektywny i po drugie ma raczej pomóc ludziom unikać błędów przy dobieraniu fontów, a im większa ich liczba, tym większy problem z doborem, prawda?

      Bardzo się cieszę, że artykuł przypadł ci do gustu. Mam nadzieję, że następny również ci się spodoba.


      PS. Artykuł jest obecnie poddawany korekcie przez dobrą duszyczkę, tylko ja taka niecierpliwa jestem, że musiałam opublikować go przed sprawdzeniem. :D

      Usuń
    2. Ja jestem człowiek chłonny wiedzy (a to, że się typografii uczę to tam mniejsza), ale gdy sama coś komuś tłumaczę, zawsze staram się, by słuchacz mnie zrozumiał. Więc jeżeli dla niego czcionka to font, nie będę się przy swoim upierać. Co do samego pytania – skoro chłopacy już weszli do słownika, na pewno i czcionka będzie miała inne znaczenie ;)

      Ja bym zakończyła na tym, że im mniej tym lepiej, ale to jest termin elastyczny i w zależności od przypadku będzie to 3 albo siedem. A siedem czcionek w jednym szablonie... uh.

      Nic się nie stało :D To mi tylko wpadło w oczy, bo mała litera :P

      Pozdrawiam, Niah.

      Usuń
    3. Uczysz się typografi? A może prowadzisz o tym bloga, prawdę mówiąc z chęcią poczytałabym o typografi w oczach kogoś, kto bloguje.

      Nie strasz mnie siedmioma czcionkami! Za to na trzy jestem w stanie się zgodzić, ale tak jak ujęłam to w poście, nie każdy ma talent do łączenia większej liczby czcionek razem.

      Usuń
    4. Niestety nie mam bloga o typografii ;) Jestem razem opkowiczem, ale może bym taki artykuł skrobnęła? Dla wybranych! *śmiech*
      Jakby co, na pewno dam Ci znać ;) Jakbyś chciała coś takiego wspólnie stworzyć, jestem otwarta na sugestie.

      Nie straszę, nie straszę :D Ale na pewno ktoś tak w blogosferze robi!

      Pozdrawiam, Niah.

      Usuń
  2. Bardzo przydatne, moja czarodziejko. ♥

    OdpowiedzUsuń
  3. Bardzo fajny i praktyczny poradnik. Cieszę się, że spisałaś te porady w jedno miejsce, po prostu oczu bolą od niektórych połączeń na blogach.

    OdpowiedzUsuń
    Odpowiedzi
    1. Niestety muszę się z tobą zgodzić. Oby na ten artykuł trafiły odpowiednie osoby. :)

      Usuń
  4. Niesamowicie praktyczne! Mimo, że z jednej strony niby takie oczywiste, to z drugiej... wystarczy popatrzeć na niektóre szablony, no i uczcić je minutą milczenia, jak napisałaś :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Właśnie też czułam, że w większości piszę rzeczy bardzo oczywiste i wręcz intuicyjne, ale najwyraźniej nie dla wszystkich. Jeżeli tylko komuś pomogę tym artykułem, to będę szczęśliwa!

      Usuń

© 2016 Agata. All rights reserved. jQery scroller.