Czcionki i fonty - zasady stosowania typografii

Zaktualizowano: 2023-06-08
Czcionki i Typografia w Internecie
Wybór odpowiedniej czcionki oraz ogółem - typografia, mają dziś ogromne znaczenie w projektowaniu stron i aplikacji internetowych. Projektując strony i prowadząc blogi, często zapominamy, że wygląd tekstu jest tak samo ważny jak jego treść. Warto o tym pamiętać, ponieważ tekst nadal jest głównym elementem, na jaki zwracają uwagę użytkownicy.
Zacznij publikować już dziś!
Zarejestruj się bezpłatnie

W projektowaniu stron typografia nadal jest elementem często zaniedbywanym. Wciąż trafiamy na strony internetowe i blogi, które mają świetną treść, ale ze względu na zastosowane czcionki tekst bardzo trudno się czyta, co zniechęca użytkownika do dłuższego pozostania na stronie. Zły dobór czcionek, niewłaściwa szerokość tekstu głównego, za małe lub za duże odstępy między wersami, nadużywanie czcionek szeryfowych i w końcu za duży lub za mały tekst. To podstawowe aspekty, na jakie powinniśmy zwrócić uwagę, chcąc poprawić typografię na własnej witrynie.

W tym artykule chciałabym przybliżyć kilka praktycznych zasad, które warto stosować podczas projektowania swojego bloga lub strony internetowej.
 

Czcionka i font – czy jest jakaś różnica?

Czcionka i font to obecnie pojęcia stosowane wymiennie. Dawniej przez czcionkę rozumieliśmy metalowy bloczek wykorzystywany w tradycyjnej technice drukarskiej, na którym znajdowała się wypukła litera, która następnie dociskana była na papierze.

Czcionki drukarskie

Tradycyjne czcionki drukarskie. Fotografia autorstwa Raphaela Schallera.

Font natomiast jest cyfrową postacią pisma z każdym poszczególnym znakiem zaprojektowanym w formie wektorów lub bitmapy. Ponieważ w środowisku cyfrowym czcionek nie odlewamy ani nie odciskamy, tylko projektujemy fonty w dedykowanych programach (takich jak FontLab), często można usłyszeć głosy, że pojęć „czcionka” i „font” nie należy używać zamiennie. Z drugiej jednak strony, próżno szukać w większości polskich słowników hasła „font”. Równie istotny jest tutaj fakt, że zdecydowana większość internautów wyszukuje fontów właśnie pod frazą „czcionka”.
 

Rodzaje czcionek - czym jest krój pisma

Krój pisma to obraz kompletu znaków pisma o jednolitych i spójnych cechach graficznych: stylu, rytmie, proporcji, kształcie szeryfów itp. Często występuje w wielu odmianach, czasami nawet znacznie różniących się od kroju podstawowego, jednak zawsze zachowujących w sposób konsekwentny główne założenia graficzne danej rodziny krojów.

Czcionki Fira Sans

Przykładem bardzo licznej rodziny fontów jest Fira. W serwisie Font Squirrel znaleźć można około 100 odmian tego kroju.

Kroje pisma możemy sklasyfikować na kilka sposobów. Najpopularniejsze, najbardziej podstawowe rozróżnienie to podział na fonty szeryfowe i bezszeryfowe.

Krój szeryfowy (serif) – szeryfy to elementy ozdobne pisma, kreski stosowane w wielu krojach w celu zwiększenia jego dekoracyjności. Jeśli dany font został zaprojektowany z wykorzystaniem szeryfów, to powinny być one konsekwentnie stosowane w całym zestawie znaków pisarskich danego fontu. Pismo szeryfowe wywodzi się z kutych w kamieniu napisów starożytnego Rzymu, a szeryfy i różnicowana grubość linii symbolizują ślad dłuta kamieniarskiego.

