Często zwracamy ogromną uwagę na to, co piszemy. Staramy się możliwie barwnie ubrać w słowa nasze myśli, tak aby możliwie najlepiej trafić z naszym przekazem do odbiorcy. Stosujemy różnego rodzaju zabiegi literackie, takie jak metafory, parafrazy i wiele innych. Ale czy zdajemy sobie sprawę z tego jak ważny jest krój naszych fontów?

Każdy UX designer wie, że ludzie kupują oczami. Zastosowany krój pisma ma zasadnicze znaczenie w odbiorze tekstu. Wyobraźmy sobie sytuację, w której musimy czytać znaki informacyjne pięknym, baśniowym fontem, gdzie każda litera ma ogromny „wywijas”. Znak informacyjny nie jest od podziwiania, znak informacyjny jest od szybkiego przekazywania informacji, a zatem komunikat musi być czytelny i prosty.

Typografia

Słowo typografia w dawnych czasach używane było do określania drukarni lub też samego procesu drukowania. Dziś po pojęciem typografii bardzo często rozumiemy wszystko to, co związane jest z wizualnym aspektem tekstu. W zasadzie sprowadza się to do tego, aby tekst był maksymalnie czytelny i odpowiednio oddawał cechy przekazywanych treści. Zwróćmy uwagę na fakt, że tekst towarzyszy nam w zasadzie wszędzie - począwszy od książek, artykułów, poprzez znaki informacyjne, instrukcje, programy telewizyjne, logotypy, strony internetowe. Najpopularniejszą definicją typografii jest ta określona przez Department of Typography and Graphic Communication Uniwersytetu w Reading, która wskazuje, że typografia to projektowanie ułatwiające czytanie i odbiór.

Nic więc dziwnego, że nośniki informacji jakimi są strony internetowe również wykorzystują typografię - oczywiście w troszkę odmiennej formie, dostosowanej do środka przekazu, wzbogaconej o pewne dodatkowe zasady. Dla frontend developera nie wszystkie z nich będą istotne, ale warto o nich wiedzieć - chociażby dlatego, że ułatwia to współpracę z projektantami interfejsów stron www i aplikacji.

Font czy czcionka?

Zanim przejdę do kolejnych części omawianego tematu chciałbym zwrócić uwagę na dość ważny aspekt. Font czy czcionka - obie te nazwy są używane zamiennie w języku potocznym, ale warto wiedzieć, że są to zupełnie inne rzeczy.

Po pierwsze czcionka (z angielskiego type) to malutkie metalowe kostki z wypukłymi literami, które kiedyś były wykorzystywane przez zecerów. Zecer to specjalista, który ręcznie układał czcionki w odpowiednie sekwencje, tak aby przygotować publikację do druku.

Font natomiast to cyfrowy odpowiednik zestawu czcionek. Innymi słowy jest to plik, który zawiera informacje o kształcie liter i znaków w ramach jednego kroju pisma. Krój pisma (z angielskiego typeface) to zbiorcza nazwa czcionek z jednej rodziny, np. Arial czy Times New Roman.

Stąd też opór specjalistów - font to nie czcionka. Zwróćmy uwagę, że nawet właściwości css związane z krojem pisma zaczynają się od słowa font, a nie type.

Jak to powinno wyglądać?

Designer najczęściej zaczyna swoją pracę od rozplanowania struktury treści. Idealnie, gdy teksty są przygotowane wcześniej. Wówczas na podstawie ich ilości i tego, co chcemy zaprezentować - podejmuje decyzje o rozkładzie, akapitach, śródtytułach. Wbrew pozorom jest to bardzo istotne np. jak, i w jakiej kolejności ponumerujemy nagłówki (od h1 do h6). Na tej podstawie decyduje też o interlinii. Odległość pomiędzy poszczególnymi liniami jest bardzo istotna - za mała spowoduje, że kolejne linie będą się na siebie nakładać, za duża sprawi, że tekst stanie się trudny w odbiorze.

