Przeczytaj
Definicja typografii
TypografiaTypografia to jeden z działów grafiki użytkowej, zajmujący się krojami pisma (fontówfontów w przypadku publikacji w sieci). Jest to także element projektu służący do prezentacji treści i tekstów. Prezentacja powinna być estetyczna i czytelna. Strony internetowe powinna cechować prostota, dlatego podczas ich projektowania należy ograniczyć się do maksymalnie dwóch fontów.
Typografia jest ważna również w kontekście budowania świadomości marki (ang. branding). Strona WWW jest wizytówką firmy, a więc powinna być zarówno estetyczna, jak i charakterystyczna, łatwo kojarząca się z marką. Jednym z elementów odpowiedzialnych za taki wygląd strony jest tekst, który musi być nie tylko interesujący, ale też estetyczny, czytelny i dobrze sformatowany.
Tekst na stronie powinien być dostosowany do urządzeń, na których będzie wyświetlany. Warto pamiętać, że na ekranach smartfonów duża czcionka nie wygląda dobrze, a nagłówki nie mogą zajmować więcej niż dwie linie. Gdy zaprojektujesz stronę mobilną, zweryfikuj, jak wygląda na docelowych urządzeniach. Zmruż oczy i zobacz, czy wyróżniają się odpowiednie frazy oraz czy tło nie pogarsza czytelności.
Poszukaj witryny Typ.io. Przyjrzyj się, w jaki sposób twórcy operują fontami. Przeanalizuj użycie fontu ze względu na jego umiejscowienie, dopasowanie do tematyki projektu, ułożenie (odległości między literami, liniami tekstu, akapitami).
Kroje pisma, czyli fonty, służą nie tylko do przekazania treści, ale też są elementami projektu i mogą go wzbogacić – zdarza się nawet, że zastępują w nim grafiki.
Jak powiedział znany grafik Kurt Weidemann (twórca takich logotypów jak: Mercedes‑Benz, Porsche, Deutsche Bahn): „Dobra typografia nie szuka wszystkiego, co jest jeszcze możliwe, ale pyta o to, co jest konieczne”. W myśl tej zasady teksty powinny być czytelne i estetyczne.
Gdy chcemy, aby teksty na stronie były dobrze odbierane przez użytkownika, musimy:
- zachować odstępy między nimi Jednolite teksty, które tworzą ścianę, bardzo szybko męczą oczy i sprawiają, że użytkownik po krótkim czasie opuszcza stronę., wybrać czytelne fonty Najlepiej bezszeryfowe, czyli takie, które pozbawione są ozdobników, np. Arial, Verdana, Georgia., dobrać odpowiednie wielkości liter – zarówno jeśli chodzi o tekst, jak i o nagłówki Polecana wielkość, która jest czytelna, to nie mniej niż 12 pikseli. Dobrze czyta się litery wielkości 14 i 16 pikseli. Czasem warto pokusić się nawet o rozmiar 18 pikseli. Nagłówek powinien mieć powyżej 30 punktów., zachować umiar, jeśli chodzi o ilość umieszczanych informacji Użytkownik woli kilka krótszych tekstów od jednego długiego artykułu., stosować język dopasowany do grupy odbiorczej Sposób formułowania myśli powinien być zrozumiały dla odbiorcy., stosować wyróżnienia Pogrubiaj ważniejsze słowa lub frazy, aby użytkownik, skanując tekst, znalazł to, co go zainteresuje i zachęci do przeczytania całego tekstu. Unikaj przesady. Zbyt duża ilość pogrubień lub tekstu pochyłego (kursywa najczęściej stosowana jest przy cytatach) sprawia, że tekst jest trudny w odbiorze., dobrać odpowiednio kolory Tekst powinien kontrastować z tłem, aby być odpowiednio widoczny, także na małych wyświetlaczach urządzeń mobilnych., poukładać strukturę tekstu
- Zróżnicować wielkości liter w zależności od ważności przekazu – nagłówki H1, H2. Nagłówek H1 powinien stanowić 300% rozmiaru czcionki tekstu głównego. H2 powinien stanowić 200%, np. jeśli tekst główny ma 18 pkt, to H2 powinien mieć wielkość 36 pkt.
- Stosować odpowiednią szerokość linii, liczba znaków w wierszu powinna sięgać maksymalnie ok. 70, a więc szerokość strony A4, np. w dokumencie Word, Libre Office. Optymalna liczba na stronie www to 40-50 znaków. Dobrze, jeśli tekst jest wyrównany, czyli wyjustowany do lewej strony.
- Zachować odstępy miedzy wierszami. Jest to tzw. interlinia – ta zmienna zależna jest od zastosowanej w projekcie czcionki. Sprawdź na początek 140-150% wysokości linii.
- Zachować odpowiednią szerokość beczki, czyli odstępu między literami. Rozciąganie wyrazów często sprawdza się w przypadku nagłówków, które mają także stanowić ciekawy element graficzny na stronie.
- Zachować odstępy między akapitami – podziel tekst na mniejsze, spójne elementy i zachowaj między nimi odstęp między 10 a 20 pikseli.
- Stosować maksymalnie dwa rodzaje fontów, które powinny do siebie pasować. Pamiętaj, że najważniejsza jest czytelność, a więc nie wybieraj zbyt ozdobnych krojów pisma.
- Nie używaj dużych liter w nagłówkach. Bywa, że są trudne do odczytania.
Zachować odstępy między nimi. Jednolite teksty, które tworzą ścianę, bardzo szybko męczą oczy i sprawiają, że użytkownik po krótkim czasie opuszcza stronę.
Wybrać czytelne fonty. Najlepiej bezszeryfowe, czyli takie, które pozbawione są ozdobników, np. Arial, Verdana, Georgia.
Dobrać odpowiednie wielkości liter – zarówno jeśli chodzi o tekst, jak i o nagłówki. Polecana wielkość, która jest czytelna, to nie mniej niż 12 pikseli. Dobrze czyta się litery wielkości 14 i 16 pikseli. Czasem warto pokusić się nawet o rozmiar 18 pikseli. Nagłówek powinien mieć powyżej 30 punktów.
Zachować umiar, jeśli chodzi o ilość umieszczanych informacji. Użytkownik woli kilka krótszych tekstów od jednego długiego artykułu.
Stosować język dopasowany do grupy odbiorczej. Sposób formułowania myśli powinien być zrozumiały dla odbiorcy.
Stosować wyróżnienia. Pogrubiaj ważniejsze słowa lub frazy, aby użytkownik, skanując tekst, znalazł to, co go zainteresuje i zachęci do przeczytania całego tekstu. Unikaj przesady. Zbyt duża ilość pogrubień lub tekstu pochyłego (kursywa najczęściej stosowana jest przy cytatach) sprawia, że tekst jest trudny w odbiorze.
Dobrać odpowiednio kolory. Tekst powinien kontrastować z tłem, aby być odpowiednio widoczny, także na małych wyświetlaczach urządzeń mobilnych.
Poukładać strukturę tekstu:
Zróżnicować wielkości liter w zależności od ważności przekazu – nagłówki H1, H2. Nagłówek H1 powinien stanowić 300% rozmiaru czcionki tekstu głównego. H2 powinien stanowić 200%, np. jeśli tekst główny ma 18 pkt, to H2 powinien mieć wielkość 36 pkt.
Stosować odpowiednią szerokość linii, liczba znaków w wierszu powinna sięgać maksymalnie ok. 70, a więc szerokość strony A4, np. w dokumencie Word, Libre Office. Optymalna liczba na stronie WWW to 40‑50 znaków. Dobrze, jeśli tekst jest wyrównany, czyli wyjustowany do lewej strony.
Zachować odstępy miedzy wierszami. Jest to tzw. interlinia – ta zmienna zależna jest od zastosowanej w projekcie czcionki. Sprawdź na początek 140‑150% wysokości linii.
Zachować odpowiednią szerokość beczki, czyli odstępu między literami. Rozciąganie wyrazów często sprawdza się w przypadku nagłówków, które mają także stanowić ciekawy element graficzny na stronie.
Zachować odstępy między akapitami – podziel tekst na mniejsze, spójne elementy i zachowaj między nimi odstęp między 10 a 20 pikseli.
Stosować maksymalnie dwa rodzaje fontów, które powinny do siebie pasować. Pamiętaj, że najważniejsza jest czytelność, a więc nie wybieraj zbyt ozdobnych krojów pisma.
Nie używaj dużych liter w nagłówkach. Bywa, że są trudne do odczytania.
Na początku pracy z projektem strony WWW, można korzystać z fontów już istniejących, dostępnych w internecie. W miarę zdobywania praktyki, warto tworzyć własne, autorskie fonty, co nada witrynie unikatowy wygląd i wyróżni ją w sieci.
Słownik
zestaw czcionek o konkretnych cechach, zapisanych w postaci elektronicznej w jednym pliku; krój pisma widziany na monitorze, czasem błędnie określany jako czcionka (która to w rzeczywistości jest nośnikiem znaku, metalowym prostopadłościanem stosowanym w druku wypukłym)
jest to zmiana wyglądu tekstu oraz przekształcanie jego fragmentów, np. przez dodanie wyróżnień za pomocą HTML (języka znaczników); ręczne przypisanie cech to formatowanie twarde, a przypisanie stylu tekstu to formatowanie miękkie
litery bez zakończeń, proste bez ozdobników
litery ze spłaszczonymi lub ozdobnymi zakończeniami
kolokwialne określenie pozostawionych na końcu wersu spójników; podczas składu tekstu należy pamiętać, żeby nie zostawiać spójników na końcu wiersza
zbiór zasad odnoszących się do aspektów wizualnych tekstu; ma duże znaczenie w przypadku projektowania stron WWW, identyfikacji graficznej firmy i we wszystkich pracach graficznych