Wyróżniamy kilka podstawowych rodzajów szeryfów:

    • szeryf klinowy w postaci trójkątów (np. Minion),
    • belkowe w postaci jednolitych prostokątów (np. Museo Slab),
    • kreskowe w postaci cienkich kresek, skontrastowanych z główną linią znaku (np. Theano Didot),
    • skryte, czyli nieznaczne poszerzenia na końcach znaków (np. Fontin),
    • niektóre kroje pisma mają również szeryfy występujące na średniej linii znaku.

Krój bezszeryfowy (sans serif) – krój pisma pozbawiony szeryfów. Taki tekst na ekranie komputera sprawdzał się niegdyś lepiej, co wynikało bezpośrednio z niskiej rozdzielczości dostępnych ekranów, a co za tym idzie niedokładnego wyświetlania drobnych szeryfów. Mimo iż współcześnie problem ten raczej nie występuje, to użycie krojów bezszeryfowych w sieci przyjęło się jako swego rodzaju standard, który jednak nie jest powszechnie i bezwzględnie przestrzegany.

Krój szeryfowy
 

Typografia - słowniczek pojęć

Minuskuła – mała litera alfabetu, przeciwieństwo majuskuły, czyli wielkiej litery (przykład).

Wersaliki – wielkie litery, z których składa się całe słowo lub zdanie (PRZYKŁAD).

Kapitaliki – wielkie litery o rozmiarze mniejszym niż wersaliki – zbliżonym do minuskuły bez wydłużeń górnych i dolnych (Przykład).

Ligatury – pojedynczy znak zawierający dwie lub więcej liter określający ich stałą relację przestrzenną (np. fi).

Stopień pisma – jeden z trzech podstawowych parametrów każdej czcionki i fontu. Jest to pionowy wymiar pola znaku, czyli wysokość między dolną linią pisma i linią akcentów wersalikowych (między dolną linią takich liter jak: g, q, p i górną linią wielkich liter akcentowanych: Ć, Ń, Ś). Jest on wyrażany w punktach typograficznych. W typografii komputerowej stopień definiuje się jako odległość pomiędzy sąsiednimi liniami podstawowymi pisma o tym samym kroju (przy odstępie międzywierszowym równym stopniowi pisma).

Firet – względna jednostka miary, równa stopniowi pisma (pole w kształcie kwadratu o boku równym stopniowi pisma).

Interlinia (światło międzywierszowe) – jedna z najważniejszych cech tekstu sformatowanego w DTP. Jest to pusty pas pomiędzy wierszami tekstu liczony jako odstęp pomiędzy dolną linią pisma w wierszu górnym i górną linią pisma w wierszu dolnym. Nie należy mylić z odstępem międzywierszowym (leading), który we współczesnych programach do składu oznacza odległość pomiędzy liniami podstawowymi wierszy (dolnymi liniami pisma).

Linie w typografii

Tracking, zmiana gęstości składu – regulowanie odstępów międzyliterowych. Funkcja dostępna w programach do składu i łamania publikacji, procesorach tekstu oraz innych programach pracujących z tekstem w trybie graficznym.

Kerning – regulowanie odległości pomiędzy konkretnymi parami znaków. Określane w ten sposób są nie tylko odstępy pomiędzy literami, ale także pozostałymi znakami (np. litera-cyfra, cyfra-cyfra, cyfra-znak interpunkcyjny).

Kerning i tracking to sposoby regulowania świateł międzyliterowych – różnica pomiędzy oboma narzędziami polega na skali wprowadzanych zmian. O ile kerning stosujemy raczej w pojedynczych sytuacjach, o tyle tracking można wykorzystywać globalnie, np. dla całego akapitu.
 

8 podstawowych aspektów typografii, na które powinieneś zwrócić uwagę

Reguły typograficzne w designie wbrew pozorom nie są bardzo skomplikowane, lecz ich znajomość może okazać się niezastąpiona. Podstawowa zasada jest taka, że cokolwiek robimy, tekst zawsze musi być łatwy do przeczytania. Pozostałe zasady są jedynie jej rozwinięciem:
 

1. Wielkość fontu

