Blog

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Darmowe szkolenie z tworzenia stron internetowych 

Tu dowiesz się, jak zrobić stronę internetową.

Blog

Słowa mają bardzo dużą moc przekazu, ale czasem, aby jeszcze bardziej je uwypuklić, musimy zadbać o kwestie wizualne…i nie chodzi tym razem o ilustracje. 

Typografia to bardzo szerokie pojęcie, które kryje w sobie zarówno wartości czysto techniczne, jak i te artystyczne.

Samo pismo towarzyszy nam już od czasów p.n.e- przykładem może być tutaj pismo sumeryjskie, ale to druk pozwolił na rozprzestrzenienie treści pisanych. Dzisiaj pojęcie typografi jest znacznie bardziej obszerne niż to, które znaliśmy na początku. Co więc takiego się w nim kryje i jaki wpływ ma to na projektowanie? 

Sprawdźmy to!

Typografia- co to

Sama terminologia typograficzna ma swoje korzenie w druku.

Kiedyś nazywano tak tylko i wyłącznie drukarnie lub technikę druku wypukłego.

Teraz typografia określa całą dziedzinę, która skupia się na organizowaniu liter, słów oraz tekstu w prawie każdym kontekście, a więc także aranżowaniu języka w jego wizualnym wymiarze. W związku z tym nie będzie to już tylko i wyłącznie “sztuka drukarska”, a coś na wzór kolaboracji sztuki, komunikacji oraz nauki. 

Między innymi przez to, że projektowanie graficzne przeniosło się do wersji cyfrowej, to to samo stało się też z typografią. Często możemy spotkać się z pojęciami typu typografia cyfrowa czy też typografia internetowa.  

Font czy czcionka

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

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ń doby! 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 samodzielnie. WebWave 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

Koniecznie przeczytaj te artykuły:

• Trendy w web designie na 2022
• Design Thinking- czym jest i jak go wykorzystać
• Jak zrobić własny blog? - Poradnik krok po kroku

Autor: Kaja Rowicka

POZNAJ NAS BLIŻEJ W SIECI

Polub nasz profil na Facebooku, aby otrzymywać powiadomienia o nowych funkcjach, postach na blogu, szkoleniach i materiałach edukacyjnych.

Porozmawiaj z nami na czacie

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

MATERIAŁY

WEBWAVE

DLA KLIENTÓW

OFERTA

KREATOR

KONTAKT

contact@webwavecms.com
+48 731 395 898

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.