Liternictwo i typografia cz. III – praca z tekstem

Witam w kolejnym wpisie dotyczącym typografii i liternictwa. Jak dotąd zaznajomiliśmy się z podstawami typografii oraz parowania fontów, poznaliśmy różnicę między fontem a czcionką, dowiedzieliśmy się, czym są linie pisma oraz znaki diakrytyczne, a także jak wygląda anatomia litery. Wiemy też już co nieco na temat klasyfikacji krojów pisma. Dziś chciałabym zwrócić uwagę na to, jak wygląda publikowany przez nas tekst w internecie.

Projektując strony, prowadząc blogi, czy nawet przygotowując tekst do druku, często zapominamy, że jego wygląd jest równie ważny jak treść. Warto o tym pamiętać, ponieważ  jest on głównym elementem, na jaki zwracają uwagę czytelnicy. Wciąż trafiamy na strony, które mają świetną, merytoryczną treść, ale są nieczytelne i chaotyczne, co zniechęca użytkowników do dłuższego pozostania na stronie. Nieodpowiedni dobór fontów, złe ustawienia interlinii, niewłaściwa szerokość tekstu głównego, zbyt duży bądź zbyt mały tekst, to tylko część problemów, z którymi stykają się użytkownicy naszej strony. Na początek zapoznajmy się z najważniejszymi pojęciami związanymi z formatowaniem i przygotowaniem tekstu.

Światło

Określenie każdego pustego miejsca pomiędzy elementami tekstowymi lub graficznymi. W typografii światłem są puste fragmenty strony, marginesy, odstępy między tekstem, poszczególnymi słowami, literami, a także przestrzeń wewnątrz liter. Światła są niezbędne, aby informacja tekstowo-graficzna prezentowała się w sposób estetyczny i funkcjonalny. Zbyt duże zagęszczenie elementów utrudnia użytkownikom odbiór przekazu.

Do świateł zaliczamy:

  • światła międzyznakowe
  • światła międzyzdaniowe
  • światła międzywierszowe
  • światła międzyakapitowe
  • światła międzyłamowe
  • marginesy kolumn
  • oraz wszelkie odstępy pomiędzy elementami graficznymi

Kerning

Regulowanie światła (odstępów) pomiędzy konkretnymi parami znaków, poprzez zmianę odległości między nimi. Wyróżniamy kerning ujemny i dodatni. Najczęściej stosujemy kerning ujemny, czyli dosuwanie do siebie znaków, które wyglądają na nienaturalnie oddalone. Kerningiem dodatnim jest odsuwanie od siebie znaków sprawiających wrażenie zbyt ściśniętych, czyli położonych zbyt blisko siebie. Stosowanie kerningu ma fundamentalne znaczenie przy projektowaniu logotypów oraz we wszystkich innych zastosowaniach literniczych.

Tracking

Zmiana gęstości składu – regulowanie odstępów międzyliterowych. Parametr, który tracking zmienia, to światła międzyliterowe,  chodzi tu nie tylko o odległości pomiędzy literami, lecz także o odległości pomiędzy wszystkimi znakami, w tym także znakami niedrukowalnymi. Stosowanie trackingu nie wpływa na szerokość samych znaków.

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.

Interlinia

Inaczej światło międzywierszowe. Jest to odległość między sąsiednimi wierszami tekstu liczona 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).