W druku najbardziej komfortowy zakres dla tekstu to 10–12 pkt. W Internecie preferowany zakres wielkości to 15–25 pikseli. Czcionki mimo tego samego stopnia często robią wrażenie mniejszych lub większych, bądź więc przygotowany na ich dostosowanie w razie potrzeby.
 

2. Odległość między wersami (line-height)

Odległość między wersami odgrywa bardzo dużą rolę i w dużej mierze przekłada się na czytelność tekstu. Prawidłowo ustawiona ułatwia czytelnikowi śledzenie tekstu i poprawia jego ogólny wygląd.

Standardowo odległość między wersami powinna wynosić około 120–145% fontu. W edytorach tekstu ustawiając interlinię, użyj opcji „Dokładnie”, aby zmienić ustawienia.

Na odległość między wierszami wpływa sam wygląd używanej czcionki: jej krój, wielkość, grubość, długość linii tekstu. Ważny jest tutaj nie tyle sam stopień pisma, co wysokość średnia (zazwyczaj wysokość małej litery „x”). Ponadto dobrym nawykiem jest dążenie do tego, by światło pomiędzy wersami nie było nigdy mniejsze niż szerokość odstępów międzywyrazowych.

Wybór czcionek do infografiki
 

3. Długość wersu

Długość wersu to pozioma szerokość bloku tekstowego. Długość wiersza powinna wynosić średnio 50–75 znaków w wierszu (użyj funkcji liczenia wyrazów, by to sprawdzić). Za długie linie mogą być zbyt męczące dla oka czytelnika i zakłócać jego rytm czytania. Bardzo wąski tekst jest z kolei akceptowalny tylko w przypadku krótkich tekstów. Generalnie: czytanie tekstu z długimi wersami jest bardziej męczące niż czytanie większej liczby krótkich wersów.
 

4. Długość akapitów

Ponieważ większość internautów nie czyta wszystkich informacji na stronach internetowych, a jedynie skanuje akapity, należy je przemyśleć tak, aby pomóc użytkownikowi zapoznać się z tym, co mamy mu do przekazania. Długie bloki tekstu, bez odstępów, są bardzo nużące dla czytającego, dlatego w Internecie należy stosować krótkie akapity. Ułatwi to odbiorcy analizę tekstu i jego zapamiętanie. Co do zasady poszczególny akapit nie powinien być dłuższy niż 6–8 wersów.
 

5. Text-align

Za pomocą właściwości text-align możemy określić sposób wyrównania tekstu, czyli tego, do której strony zostanie przyciągnięty tekst: prawej czy lewej. Możemy także tekst wyjustować do obu krawędzi lub wyśrodkować. W Internecie w większości przypadków lepiej sprawdzają się chorągiewki (justowanie tekstu może powodować nienaturalnie duże przestrzenie międzywyrazowe, zwłaszcza na stronach responsywnych).
 

6. Liczba czcionek

Zastosowanie czcionek z tej samej rodziny sprawi, że strona internetowa będzie wyglądała spójnie. Zbyt duża różnorodność czcionek wywoła poczucie chaosu. Dobrą zasadą przy wyborze czcionek jest użycie mniej niż 10 wariantów danego fontu. Jednak należy pamiętać o tym, by nie przeładować strony internetowej czcionkami, ponieważ każdy font musi być pobierany i renderowany przez przeglądarkę, więc im więcej ich używamy, tym więcej czasu strona będzie się wczytywać.

Programy ułatwiające zestawianie czcionek

Poszukując ciekawych zestawień fontów na własną stronę czy bloga warto zajrzeć na portale Canva (ilustracja powyżej) oraz Font Pair.

