Tekst przeniesiony z like-a-geek.jogger.pl.

Jednym z ważniejszych elementów wpływających na czytelność tekstu oraz wygląd layotu jest wybór kroju pisma. W kolejnej części cyklu poświęconemu typografii zajmę się właśnie czcionkami.

Z szeryfem czy bez?

Kroje pisma możemy podzielić na wiele sposobów. Ja zastosuję podział na cztery ogólne grupy, które mogą na siebie nachodzić:

  • czcionki szeryfowe – kreski znaków zakończone są prostokątami lub trójkątami (patrz rysunek niżej), pismo takie jest zwykle stosowane w książkach. Przykładowe kroje: Times New Roman, Georgia
  • czcionki bezszeryfowe – znaki są proste (nie są zakończone szeryfami) i bardziej nowoczesne. Np. Helvetica, Verdana
  • czcionki o stałej szerokości (monospace) – każda litera zajmuje tyle samo miejsca (np. ramka wokól i jest tak ustawiona, żeby znak był tak samo szeroki jak W). Kroje takie mogą być szeryfowe lub bezszeryfowe i tradycyjnie używane są do wyświetlania kodu programów. Przykład: Courier
  • pisanki i kroje ozdobne – kroje imitujące pismo ręczne oraz inne nieczytelne czcionki nienadające się do długich tekstów.

kroj szeryfowy, bezszeryfowy, monospace i pisany

Kroje z zaznaczonymi szeryfami

W tekstach ciągłych (artykuły, komentarze itp.) na pewno nie należy stosować pisanek, przesadnie ozdobnych liter i zwykle krojów szeryfowych… zauważ jednak, że tekst, który czytasz posiada szeryfy! Unikanie ich nie jest zasadą, ale zaleceniem i w niektórych przypadkach dobry krój szeryfowy nadaje się do wyświetlania na ekranie. Jak wspomniałem tradycyjnie czcionki takie stosuje się w książkach, więc użycie szeryfów powoduje, że czytelnik widzi tekst sformatowany tak, jak spodziewa się go w długim tekście. Moje notki są zwykle długie, więc użycie szeryfów powinno umilić odbiór tekstu. Ponadto, jeśli spodziewamy się, że tekst może zostać wydrukowany również warto użyć szeryfów.

Kroje szeryfowe zwykle czyta się łatwiej i szybciej niż te szeryfów pozbawione – szeryfy tworzą naturalną linijkę. Niestety, większość z czcionek należących do tej grupy została zaprojektowana długo przed powstaniem monitorów (np. Times New Roman) i mała rozdzielczość wyświetlaczy może negatywnie wpłynąć na czytelność. Szczególną uwagę trzeba zwrócić na pismo pochyłe, w którym najwyraźniej widać niską jakość wyświetlaczy – więcej na ten temat można przeczyta w artykule na webinside.pl. Kroje tak jak Georgia zostały jednak przystosowane do wyświetlania na monitorze i można je bezkarnie stosować

W elementach takich jak menu, dodatkowe ramki, stopki, opisy formularzy itd. najlepiej użyć kroju bezszeryfowego. W logo i tytułach możemy natomiast użyć pisanek, pod warunkiem, że są wystarczająco czytelne. Jest to właściwie jedyne miejsce, gdzie można ich użyć. Wiąże się z tym pewien problem, ale o nim niżej.

Jaka czcionka?

Ciężko odpowiedzieć na pytanie jakiej czcionki użyć. W specyfikacji CSS możemy posłużyć się właściwością font-family
. Jeśli chcemy użyć kroju szeryfowego możemy napisać: font-family:serif; lub sprecyzować, jaka konkretna czcionka ma być zastosowana: font-family:georgia, serif;. Teoretycznie lepsza jest pierwsza opcja: mówimy przeglądarce, że ma wyświetlić domyślną czcionkę pozbawioną szeryfów. Niestety większość użytkowników będzie miało ustawiony krój zupełnie nie nadający się do wyświetlania na ekranie, np. Times New Roman i nasz piękny szablon straci swój urok lub zupełnie się rozjedzie, jeśli domyślna czcionka ma nietypową szerokość.

Co robić? Moim zdaniem warto wybrać jeden z popularnych krojów zaprojektowanych do wyświetlania na ekranie i taki zaserwować użytkownikom. Jeśli potrafimy wybrać odpowiednią czcionkę i jej ustawienie ma cel (możliwość druku, długie teksty) ustawny konkretny krój. Jeśli jednak ma to być ustawione od tak sobie – darujmy sobie konkretną rodzinę i pozostawmy jedną z wartości: serif, sans-serif, monospace. Nazwy te wskazują, jaki typ tekstu ma być zastosowany (kolejno szeryfowy, bezszeryfowy, o stałej szerokości). Poza tym nie ma sensu wybierać zbyt oryginalnej czcionki, gdyż mało komu wyświetli się to, co powinno (dotyczy to głównie pisanek) – jeśli są to pojedyncze elementy (logo, główne tytuły) można tekst zapisać jako grafikę i w stawić na stronę.

Rozmiar ma znaczenie

Poza krojem znaczenie ma także rozmiar czcionki. Wraz ze wzrostem rozdzielczości zwiększa się domyślny rozmiar tekstu (do niedawna zwykle było to 12px, teraz 16). Tu nie można przesadzić w żadnym kierunku – należy wziąć pod uwagę, że czcionka dziewięciopikselowa będzie zupełnie niewidoczna w wysokich rozdzielczościach, a 20px pozwoli na wyświetlenie około 25 wierszy na wciąż używanym 1024×768 – to za mało. Jeśli rozmiar jest ustawiony na sztywno proponuję więc rozmiar w granicach 14 – 16px lub podobny. Oczywiście mowa o tekstach ciągłych – tytuły mogą być większe. Inną możliwością jest wykorzystanie względnej jednostki miary i opisanie wielkości za pomocą emów. Przy takim opisie proporcje między znakami zostaną zachowane. Przykładowo, znak o wysokości 1.5em będzie zawsze dwa razy większy od tego o wysokości 0.75em, ale jego wysokość wyrażona w pikselach będzie zależna od ustawień przeglądarki użytkownika. Rozwiązanie takie może być początkowo problemem (to przeklęte mnożenie;) – pomóc może Em Calculator.

Podsumowując, z czcionką nie ma co przesadzać – najprostsze rozwiązania powodują najmniej problemów (z racji samej specyfiki internetu jakieś problemy zawsze się pojawią). Ogólnie powinno stosować się popularne kroje bezszeryfowe a w niektórych przypadkach szeryfowe (do tekstu ciągłego). Kroje o stałej szerokości stosuje się zwykle do wyświetlania kodu, pisanki nadają się wyłącznie do tytułów i innych krótkich tekstów (warto zapisać je jako grafikę). Rozmiar tekstu ciągłego najlepiej wybrać w okolicy 14 – 16px.

Autor artykułu: Marcin Kosedowski.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *