Czcionka czy font? Poznaj podstawy typografii w projektowaniu stron internetowych
Pojęcia czcionka i font wielu uznaje za synonimy, jednak zdaniem projektantów graficznych to poważny błąd. O ile w świecie wirtualnym możemy mówić o foncie, o tyle czcionka dotyczy tylko publikacji drukowanych. W tym artykule, ze względu na powszechne traktowanie obu wyrazów jak synonimów, będziemy ich użyć zamiennie.
Czcionka jest prostopadłościanem, które tworzy na papierze odbicie znaku pisma (litery, cyfry lub znaku interpunkcyjnego). To właśnie ruchomą czcionkę drukarską wynalazł Jan Gutenberg, co uważa się za jedno z przełomowych wydarzeń w historii świata. Font jest natomiast cyfrowym nośnikiem znaku w postaci bitmapy lub wektorów. Termin ten określa czcionki o wspólnych cechach, które najczęściej zapisuje się w jednym pliku.
Bezszeryfowe czy szeryfowe? Czcionki najlepsze na stronę internetową
Jedne z najchętniej używanych czcionek szeryfowych i bezszeryfowych znajdziesz w popularnych edytorach tekstu, takich jak Microsoft Word czy Libre Office. Porównaj ze sobą czcionkę szeryfową Times New Roman i bezszeryfowy Arial – różnica między nimi jest wyraźna. Litery zapisane czcionką Times New Roman mają charakterystyczne ozdobniki (ukośne lub poprzeczne zakończenie głównych kresek liter) – to właśnie szeryfy. Z kolei litery zapisane Arialem mają oszczędne, proste zakończenia.
Ze względu na sposób, w jaki ludzki mózg przetwarza litery widoczne na papierze lub ekranie, czcionki szeryfowe zaleca się wyłącznie do stosowania w publikacjach drukowanych, takich jak książki, czasopisma, plakaty i ulotki. W przypadku publikacji w Internecie sprawdzą się czcionki bezszeryfowe.
Wiesz już, jaka jest różnica między fontami szeryfowymi i bezszeryfowymi. Poza tym masz świadomość, że wyrazy czcionka i font nie są synonimami. Najwyższy czas zatem zastanowić się, jak znaleźć font odpowiedni na stronę internetową albo do aplikacji mobilnej.
Kiedy wybierasz font, bez wyjątku sprawdzaj, czy dostępny jest tylko w wersji desktopowej, czy również do wyświetlenia w Internecie. Niektóre fonty mogą być przygotowane i do druku, i do wyświetlenia na monitorach. Zawsze korzystaj z nich na zasadach określonych w licencji. Zachowaj czujność zwłaszcza w przypadku darmowych fontów. Część z nich może być wykorzystywana nieodpłatnie wyłącznie w projektach niekomercyjnych. Darmowe fonty znajdziesz m.in. w Google Fonts i Font Squirrel oraz na Czcionki.com. Płatne są dostępne np. w Adobe Fonts, a bezpłatne dla projektów niekomercyjnych – w serwisie DaFont.com.
Najlepsze czcionki na strony internetowe
Wybór webfontu, który dobrze odczytuje się w Internecie, to pierwszy krok do sukcesu. Ważna jest też wierność kilku podstawowym zasadom typograficznym:
- Na stronach internetowych i blogach najlepiej sprawdzają się teksty pisane stopniem pisma w przedziale od 12 do 16 px.
- Interlinia, czyli odstęp pomiędzy wierszami, powinna być większa od stopnia pisma o 2 do 5 px. Reguła jest jednak taka, że im większy stopień pisma, tym interlinia może być mniejsza. Dla przykładu pismo 12 px wymaga interlinii 16 px.
- Nie korzystaj z pism ozdobnych, tzw. pisanek, które naśladują wygląd liter pisanych ludzką ręką. Unikaj również pochyłych krojów, tzw. italików.
- Zwracaj uwagę na rodzinę fontów. W jednej rodzinie mieszczą się odmiany określonego kroju pisma, które – choć z widocznymi różnicami – mają ten sam rytm, styl, proporcje itp. Rodzina fontów może różnić się m.in. grubością i pochyłością. Warto znów zajrzeć do edytora tekstu, aby zobaczyć, jak wiele form mogą przybierać litery zapisane np. czcionką Segoe UI czy Kozuka Gotic Pro. Jedną z najliczniejszych rodzin fontów jest Fira – w serwisie Font Squirrel możesz znaleźć około 100 odmian tego pisma (extra light, light, regular, medium, semibold, black itd.). Użycie różnych fontów z tej samej rodziny ułatwi Ci podkreślenie najważniejszych informacji. Pamiętaj, że do hierarchizacji tekstu z myślą o SEO zamiast większego stopnia pisma i boldu używaj znaczników HTML dla nagłówków.
- Koniecznie szukaj fontów diakrytyzowanych, czyli takich, w których znajdziesz polskie znaki, np. ę i ź.
Najlepsze fonty do Internetu – 5 przykładów
- Myriad Pro od Adobe. Wszystkie linie liter są jednakowej grubości (w typografii określa się to jako mały kontrast), co zwiększa czytelność tekstu. Rodzina zawiera około 40 fontów.
- Futura. To font zaprojektowany w latach 30. XX wieku, który do dziś jest inspiracją dla typografów tworzących nowe kroje. W Polsce na otwartej licencji dostępny jest krój League Spartan, podobny do Futury.
- Helvetica. Jest jednym z najpopularniejszych krojów groteskowych, wzorowanych na kształcie wielkich liter greckich.
- Lato. Dzieło polskiego twórcy Łukasza Dziedzica, dostępne w Google Fonts.
- Roboto. Font upubliczniono w 2015 roku w Google Fonts. Dzisiaj jest podstawowym webfontem w produktach Google zaprojektowanych w stylu Material Design.
Odpowiedni dobór webfontu i wierność zasadom typografii internetowej sprawia, że treść na stronie WWW lub w aplikacji jest łatwiejsza i przyjemniejsza w odbiorze. Warto znać te zasady, jeśli Twoje zainteresowania lub życie zawodowe skupiają się na takich tematach, jak SEO copywriting, UX czy UI design.
Zostaw komentarz