Wybór czcionki powinien być uzależniony od stylu witryny, a wybrane kroje sprawiać, że treść zachowa przejrzystość. By uniknąć wrażenia bałaganu na stronie internetowej, należy dokładnie przestrzegać zasady – im mniej różnorodności w rodzajach czcionek, tym lepiej. Wybierając fonty, należy trzymać się maksymalnie dwóch rodzin (częstą praktyką jest łączenie dwóch mocno różniących się krojów, jednego dla nagłówków, a drugiego dla bloków tekstu). Przykładowo wykorzystując do tekstu głównego czcionkę Roboto, nie dodawajmy akapitów z zupełnie innymi czcionkami szeryfowymi. Zamiast tego warto sprawdzić, czy nie istnieje inna wersja wybranej czcionki (do Roboto możemy dodać np. Roboto Condensed).
 

7. Wybór fontu

Wreszcie wybór czcionki. Najszybsza, najłatwiejsza i najbardziej widoczna poprawa, jaką można wykonać, to zignorowanie większości czcionek systemowych i skorzystanie z profesjonalnego fontu.

Czcionkę możemy wybrać z wielu stocków z fontami. Poniżej lista przykładowych źródeł:

Darmowe czcionki

Darmowe czcionki Google Fonts z polskimi znakami (darmowe)

Google Fonts – wszystkie czcionki (darmowe)

strona główna portalu Google Fonts

Czcionki.com (darmowe)

Font Squirrel (darmowe)

strona główna portalu Font Squirrel

DaFont (darmowe do użytku niekomercyjnego)

Chcąc skorzystać z darmowego fontu każdorazowo należy zapoznać się z jego licencją, gdyż może ona od nas wymagać spełnienia dodatkowych wymagań (np. podania informacji o autorze). Więcej na temat wolnych licencji i praw autorskich w Sieci znaleźć można w naszym bliźniaczym artykule Prawa autorskie w Internecie.

Czcionki płatne

Typekit Adobe (płatne)

8. Unikanie typowych błędów

Choć jest to temat na osobny artykuł, warto pamiętać, by nie popełniać typowych błędów typograficznych, takich jak: podwójne spacje, wiszące spójniki, użycie dywizu zamiast półpauzy, sieroty i wdowy (np. ostatni wers akapitu rozpoczynający nową kolumnę bądź pojedynczy wyraz w ostatnim wersie akapitu).

Ważne jest też zachowanie jasnej i czytelnej hierarchii tekstu. Nagłówki i śródtytuły powinny wyraźnie odróżniać się wielkością od zwykłego bloku tekstu. Efekt ten można wzmocnić poprzez zastosowanie pogrubień bądź w ogóle odmiennego kroju.
 

Jak zainstalować czcionkę?

Instalując czcionkę w systemie Windows po pobraniu jej na dysk twardy komputera i wypakowaniu z pliku archiwum (jeśli była spakowana), należy skopiować ją do folderu „Fonts, znajdującego się w folderze „Windows. Typowe rozszerzenia plików czcionek to: OTF, TTF, rzadziej TTC, PFM.  Łatwiejszy sposób instalacji: po pobraniu pliku klikamy na niego prawym przyciskiem myszy i wybieramy opcję „Zainstaluj”. Czcionka zostanie automatycznie umieszczona w folderze „Fonts”. Po zainstalowaniu czcionek mamy możliwość korzystania z nich w edytorach tekstów i programach graficznych zainstalowanych na komputerze. Zarządzenie dużą liczbą fontów na dysku ułatwiają takie programy jak np. darmowy NexusFont.

Interface programu NexusFont

Interface programu NexusFont

Projektując strony internetowe i blogi, warto zwrócić uwagę nie tylko na grafiki i treść, ale również na sposób prezentacji tekstu. Stosowanie się do zasad typograficznych opisanych powyżej i umiejętny wybór czcionek sprawi, że użytkownicy z łatwością będą mogli zapoznać się z treścią witryny i pozostaną w niej na dłużej. Odpowiednie wykorzystanie typografii jest kluczowym aspektem poprawnie zaprojektowanych stron internetowych i blogów.
 

