Kerning, śledzenie i prowadzenie: prosty przewodnik po skutecznym krojach pisma

Projektując dla sieci, zawsze musisz pamiętać o jednej rzeczy: czytelności. Nie ma znaczenia, jak wspaniały jest projekt, jak wspaniały jest twój układ lub jak genialne jest użycie kolorów. Jeśli ludzie nie potrafią odczytać słów na ekranie (i to oczywiście przy założeniu, że na ekranie są słowa), strona internetowa nie może spełniać swojej funkcji. Trzy z najważniejszych elementów czytelności tekstu to kerning, śledzenie i interakcja, chociaż wiele osób albo je myli, albo po prostu nie rozumie, jak skutecznie z nich korzystać. Zamierzamy to naprawić dzisiaj.

Kerning, śledzenie i prowadzenie

Jeśli sprowadzisz te trzy do absolutnych podstaw, spojrzysz na odstępy między znakami na obu osiach X i Y. Zagłębiając się, zobaczysz, że jest w tym coś więcej, ale w istocie patrzysz na relacje między znakami tekstu. Ważne jest, aby zrozumieć związek między tymi trzema atrybutami, ponieważ dobry projekt i czytelność zależą od korzystania z nich najlepiej, jak potrafisz.

A to przychodzi z czasem i praktyką. Ale kiedy zaczniesz zwracać na nie uwagę, zauważysz, że kerning, śledzenie i prowadzenie są wykorzystywane zarówno skutecznie, jak i słabo we wszystkim, co codziennie czytasz i widzisz. Zagłębmy się.

Dostosowywanie kerningu, prowadzenia i śledzenia (i więcej!)

Właściwie, zanim się zagłębimy, przyjrzyjmy się, jak zmienić i dostosować te ustawienia. Podczas gdy większość programów do edycji tekstu ma opcje ich dostosowywania, większość ludzi nigdy nie będzie tego potrzebować podczas pisania kopii lub typowego tekstu. To właśnie podczas projektowania tekstu staje się on większym problemem, więc programy takie jak Photoshop, Illustrator itp. będą miały opcje, których potrzebujesz najbardziej.

W produktach Adobe wystarczy otworzyć panel znaków warstwy tekstowej i masz wszystko, czego potrzebujesz. V/A to kerning, VA w ramce śledzi, a podkreślone, pionowe litery A są wiodące. W tym panelu możesz także dostosować przekreślenie, wagę, rozmiar, indeks górny/dolny i wiele więcej. Warto się do tego przyzwyczaić.

Po prostu umieść kursor w miejscu, w którym musisz dostosować odstępy i idź.

Co to jest kerning?

Zacznijmy od kerningu . Kerning jest tak naprawdę najprostszym z trzech. Jest to spacja między dwoma sąsiadującymi ze sobą znakami. Jednym słowem, możesz mieć zmienny kerning, ponieważ odstęp między dwiema pierwszymi literami może być inny niż między dwiema ostatnimi (i tak dalej).

W czcionkach o stałej szerokości każdy znak zajmuje dokładnie taką samą ilość miejsca w poziomie bez nakładania się. A ma taką samą szerokość jak B, jak J i K. Regulacja kerningu między tymi literami jest zwykle łatwiejsza niż czcionki o zmiennym odstępie, w których litery mogą się nakładać, a także drukować na różnych szerokościach.

W powyższym przykładzie mamy trzy wiersze, które zostały skopiowane i wklejone przy użyciu czcionki o stałej szerokości Courier New . Kerning w górnym wierszu jest ustawiony na 0, co jest wartością domyślną i wykorzystuje odstępy wybrane przez projektanta czcionki. Drugi wiersz jest ustawiony równo między literami (i spacjami) na 200. Jak widać, spacje między znakami w linii są jednakowe. Wreszcie trzecia linia została losowo kerowana z odstępami dodatnimi i ujemnymi w każdym pojedynczym słowie. Jak widać, każdy znak może mieć z każdej strony inny kerning.

Co to jest śledzenie?

Śledzenie jest podobne do kerningu, ale nie jest kerningiem. Tam, gdzie kerning jest przestrzenią między dwoma pojedynczymi znakami, śledzenie jest jednolitą przestrzenią między każdym pojedynczym słowem lub wierszem. Zamiast martwić się o to, jak wszystko układa się litera po literze, jak w przypadku kerningu, upewnij się, że cała linia jest równomiernie rozmieszczona. Patrząc wstecz na wcześniejszy przykładowy obraz, drugą linię można było zrobić w znacznie prostszy sposób.