Na co zwrócić uwagę

  • Wielkość fontów
    W druku najbardziej komfortowy dla czytelnika zakres tekstu to 10–12 pkt. W internecie preferowany zakres wielkości to 15–25 px.  Fonty pomimo tego samego stopnia często robią wrażenie mniejszych lub większych, bądź więc przygotowany na ich dostosowanie w razie potrzeby.
  • Liczba używanych krojów
    Ilość różnych rodzin fontów dobieranych na stronie powinna być jak najmniejsza, dla estetyki warto zadowolić się dwoma rodzinami (częstą praktyką jest łączenie dwóch kontrastujących ze sobą krojów, jednego dla nagłówków, a drugiego dla bloków tekstu). Tak naprawdę wystarczy jeden dobrze zaprojektowany font z wieloma odmianami, który posiada kapitaliki i cyfry nautyczne. Zastosowanie fontów z tej samej rodziny sprawi, że strona będzie wyglądała spójnie. Zbyt duża różnorodność wywoła poczucie chaosu i zmniejszy czytelność strony.
  • Dobrze zestawione kroje pisma
    Kiedy naprawdę potrzebujesz wykorzystać więcej niż jeden font, uważnie wybierz swój zestaw. Jeśli zdecydujesz się na dwa fonty, które są do siebie zbyt podobne, stworzysz wrażenie chaosu i nieporządku. Postaw na wyraźny kontrast. Wykorzystaj drugi font, aby podkreślić hierarchię tekstu. Więcej informacji o zasadach parowania fontów przeczytasz w osobnym, poświęconym temu tematowi, artykule.
  • Nie rozciągaj fontów!
    Krój pisma został starannie zaprojektowany, odległości i proporcje poszczególnych elementów nie są dziełem przypadku. Kiedy rozciągasz font, zaburzasz jego proporcje!
  • Kontrast czcionki i tła
    Czytaniu tekstu najlepiej sprzyja czarny tekst pisany na jasnym tle.
  • Światła
    Interlinia odgrywa bardzo dużą rolę i w dużej mierze przekłada się na czytelność tekstu. Ustawiona prawidłowo ułatwia czytelnikowi śledzenie tekstu i poprawia jego ogólny wygląd. Odległość pomiędzy wersami powinna wynosić około 120–145% fontu.  Światło jest pomocne w uzyskaniu rytmu. Wyważone, równomierne odstępy, dodają projektowi elegancji, natomiast światło kontrastowe, nierównomierne nadaje dynamiki.
  • Długość wersu
    Długość wiersza powinna wynosić średnio 50–75 znaków w wierszu. Zbyt długie linie mogą być 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.
  • Długość akapitów
    Długie bloki tekstu  są bardzo nużące dla czytającego, dlatego w internecie należy stosować krótkie akapity. Ułatwi to analizę tekstu i jego zapamiętanie. Akapit nie powinien być dłuższy niż 6–8 wersów.
  • Wyrównanie tekstu
    Za pomocą właściwości text-align możemy określić sposób wyrównania tekstu, które obejmuje przyciągnięcie tekstu do prawej lub lewej strony, wyśrodkowanie i justowanie. Zasadniczo, w internecie tekst nie powinien być justowany (szczególnie w stronach responsywnych – różna szerokość urządzenia, z którego korzystamy, sprawi, że tekst będzie się układał w zupełnie inny sposób). Przez justowanie trudniej jest przeskakiwać wzrokiem do nowych linii, a w wąskich kolumnach powstaje dużo pustej przestrzeni. Lepiej sprawdzi się tutaj stosowanie chorągiewek.
  • Hierarchia nagłówków
    Kolejnym istotnym problemem stron jest niedostateczne zaakcentowanie na niej hierarchii nagłówków oraz ich zróżnicowania. Ważne jest zachowanie jasnej i czytelnej hierarchii tekstu. Ponadto warto zadbać  w tekście o poprawną gramatykę i zwracać uwagę na błędy ortograficzne.

Jak widać, sposób przygotowania tekstu na stronach internetowych w wielu przypadkach może przesądzić o tym, czy dana osoba zostanie na danej witrynie, czy też ją opuści. Teksty są absolutnie kluczowym elementem treści, zatem należy o nie dbać. Zapraszam niedługo na kolejny wpis, w którym dowiecie się więcej na temat składu tekstu do druku, poruszymy między innymi pojęcia takie jak: łam, kolumna, bękart, wdowa szewc i sierota.