Zobacz pozostałe artykuły z tej serii:
Zdjęcia i ilustracje w Internecie
Ikona jako narzędzie komunikacji
- Grafika wektorowa i jej zalety
- Barwy w Sieci
- Wszystko o filmach na stronach www
Animacje – czyli jak poprawić wygląd strony lub bloga

  • Autor: Justyna Fabijańczyk

    zwiekszesprzedaz.pl

    Prowadzi agencje content marketingową ODISEO. Autorka książki „Pozyskaj klientów premium”, programu „Jak zwiększyć sprzedaż usług w internecie” i „LinkedIn w praktyce. Strategia pozyskiwania klientów”.

Wasze komentarze (12)
Redakcja WhitePress zastrzega sobie prawo usuwania komentarzy obraźliwych dla innych osób, zawierających słowa wulgarne lub nie odnoszących się merytorycznie do tematu obiektu.

Administratorem danych osobowych osób korzystających ze strony internetowej whitepress.com i wszystkich jej podstron (dalej: Serwis) w rozumieniu Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (dalej: RODO) jest wspólnie „WhitePress” Spółka z ograniczoną odpowiedzialnością z siedzibą w Bielsku – Białej przy ul. Legionów 26/28, wpisana do rejestru przedsiębiorców KRS prowadzonego przez Sąd Rejonowy w Bielsku – Białej, VIII Wydział Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000651339, NIP: 9372667797, REGON: 243400145 oraz pozostałe spółki z Grupy WhitePress (dalej łącznie: Administrator).

Dokonując zapisu na newsletter wyrażacie Państwo zgodę na przesyłanie informacji handlowych za pomocą środków komunikacji elektronicznej, w tym w szczególności poczty elektronicznej, dotyczących marketingu bezpośredniego usług i towarów oferowanych przez WhitePress sp. z o.o. oraz jej zaufanych partnerów handlowych, zainteresowanych marketingiem własnych towarów lub usług. Podstawą prawną przetwarzania Państwa danych osobowych uzasadniony interes Administratora oraz jego partnerów (art. 6 ust. 1 lit. f RODO).

W każdym momencie przysługuje Państwu możliwość wycofania zgody na przetwarzanie Państwa danych osobowych w celach marketingowych. Więcej informacji na temat przetwarzania oraz podstaw przetwarzania Państwa danych osobowych, w tym przysługujących Państwu uprawnień, znajdziecie Państwo w naszej Polityce prywatności.