Kolejny element, o którym należy pamiętać to długość linii. Według badań, idealna ilość znaków w linii powinna się mieścić w przedziale od 50 do 75. Dłuższe linie męczą użytkownika (przede wszystkim oczy) i powodują, że gubi się on podczas czytania (zaburzają rytm czytania).

Innym istotnym aspektem jest także wyrównywanie tekstu. Bardzo kuszące dla nas jest wyrównywanie do obu krawędzi, ale tak naprawdę wywołuje to efekt odwrotny od pożądanego - męczy czytelnika zamiast mu pomóc. Pomimo, że wydaje się to zabieg czysto estetyczny, to tak nie jest. Wyrównywać powinniśmy do strony, od której czytamy. W Europie najczęściej będzie to wyrównanie do lewej, w krajach arabskich do prawej.

Innym ważnym zagadnieniem jest dobór kolorów. I jak to zazwyczaj bywa - less is more. Kolorów powinno być mało i powinny być dobrze kontrastujące z tłem.

Ogólnie opisałem najistotniejsze elementy typografii na stronie www. Pozostał zatem tylko jeden problem, który jest tematem niniejszego artykułu - fonty.

Antykwa

Kroje pisma, które opierają się o alfabet łaciński nazywane są antykwą. Antykwa jest najczęściej stosowana we wszelkiego rodzaju materiałach drukowanych w językach wywodzących się od języka łacińskiego. Przed wprowadzeniem antykwy stosowano najczęściej pismo gotyckie. Co ciekawe wielkie litery w antykwie wywodzą się z pisma monumentalnego starożytnego Rzymu, a małe z pisma kodeksowego z czasów Karola Wielkiego. Antykwa powstała w tych samych czasach, w których Gutenberg opracował technologię druku z wykorzystaniem ruchomych czcionek. Pomimo, że nie była wówczas najpopularniejsza to dość szybko wyparła pismo gotyckie.

Współczesne kroje pisma nie przypominają klasycznych antykw. Zalicza się do nich jednak kroje szeryfowe i bezszeryfowe, które są dziś tak powszechne.

Rodzina szeryfów

Kroje szeryfowe to kroje, których litery zawierają ozdobniki w postaci poziomych i pionowych kresek. Stosowane są najczęściej w materiałach drukowanych - książkach i gazetach. W Internecie fonty szeryfowe raczej nie nadają się do dłuższych bloków tekstu - utrudniają odbiór. Pamiętajmy, że użytkownik określa czy dany materiał w sieci jest interesujący w czasie około 3 sekund.

Bardzo popularnym pomysłem jest stosowanie szeryfów do tytułów i nagłówków, aby podkreślić ich ważność. Zupełnie odwrotnie niż w przypadku druku.

Możemy wyróżnić cztery rodzaje szeryfów - belkowe (np. Rockwell), klinowe (np. Times New Roman), kreskowe (np. Bodoni) oraz skryte (np. Fontin). Wyżej wymienione kroje istnieją z nami już dość długo. Przykładowo najbardziej chyba znany font szeryfowy, czyli wspomniany Times New Roman został zaprojektowany w 1932 roku. Bodoni natomiast pochodzi z lat 80. XVIII wieku. Co ciekawe, pomimo, że upłynęło prawie 250 lat od jego powstania, nadal jest chętnie wykorzystywany, np. w nagłówkach magazynu Vogue.

Rodzina bezszeryfowa

Przeciwieństwem krojów z rodziny szeryfowej są kroje bezszeryfowe. Charakteryzuje je prostota, nie mają żadnych ozdobników i stawiają na jednolitą grubość linii. Przykładowe fonty, które należą do tej rodziny to Arial czy Helvetica.

Arial został zaprojektowany w 1982 roku. Helvetica jest troszkę starsza - pochodzi z 1957 roku. Oba powyższe są krojami proporcjonalnymi, co oznacza że szerokość poszczególnych czcionek zależy od naturalnego kształtu liter. Innym krojem bezszeryfowym, ale nieproporcjonalnym jest Courier. Courier z racji pochodzenia może być już bliższy branży IT, ponieważ został zaprojektowany na zamówienie firmy IBM … w latach 50. Natomiast jednym z pierwszych fontów bezszeryfowych jest Futura, która została stworzona w 1928 roku. Wcześniej formy bez szeryfów też istniały - były to np. runy nordyckie, ale oficjalnie nie uznaje się ich jako przynależne do tej rodziny.

