Typografia w web designie - jak jej używać?
W wielu przypadkach możemy spotkać się z wymiennym stosowaniem słowa font oraz czcionka. W rzeczywistości dotyczą one dwóch różnych rzeczy. Jaka jest zasadnicza różnica i czy faktycznie traktowanie ich jako synonimy jest błędem karygodnym?
Czcionka
Według definicji słownikowej (Niewielki Słownik Typograficzny) tak naprawdę czcionka to “nośnik pisma w kształcie prostopadłościanu, zwykle metalowego, którego odbicie tworzy znaki pisma. Podstawowy materiał zecerski służący do druku typograficznego”. Jest to więc pojęcie, które ma zastosowanie w druku papierniczym.
Font
Ten sam słownik określa font jako "nośnik pisma w postaci cyfrowego zapisu. Angielskie słowo fount w odniesieniu do druku typograficznego oznacza również komplet czcionek. Cyfrowym odpowiednikiem słownikowej “czcionki” będzie glif.
Oczywiście jak najbardziej zrozumiałe jest to, że osoby niezajmujące się projektowaniem graficznym i typografią będą stosowały te dwa słowa wymiennie. Nie ma w tym nic złego, dopóki nie stanowi to pewnego zgrzytu w komunikacji. W przypadkach stricte zawodowych warto zwrócić uwagę na ich faktyczne przeznaczenie.
Jest jeszcze jedno określenie, które jest równie ważne jeśli mówimy o typografii i co ciekawe w języku angielskim między nim a dwoma powyższymi pojęciami pojawia się identyczny dylemat.
Krój pisma
Według definicji będzie to charakterystyczny kształt graficzny kompletu znaków drukarskich. Obraz graficzny liter, cyfr, znaków interpunkcyjnych i innych jest wspólny dla danego kroju pisma drukarskiego. Cechą typową danego kroju jest jego dukt, czyli rytm grubych i cienkich elementów liter, ich zakończeń, kątów pochylenia, długości dolnych i górnych wydłużeń. Krój pisma ma swoją odrębną nazwę, zarezerwowaną dla danej odmiany. Odmiany krojów pism różnią się grubością elementów, ich pochyleniem, szerokością. Poszczególne odmiany danego kroju pisma tworzą rodzinę. Na jej czele stoi krój pisma w odmianie podstawowej.
Pismo szeryfowe i bezszeryfowe…coś jeszcze?
Pismo szeryfowe (slab serif), to takie, które posiada elementy zdobień (tzw. ornamenty).
Najczęściej stosowane jest ono w przypadku publikacji, które trafią do druku.
Mogą być to np. książki lub katalogi. Przykładem może być tu słynny Times New Roman albo Georgia.
Pismo bezszeryfowe (sans serif), z kolei, będzie pozbawione dodatkowych zdobień przy zakończeniach.
Są one przeważnie stosowane w materiałach, które przedstawione są za pomocą elektronicznych źródeł przekazu.
Dzięki swojej prostszej formie ułatwiają czytelność i przejrzystość treści.
Za przykład posłużyć może nam Arial, Lato, Verdana i stosowany u nas na blogu Inter.
Można powiedzieć, że istnieje też pewnego rodzaju kompromis między tymi dwoma kategoriami i będzie to tzw. pismo semiszeryfowe, które posiada zredukowane
lub lokalnie zanikający szeryf.
Pisankami określamy pisma (i inne znaki typograficzne) naśladujące kaligrafię, czyli takie, które sprawiają wrażenie sporządzonych ręcznie, malowanych.
Z pewnością wpłyną one pozytywnie na estetykę i nadanie tekstowi unikatowego charakteru, ale bardzo często też nie będą na tyle wyraźne, aby można było je łatwo odczytać. Do tej kategorii pisma możemy zaliczyć m.in. Dr Sugiyama, Monsieur La Doulaise lub Caveat Brush.
Istnieje jeszcze więcej odłamów (podkategorii) i będą to m.in. pisma: gotyckie, OCR (optyczne rozpoznawanie znaków), monospacowe (jednakowa szerokość wszystkich elementów typograficznych).
Określenia przydatne w typografii
Jeśli chcielibyśmy poznać dokładniej zakamarki typografii, warto byłoby też poznać słownictwo, które jest w tym zakresie stosowane. Oczywiście nie będziemy tutaj omawiać wszystkiego, ale możemy odkryć znaczenie kilku określeń:
-
Maniskuła to mała litera alfabetu
-
Majuskuła z kolei będzie wielką literą alfabetu
-
Wersaliki, czyli wielkie litery
-
Kapitaliki są zaś niższą wersją wielkich liter. Ich wysokość odpowiada wysokości maniskuł. Stosuje się je na stronach tytułowych, podtytułów etc.
-
Kerning dotyczy modyfikacji w odstępach pomiędzy konkretnymi literami. Częściej spotykanym zabiegiem jest zmniejszanie światła między nimi, ale oczywiście zdarzają się też przypadki, w których odstęp jest zwiększany. Wiele zależy od kroju pisma.
-
Tracking będzie równomiernym manipulowaniem odstępami pomiędzy wszystkimi literami,
-
Justowanie to nic innego jak wyrównywanie tekstu, tak aby w każdym kolejnym wersie zajmował on tą samą długość. Sprawdza się np. w przypadku prasy kolumnowej, ale na stronie internetowej zabieg ten najprawdopodobniej będzie wyglądał już niekorzystnie.
Istnieje wiele sformułowań, które dla osób niewtajemniczonych będzie niczym czarna magia.
Do tych bardziej “kreatywnych” możemy zaliczyć następujące:
-
Wdowa
Pozostawienie np. jednego krótkiego słowa (lub nawet samej jego końcówki) na końcu akapitu (lub łamu).
-
Szewc
Pozostawienie krótkiego słowa (lub jego końcówki) na końcu strony.
-
Bękart
Pozostawienie na początku strony (lub łamu) niepełnego wiersza lub krótkiego słowa.
-
Sierotka
Pozostawienie “samotnego” znaku (np. spójnika), na końcu starego wersu, zamiast przeniesienia go do nowego.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Nie każdy myślnik, to tak naprawdę myślnik - podstawowe zasady typografii
Ciekawostką związaną z typografią może być sposób przedstawienia tzw. przez nas myślnika. Możemy wyróżnić trzy rodzaje. Każdy z nich wygląda trochę inaczej, ma inną nazwę i jest stosowany w innym kontekście.
Dywiz
Jest używany do dzielenia wyrazów. Mogą to być np. nazwy dwuczłonowe lub chociażby złożone nazwiska.
Półpauza
Występuje między wyrazami, w zapisie definicji jakiegoś pojęcia lub zakresów (od do).
Pauza
To znak stosowany przy rozmowach.
np.
— Witam serdecznie. W czym mogę pomóc?
— Dzień dobry! Chciałabym zamówić…
Na klawiaturze widzimy tylko dywiz i najprawdopodobniej dlatego też jest on stosowany przez większość z nas w każdym przypadku. Jeśli jednak chcielibyśmy rozróżnić te trzy charaktery, możemy wejść w Znaki (iOS)/Tablice znaków (Windows) lub po prostu kliknąć dywiz dwukrotnie chcąc uzyskać półpauzę i trzykrotnie pauzę (oczywiście bez spacji).
Typografia i budowanie marki
Budując swoją markę jednym z głównych kroków jest stworzenie brand booka, który m.in. będzie w sobie zawierał ustalenia co do firmowych kolorów, grupy docelowej oraz oczywiście logo. Może ono opierać się na samym sygnecie lub tylko i wyłącznie nazwie zapisanej tekstowo. Bardzo często jednak obydwie te formy łączone są w jedną…ale dlaczego o tym mówimy?
Jak tekst to i udział typografii. Wybór odpowiedniego kroju, stylu pisma etc. będzie tutaj niezwykle istotny, ponieważ stanowi on nasz element reprezentacyjny i powinien być zarówno charakterystyczny, jak i spójny z tym co marka chce przekazać/ zaoferować. Powinien pasować do stylu marki - to jedna z podstaw dobrego projektu.
Jeśli w planach mamy założenie strony internetowej, która miałaby stanowić naszą wizytówkę w sieci, to tutaj również musimy zadbać o wcześniejsze ustalenia- dobrać font tekstów oraz nagłówków, a następnie również zapisać to w brand booku lub ewentualnie w innym oficjalnym dokumencie.
Rola typografii w web designie
Zaczęliśmy już przed chwilą mówić o dobrej typografii na własnej stronie internetowej. Teraz warto tę wiedzę trochę zgłębić.
Oczywiście od tego, w jakim stopniu typografia zawładnie naszą stroną, zależy też samo jej przeznaczenie i cel, jaki chcemy osiągnąć.
W jednym przypadku zdecydowanie bardziej istotna będzie przejrzystość treści, w innym jej oryginalny styl zapisu, a w jeszcze kolejnym sam aspekt wizualny.
Nie zmienia to jednak faktu, że to komunikat całej strony jest najważniejszy.
Projekt naszych treści powinien być tak przemyślany, żeby zwracał szczególną uwagę na najważniejsze informacje. Nie zawsze czytamy wszystko. Odruchowo możemy pomijać część tekstu (lub wybiórcze słowa). Dlatego też tak ważne jest stosowanie się do podstawowych zasad typografii- odpowiednich odstępów, wielkości liter itp. Dzięki temu tekst nie tylko będzie łatwiejszy w odbiorze pod względem jego czytelności, ale też przekazu…a dodatkowo otrzymamy lepsze wrażenie estetyczne.
Gdzie szukać fontów
Najpopularniejszym wyborem jest Google Fonts. To jednak nie jedyna opcja, jaką posiadamy.
Na uwagę zasługują również:
-
MyFonts
-
Envato (należy posiadać konto)
-
1001Fonts
-
Adobe Typekit
-
Dafont
-
The Lost Type Co-Op
Są tutaj zarówno darmowe fonty, jak i te wymagające wykupienia licencji lub posiadania konta z opłaconym pakietem.
Nie zapominajmy, że jeden font będzie miał wiele poziomów np. bold, thin, light itp. Dlatego też warto pobrać “całą rodzinę”, ponieważ do różnych treści najprawdopodobniej przydadzą nam się inne warianty, które wprowadzą spójność do Twojego projektu. Należy też sprawdzić czy posiada on polskie znaki (jeśli będą nam one potrzebne), w końcu znaczącą wpłyną one na czytelność tekstu.
Ilość fontów, jaką znajdziemy na rynku, jest na tyle duża, że sam proces wyboru może nam zająć trochę czasu. Oczywiście możemy postawić na te najpopularniejsze: Arial, Lato, Futura, Helvetica etc. Jeśli chcemy, aby font, jakiego używamy, był jedyny w swoim rodzaju, możemy też stworzyć go samodzielnie. Kreator stron WWW WebWave daje nam teraz opcje dodawania ich z dysku. Mogą być one w formacie .ttf, .otf, .woff, .woff2.
Konstrukcja treści na stronie - interlinie, fonty, wiersze
Tworząc projekt strony, zadbajmy o jego przejrzystość. Mówiliśmy już, jak jest ona ważna dla prawidłowego odbioru treści. Częstym błędem jest pozostawienie treści tekstowych samym sobie (tzw. ściana tekstu).
Możemy tego uniknąć, a to z pewnością nam w tym pomoże:
-
akapit, czyli ustępy tekstów zaczynające się od nowego wiersza wcięcia zazwyczaj na 1 do 2 firetów.
-
nagłówki (n1, n2, n3, n4)- pewnego rodzaju tytuły danej sekcji tekstu- sugerują, co w nim znajdziemy.
-
whitespace, czyli niezaznaczony obszar pomiędzy różnymi elementami strony internetowej (grafikami, kolumnami, tekstem, marginesami itp.). Tworząc przerwy, poprawiamy nie tylko estetykę, ale też i sam obiór oraz skupienie nad przekazem.
-
wykluczenie wszelakich rozpraszaczy w tle ważnego tekstu (np. wzorów i wyostrzonych zdjęć)
-
testowanie rozmiaru i kroju pisma pod względem ich czytelności, powinny być przyjazne dla użytkownika
Typografia jako forma sztuki - jak kreatywnie projektować?
Nie ma wątpliwości, że typografia ma w sobie zalążki sztuki. Niezależnie czy mówimy tutaj o tej, która została “przelana” na papier czy o tej cyfrowej.
Ciekawym jej wykorzystaniem w dziełach graficznych jest, chociażby budowanie ilustracji stawiając wyraźny nacisk na słowa- o tym samym lub różniącym się kroju lub też kompletne skupienie się na tworzeniu tylko i wyłącznie z gliefów.
Trendem, o którym już wspominaliśmy w jednym z artykułów jest też “fontomania” w web designie. Na stronie mogą zastąpić one teraz grafiki umieszczone w górnej części, czyli tzw. headerze. Bardzo często są też komponowane ze zdjęciami w bardziej artystyczny sposób- mogą nachodzić na siebie, być "ciężkie", ułożone w różnych pozycjach, czy też nieproporcjonalne. Odpowiednie wykorzystanie tego stylu potrafi nadać witrynie internetowej charakteru. Staje się bardziej modernistyczna.
Ilustaracja wykonana przez Mike'a Edwards'a - Bowie Handwritten Songs
Typografia w projektowaniu stron internetowych - podsumowanie
Typografia to bardzo rozbudowany i często niedoceniany temat. Możemy podejść do niej bardziej technicznie lub wykorzystać jej obfitość do stworzenia czegoś na wzór dzieła sztuki, co pomoże w dbaniu o wizerunek marki. Wszystko zależy od naszych potrzeb. Podczas projektowania strony nie tylko należy dobrać odpowiednie fonty (do ciągu teksów i nagłówków), ale też warto zadbać o te elementy, które nie są widoczne na pierwszy rzut oka, czyli chociażby odstępy, whitespace etc.
Trzymanie się zasad typograficznych lub też umiejętne ich łamanie może przyczynić się do uatrakcyjnienia strony oraz skłonienia użytkownika, aby został na niej dłużej.
Koniecznie przeczytaj te artykuły:
Kaja Rowicka
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.