Czytaj całość
  • Grzesiek

    Dziękuję za bardzo cenne informacje.

    2021-11-24, 07:56
  • nlogo

    Przydatny materiał

    nlogo.pl

    2020-10-01, 14:59
  • mat87

    super artykuł! mam pytanie, czy ewentualnie jak na stronce mam czcionkę i ikonki (powiedzmy koszyk, login do panelu klienta, lista życzeń i inne tego typu ikonki), to są one nieodłączną częścią czcionki, czy może mam możliwość wyboru z jakiejś bazy? dodam, że wykorzystuję czcionkę Muli i szukam odpowiednich ikonek. Słyszałem , że zaczytywanie kilku czcionek do ikon obciąża stronę. To prawda?

    2020-08-04, 14:18
  • -- Zablokowany --

    Komentarz został zablokowany przez redakcję

    2019-09-30, 10:26
  • Łukasz

    Bardzo dobre zestawienie kilku dobrych czcionek oraz dobry opis wykorzystania czcionek

    sklep.metalzbyt.com.pl

    2019-06-30, 20:45
  • Dominika

    Dużo można się od ciebie nauczyć, fajny poradnik dla kogoś kto zaczyna robić coś w kierynku estetycznego pisania tekstów w internecie. Fajnie tłumaczysz, dobrze robisz to co robisz. Pozdrawiam

    managerka.com

    2018-10-15, 10:46
  • Kasia

    Bardzo fajny tekst. Ciekawy jest ten program NexusFont - na pewno się mu przyjrzę ;)
    Typografia rzeczywiście jest bardzo istotna i ma wielki wpływ na odbiór przez co powinna być bardziej doceniana i "dopieszczona".

    chcenawczoraj.pl

    2018-04-19, 14:34
  • Włodek

    Zasady jak najbardziej istnieją i są najczęściej opisane w różnego rodzaju słownikach i podręcznikach typografii. Ze swej strony gorąco polecam poradnię językową PWN.
    Przenoszenie wyrazów podlega regułom charakterystycznym dla danego języka, a więc inaczej będziemy dzielić słowa polskie, a inaczej angielskie. Niestety w polskich realiach obserwuje się często rezygnację z przenoszenia wyrazów w materiałach reklamowych, co czasem daje niezbyt dobre efekty – np. nienaturalnie duże odstępy międzywyrazowe. Wiele z istniejących reguł (zarówno językowych, jak i tych dot. składu) powstało właśnie po to by ułatwić czytelnikowi odbiór tekstu. Warto się wiec kilka razy zastanowić zanim się z którejś świadomie zrezygnuje. :) Z nowszych podręczników dot. składu polecam "typografię książki" wydawnictwa d2d.
    W przypadku reklam zawierających niewiele tekstu można jednak oczywiście pozwolić sobie na trochę więcej swobody. Dobrze jest mieć jednak zawsze na uwadze kwestię czytelności.

    2017-09-26, 14:27
  • Statlook

    Dobry poradnik dla początkujących. Nurtuje mnie, czy są jakieś zasady, którymi warto się kierować przy tworzeniu grafik z napisami (np. jak przenosić wyrazy)? Zakładam,że są ;)

    statlook.com

    2017-09-25, 10:35
  • Marcin

    Bardzo dobry poradnik na początek przygody z typografią.

    globallink.pl

    2017-06-27, 18:12
  • Adam Mąka

    @Małgorzata: Czcionkę po pobraniu należy jeszcze zainstalować w systemie operacyjnym (w Windowsie najłatwiej zrobić to poprzez kliknięcie prawym przyciskiem myszy na plik z fontem i wybranie opcji "zainstaluj"). Po zainstalowaniu czcionka powinna być od razu dostępna w większości współczesnych programów graficznych (w tym również w najnowszym Gimpie). Jeżeli jednak z jakichś powodów sposób ten by nie zadziałał, bądź chcielibyśmy aby dany font dostępny był jedynie w Gimpie, a nie w całym systemie, możemy nasz plik skopiować do folderu wykorzystywanego wyłącznie przez program - domyślna ścieżka w Windows to: dysk systemowy (C:)/Użytkownicy/Twoja nazwa użytkownika/gimp-2.8/fonts

    whitepress.pl

    2017-06-15, 12:27
  • Małgorzata

    Tak dla ścisłości - jak ściągnę czcionkę to podczas używania np. gimpa ona już tam będzie zainstalowana czy muszę ją jeszcze pobrać?

    gaudium.com.pl

    2017-06-14, 15:37
Polecane artykuły
Siła Topic Cluster w pozycjonowaniu witryny - strategia planowania treści

Planowanie treści to kluczowy etap, który często decyduje o ich późniejszym sukcesie. Algorytmy wyszukiwarek nieustannie się zmieniają, jednak jedna rzecz pozostaje niezmienna. Topic clustery, które w kontekście SEO czy pozycjonowania publikowanych w sieci treści, odgrywają bardzo ważną rolę. Czym są, w jaki sposób je tworzyć i jak prawidłowo implementować je w tworzonych treściach - tego dowiesz się z tego artykułu.

Newsletter
Co to jest newsletter i jak go tworzyć? Dobre praktyki prowadzenia newslettera

Newsletterom nie zaszkodziły ani media społecznościowe, ani rozwój mobile marketingu. Wręcz przeciwnie. Wykorzystując efekt synergii, można uczynić z nich nie tylko najskuteczniejsze narzędzie sprzedażowe, ale też znakomitą metodę dystrybucji contentu. A co więcej – odpowiednio zaprojektowany newsletter sam w sobie może stanowić wartościowy content i źródło pozytywnego doświadczenia marki.