Dobór fontu, zwłaszcza w projektach, które będą wyświetlane na ekranie, ma zasadniczy wpływ na odbiór całego dzieła. Jednak jego wykonanie jest tak samo ważne jak wygląd.
Fonty takie jak Times New Roman czy Helvetica są znane większości użytkowników sieci. Nie wszyscy zdają sobie sprawę, że w rzeczywistości są to czcionki przeznaczone do druku a nie wyświetlania na monitorach. W związku z tym ujawnia się szereg ich wad widocznych zwłaszcza przy niskich rozdzielczościach czy po wprowadzeniu kursywy.
Prawie jak Helvetica
Powstało mnóstwo fontów przeznaczonych specjalnie do projektów elektronicznych, które stały się standardem. Najbardziej znana jest historia Ariala – prawie dokładnej kopii Helvetiki. Microsoft i Apple wspólnie wprowadziły ten font na przekór firmie Adobe. Głównym celem podczas projektowania Ariala było zachowanie szerokości znaków identycznej jak w pierwowzorze. Udało się to, ale font stracił na „elegancji”. Wprowadzono również kilka poprawek poprawiających wyświetlanie w małych rozdzielczościach. Chociaż oba wyglądają niemal identycznie przeznaczone są do innych celów.
Historia powstania Ariala jest pełna zaskakujących zwrotów akcji (takich jak późniejsze kupienie Helvetiki przez Apple). Można przeczytać ją po polsku na stronie typografia.info http://typografia.ogme.pl/index.php?option=com_content&task=view&id=48&Itemid=4.
Fonty tracą szczególnie dużo przy wprowadzeniu pogrubienia lub kursywy. Mało który zawiera specjalne znaki pochyłe i w różnych stopniach pogrubienia. Z reguły kształt litery o zmienionym kroju jest wyliczany. Jeśli tak zmodyfikowany tekst znajdzie się w tytule (zwykle powiększonym) błędy nie będą widoczne. Jednak w przypadku tekstu ciągłego czytelnik od razu zauważy, że tekst czyta się źle.
Uwaga na małe rozmiary!
Przykładowo, w większości fontów szeryfowych o małym stopniu szeryfy rosną do zbyt dużych rozmiarów. Dzieje się tak, ponieważ mając do dyspozycji małą liczbę pikseli program nie jest w stanie prawidłowo obliczyć proporcji między szeryfami a grubością znaków. Wiąże się to głównie z dużo mniejszą niż w druku rozdzielczością. W konsekwencji szeryfy przeszkadzają w czytaniu.
Równie ważne jest zwrócenie uwagi na odległości między znakami. Przy małym rozmiarze litery nie mogą się ze sobą stykać, a przy dużym tekst nie powinien zbytnio się rozjeżdżać. Ma to szczególne znaczenie, jeśli stosujemy justowanie typu gazetowego, czyli takie, gdzie zmienne są nie tylko szerokości białych znaków ale także odległości pomiędzy literami. CSS w aktualnej wersji nie daje takiej możliwości (chociaż ma ona zostać wprowadzona), ale projekty przygotowane w programach graficznych i DTP pozwalają na taką ingerencję w tekst.
Podobnie wygląda sprawa z kursywą i pogrubieniem. Wyliczany przez komputer kształt liter o niedużej wielkości nie wygląda tak jak powinien. Gładkie linie zamieniają się na schodki, a oczka pomniejszają się.
Fonty do zadań specjalnych
Przedstawione informacje dotyczą większości fontów. Tak samo ważne jak szczegóły techniczne jest przeznaczenie danego kroju. W tekście ciągłym zasadniczo stosuje się fonty bezszeryfowe. Dobrym wyjściem jest zostawienie wyboru użytkownikowi – deklarujemy, że tekst ma być typu „sans serif”, a czytelnik sam wybierze ulubiony font w swojej przeglądarce.
Fragmenty kodu
W niektórych zastosowaniach konieczne jest użycie fontu przygotowanego specjalnie do tego celu. Przykładem mogą być projekty prezentujące duże ilości kodu programów i skryptów. Tekst taki musi być pisany fontem o stałej szerokości znaku. Jeśli istnieje możliwość wyboru, należy zwrócić uwagę na wygląd kilku kluczowych znaków. 1 (jedynka) musi być wyraźnie różna od I (dużego i) oraz (małego L). Często stosowany średnik powinien odróżniać się od dwukropka. 0 (zero) nie może wyglądać tak jak O (duże o) itd. Ma to szczególne znaczenie, jeśli istnieje ryzyko, że tekst będzie przepisywany.
Dobrym rozwiązaniem jest zastosowanie podświetlania składni. Można to zrobić przy pomocy gotowych skryptów (np. GeSHi – http://qbnz.com/highlighter/, SyntaxHighlighter – http://code.google.com/p/syntaxhighlighter/). Jest to bardzo trudna sytuacja, gdyż tekst będzie miał co najmniej kilka kolorów. W związku z tym bardzo ważny jest wybór koloru tła. Jeśli pozwala na to design strony dobrze sprawdzi się ciemnoszare tło z jasnym tekstem głównym i kolorowanymi słowami kluczowymi. Duże odstępy między znakami charakterystyczne dla fontów o stałej szerokości ułatwiają takie postępowanie.
Font do tytułu
Inaczej wygląda wybór fontu do tytułu, loga czy nazwy strony. Może on być zapisany jako obrazek, więc możliwości są praktycznie nieograniczone. Sprawdzą się tu zarówno proste, czyste kroje jak i te bardziej wymyślne – pod warunkiem, że będą czytelne.
Jeśli tekst będzie zapisany jako obraz możliwe jest bardzo dokładne jego sformatowanie. Podczas pisania należy włączyć antyaliasing, zwłaszcza, jeśli tekst jest pochyły. Warto również zmienić odstępy między niektórymi znakami i dokładnie wybrać ich grubość. CSS pozwala jedynie na podstawowe zmiany grubości (w dodatku zwykle wyliczane). Dobre fonty dają zdecydowanie większe możliwości.
Wybierając font na stronę warto zwrócić uwagę na jego przeznaczenie (tytuł, kod, tekst ozdobny) oraz na to, w jaki sposób będzie wyświetlany. Krój tekstu ciągły powinien być możliwie prosty, ponieważ niska rozdzielczość monitora odkrywa wszystkie wady fontu. Dużo większe możliwości dają tytuły, które zapisać można jako obrazki – tu wybór jest ograniczony tylko wyobraźnią projektanta, a uzyskanie perfekcyjnego efektu jest wyjątkowo proste.
Ciekawe czcionki
- Courier / Courier New – najpopularniejszy font o stałej szerokości, choć niezbyt udany. Zwykle ustawiony jako domyślny. Warto zwiększyć jego rozmiar, żaby ukryć „schodki” na pochyłych liniach.
- Inconsolata – darmowy, czytelny font. Dobrze widoczny nawet przy małych rozmiarach i z pogrubieniem. Wszystkie znaki są wyraźnie odróżnialne.
- Sketch Rockwell http://www.abstractfonts.com/font/13135 – idealny krój na tytuł strony. W małych rozmiarach jest niestety nieczytelny.
- Jellyka – Estrya’s Handwriting http://www.dafont.com/jellyka-estrya-s-handwriting.font – najlepszy przykład na to, że pisanki też mogą być czytelne. Font dobry do opisów w menu, podtytułu itp.
- JustOldFashion – http://moorstation.org/typoasis/designers/klein03/text/justold.htm prosty font szeryfowy, który łatwo pozwala osiągnąć zadziwiająco dobry efekt.
- Fontin Sans http://www.josbuivenga.demon.nl/fontinsans.html – elegancki krój dobry do śródtytułów jeśli tylko mamy możliwość użyć go w tym miejscu. Warto zwrócić uwagę na dołączone do zestawu ligatury i znaki pochyłe.
- Fertigo Pro http://www.josbuivenga.demon.nl/fertigo.html – bardzo ładny font z dyskretnymi szeryfami. Można zastosować go w krótkich tekstach ciągłych, śródtytułach itp.