To, co zrobiłem dla kerningu, polegało na umieszczeniu kursora między poszczególnymi znakami i dostosowaniu do 200. Zasadniczo śledziłem całą linię. Co powinieneś zrobić. Po prostu zaznacz to, co chcesz śledzić i dostosuj to w panelu postaci.

Należy jednak pamiętać, że niektóre czcionki i skrypty mogą stać się nieczytelne po dostosowaniu śledzenia.

Czcionki pisma ręcznego i kursywa są ustawione z określonym kerningiem, a jeśli dostosujesz śledzenie, uzyskasz przerwy w nieprzerwanej linii. Lub idąc w innym kierunku, aby skompresować wiersze, możesz po prostu uczynić skrypt nieczytelnym.

Co to jest prowadzenie?

Dzięki Leading nie masz już do czynienia z odstępami między znakami. Leading to przestrzeń między liniami.

Efektywne wykorzystanie wiodących pozwala efektywnie wykorzystać białe znaki w swoich projektach. Ciasne linie — nawet przy poprawnym i dobrze wykonanym kerningu/śledzeniu — mogą być nieprzyjemnym doświadczeniem dla czytelników.

W niektórych miejscach możesz zobaczyć interlinię nazywaną wysokością linii , ale to mniej więcej to samo. Jedną z dobrych zasad jest upewnienie się, że zostawiasz przynajmniej trochę miejsca nad i pod postaciami. Jak widać w górnym przykładzie, czcionka 40px ma wysokość linii 48px. Oznacza to, że bez względu na wszystko, między literami będą odstępy. Jeśli ustawisz to na lub mniej niż rozmiar czcionki, otrzymasz nakładanie się znaków.

Dodatkowo jest to wysokość linii, na której siedzą postacie. To nie jest wysokość postaci . Tak jak kerning i śledzenie nie czynią postaci grubszymi ani cieńszymi, tak samo śledzenie nie czyni ich krótszymi ani wyższymi. To po prostu przestrzeń wokół nich.

Jak jednak widać, opcje pod kerningiem/śledzeniem w panelu znaków programu Photoshop dostosowują szerokość/wysokość znaków niezależnie od kerningu, śledzenia i interlinii.

Skróty klawiaturowe w programie Photoshop/Illustrator

Jedynym minusem panelu postaci jest to, że staje się dość irytujący, gdy potrzebujesz precyzyjnej regulacji. Na szczęście istnieją skróty klawiaturowe, które sprawiają, że kerning, śledzenie i prowadzenie są absolutne w użyciu.

Te skróty dotyczą pakietu Adobe Creative Cloud, więc mogą się różnić w Gimp, Paint.NET lub innym programie.

• Kerning — gdy kursor znajduje się między dwoma znakami, przytrzymaj ALT (lub Option na Macu) i użyj strzałek w lewo/w prawo, aby dostosować kerning
• Śledzenie - Po podświetleniu słowa / linii przytrzymaj ALT (lub Option na Macu) i użyj strzałek w prawo / w lewo, aby dostosować śledzenie podświetlonego tekstu
• Leading – Zaznacz linie, które chcesz dostosować, przytrzymaj ALT (lub Option na Macu) i użyj strzałek w górę/w dół, aby dostosować odstęp między liniami

Chociaż możesz umieścić kursor lub podświetlić tekst i wpisać wartości w panelu znaków, skróty klawiaturowe sprawiają, że cały proces jest znacznie mniej żmudny i czasochłonny. Dodatkowo zyskujesz bardziej szczegółową kontrolę, dzięki czemu możesz tworzyć lepsze projekty w ten sposób.

(Na marginesie, jeśli nie używasz regularnie skrótów klawiaturowych Photoshop/Illustrator/Premier itp., zdecydowanie zalecamy naukę, ponieważ dzięki temu przepływ pracy jest znacznie płynniejszy, przyjemniejszy i bardziej produktywny).

Zawijanie

Kerning, śledzenie i interakcja to podstawy czytelnego tekstu w projektowaniu stron internetowych (i ogólnie w projektowaniu). Poznanie różnicy i efektywnego wykorzystania każdego z nich sprawi, że staniesz się znacznie lepszym projektantem. Może wydawać się to trochę dziwne, że coś tak prostego jak odstępy między literami i wierszami może mieć tak duży wpływ, ale gdy zajmiesz się tym choćby przez chwilę, nigdy nie spojrzysz na strony internetowe, reklamy, logo czy billboardy w ten sam sposób.

Jakie masz wskazówki i triki, aby uzyskać idealne śledzenie, kerning lub prowadzenie w projekcie?

Artykuł wyróżniony obrazem autorstwa BarsRsind / shutterstock.com