Pierwotnie bezszeryfowe fonty były uznawane kontrowersyjne i budziły sporo sprzecznych emocji. Określano je jako groteskowe.

Inne kroje użytkowe

Dwa powyższe kroje pisma są najczęściej wykorzystywane zarówno w materiałach drukowanych, jak i internetowych. Możemy wyróżnić jeszcze inne kroje: krój dekoracyjny, pisanka kaligraficzna (czyli pismo odręczne), a także Egipcjankę (odmiana kroju szeryfowego - w przeciwieństwie do niego ma jednolitą grubość linii). Przykładem Egipcjanki jest np. krój Memphis (zaprojektowany w 1929 roku). Rodzajów jest bardzo dużo, pomimo że wymieniłem tylko kilka z nich - widać różnorodność. Każdy krój ma swoje specyficzne cechy i pasuje do innego rodzaju treści. Przykładowo fonty bezszeryfowe najczęściej wybierane są przez branżę finansową, ponieważ są konkretne i proste, a tak ta branża chce się pozycjonować w oczach klientów.

Warto przeczytać w tym temacie

David Kadavy

Design dla Hakerów. Sekrety genialnych projektów.

Kup

poprzez

Rodziny generyczne w CSS

Podczas tworzenia stron internetowych ustawienia fontów dokonywane są z poziomu kodu CSS. CSS zawiera kilka właściwości odpowiedzialnych za deklarowanie rodzaju fontu, jego stylu, grubości itd. Jedna z właściwości, która nas interesuje z perspektywy tego artykułu to font-family. Właściwość ta przyjmuje jako wartości fonty, które mają być wykorzystane do wyświetlenia danego tekstu. Rozpoznaje ona natomiast dwa typy wartości. Po pierwsze są to tak zwane family name, czyli nazwy konkretnych krojów, np. „Arial” czy „Times New Roman”. Po drugie mogą przyjąć tak zwane nazwy generyczne, czyli nazwy które określą jaki rodzaj kroju ma być użyty, np. serif (szeryfowe), sans-serif (bezszeryfowe), monospace, cursive, fantasy, system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, math, emoji i fangsong.

Mechanizm fontów generycznych zabezpiecza projekt przed wykorzystaniem domyślnego fontu, gdy ten wskazany będzie niedostępny na urządzeniu użytkownika. Przykładowo, jeśli chcemy, aby nasz tekst był napisany fontem Consolas, ale odbiorca nie będzie miał tego fontu u siebie na komputerze, wówczas możemy wskazać, żeby został użyty inny font z rodziny monospace. Idąc tropem dat powstania dodajmy, że Consolas jest fontem dość młodym, wszak ma zaledwie 16 lat.

W css mogłoby to wyglądać następująco:

Podając kilka fontów możemy ustalić hierarchię ich ważności. W powyższym przykładzie przeglądarka spróbuje użyć Consolas, jeśli nie go nie odnajdzie, wówczas Lucida, a jeśli i tego nie odnajdzie, to skorzysta z domyślnego fontu dla rodziny monospace.

Podsumowanie

I nagle okazuje się, że z rodzin fontów możemy zrobić wielkie drzewo genealogiczne, gdzie różne gałęzie się przenikają i rozchodzą na zmianę. Możliwości łączenia ich jest całe mnóstwo. Najważniejsze to nauczyć się odczytywać emocje z nimi związane i odpowiednio dobierać je do projektu, który tworzymy - czy to będąc designerem czy programistą. Najciekawsze projekty mieszają ze sobą różne rodziny i osiągają przez to najlepsze efekty. Jeśli dołożymy do tego zasady, o których wspomniałem na początku tego artykułu - to możemy osiągnąć efekt, który wzmocni nasz przekaz, opowie o naszych emocjach i wywoła oczekiwany przez nas efekt.