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.

Pomoc. 

Oferta. 

Materiały. 

Firma.

Popularne artykuły. 

Jak zrobić sklep internetowy?

Jak zrobić landing page?

Jak zrobić stronę internetową?

Dołącz do ponad 460 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania. 

Zacznij teraz 

Zacznij teraz 

Typografia i jej użycie w web designie.

06 stycznia 2022

Kaja Rowicka 

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 ArialLatoVerdana 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 SugiyamaMonsieur 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 typografi 

 

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.

 

 

Zacznij teraz 

Nie każdy myślnik, to tak naprawdę myślnik

 

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ć. 

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 typografi na 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 wygląd

Nie zmienia to jednak faktu, że to komunikat 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. Należy też sprawdzić czy posiada on polskie znaki (jeśli będą nam one potrzebne). 

 

 

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 samodzielnieWebWave daje nam teraz opcje dodawania ich z dysku. Mogą być one w formacie .ttf, .otf, .woff, .woff2. 

 

Konstrukcja treści na stronie 

 

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:

  • akapitt, 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

  •  

 

Zacznij teraz 

Typografia jako forma sztuki  

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

 

Podsumowanie 

 

Typografia to bardzo rozbudowany temat. Możemy podejść do niej bardziej technicznie lub wykorzystać jej obfitość do stworzenia czegoś na wzór dzieła sztuki. 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:

 

Panel Webmastera

Zarejestruj się

Zaloguj się