Typografia w projektowaniu

Pierwsze wrażenie ma znaczenie, o czym wie każdy specjalista ds. marki. Większość użytkowników bardzo szybko opuści stronę internetową, jeśli jej treść nie jest przejrzysta i atrakcyjna. Zespół kreatywny dokłada wszelkich starań, aby przekazać komunikat marki w angażujący i przystępny sposób. Oczekują, że podejmiesz właściwe decyzje dotyczące typografii i projektu, które poprawią czytelność i zaangażowanie marki.

Czytaj dalej, aby dowiedzieć się więcej:

• Czym jest typografia i dlaczego jest ważna
• 5 najpopularniejszych rodzajów krojów pisma i 6 kluczowych elementów typografii
• Jak wyszukiwać i przeglądać kroje pisma i czcionki za pomocą Figma

Co to jest typografia?

Typografia w projektowaniu polega na tworzeniu lub wyborze systemu krojów pisma i czcionek w celu wyrażenia słowa pisanego. Ta kreatywna forma sztuki może wywoływać silne emocje dzięki wykorzystaniu atrakcyjnych wizualnie liter i układaniu czcionek w sposób oddający osobowość marki. Dobrze zaprojektowana typografia może ułatwić komunikację, poprawiając czytelność i zrozumiałość tekstu.

Dlaczego typografia jest ważna?

Typografia odgrywa kluczową rolę w tworzeniu wysokiej jakości stron internetowych, aplikacji, wiadomości e-mail, e-booków i innych materiałów. Dobra typografia może pomóc Ci:

• Przyciągać użytkowników czcionkami i elementami typograficznymi, które przykuwają ich uwagę, zanim jeszcze zaczną czytać.
• Ustalić hierarchię wizualną przy użyciu spójnych rozmiarów czcionek, grubości, czcionek szeryfowych i/lub bezszeryfowych, zestawów czcionek i kombinacji krojów pisma, aby ułatwić użytkownikom orientację i poprawić czytelność.
• Budować rozpoznawalność marki. Konsekwentne stosowanie dobrej typografii pomaga użytkownikom rozpoznać markę dzięki krokom pisma i stylom czcionek używanym w treściach związanych z marką.
• Wspierać cele dotyczące treści. Jednolite odstępy między literami, długość linii, wielkie i małe litery oraz inne elementy typograficzne zwiększają czytelność, a czcionki używane jako elementy graficzne wzmacniają ton i znaczenie.

Krótka historia typografii

Johannes Gutenberg przyczynił się do zapoczątkowania ewolucji europejskich czcionek drukarskich w XV wieku, kiedy to wynalazł pierwszą metalową prasę drukarską z ruchomymi czcionkami. Gutenberg używał starych form liter kaligraficznych (znanych również jako gotyckie) do składania dłuższych linii tekstu w rękopisach i tekstach religijnych. Włoscy drukarze wkrótce stworzyli prostszy, bardziej zwarty krój pisma — pierwotnie nazywany Antiqua, obecnie lepiej znany jako Roman. Europejscy drukarze wprowadzili wówczas czcionki kursywne, dzięki czemu na jednej stronie można było umieścić jeszcze więcej słów.

W końcu XVIII i na początku XIX wieku na rynek trafiły pierwsze nowoczesne kroje pisma z szeryfami. Następnie pojawiły się kroje bezszeryfowe, które dominowały w europejskim świecie drukarskim aż do XX wieku. Wtedy to czystsze, bardziej czytelne kroje pisma, takie jak Times New Roman, Futura, Helvetica i Arial, przejęły pałeczkę. Obecnie graficy i projektanci stron internetowych na całym świecie mają dostęp do ogromnych bibliotek czcionek i krojów pisma.

5 najpopularniejszych rodzajów krojów pisma

Współcześni projektanci zazwyczaj wybierają spośród pięciu popularnych rodzajów czcionek: szeryfowych, bezszeryfowych, skryptowych (dekoracyjnych), o stałej szerokości znaków i ekspozycyjnych. Każdy krój pisma zawiera rodzinę czcionek, obejmującą różne style tego kroju. Na przykład Helvetica jest krojem pisma, natomiast Helvetica Light i Helvetica Regular są czcionkami.

• Czcionki szeryfowe: Ten formalny, bardziej tradycyjny krój pisma ma krótkie linie lub kreski, które wystają poza górne i dolne końce liter. Znane marki, takie jak New York Times, Sony i J.P. Morgan, wybierają czcionki szeryfowe. Przykładami są Times New Roman i Garamond.
• Czcionki bezszeryfowe: Ten prosty, nowoczesny krój pisma nie zawiera ozdobników charakterystycznych dla czcionek szeryfowych. Jest to popularny wybór wśród młodych marek i start-upów technologicznych (np. Target, Airbnb i Doordash). Przykłady bezszeryfowych krojów pisma to Helvetica, Arial i Calibri.
• Czcionki dekoracyjne (skryptowe): Ten płynny, kursywny krój pisma może obejmować zarówno eleganckie kaligrafie, jak i zabawne style pisma ręcznego. Czcionka skryptowa nie nadaje się do tekstu głównego, ale dobrze sprawdza się w cytatach, podpisach i krótkich nagłówkach. Przykłady to Snell Roundhand, Pacifico i Scriptina.
• Czcionki o stałej szerokości znaków: Ten styl retro, przypominający czcionkę z maszyny do pisania, charakteryzuje się stałą szerokością liter i odstępów, dzięki czemu każdy znak w słowie zajmuje taką samą szerokość. Czcionka o stałej szerokości, stosowana w kodzie źródłowym w celu ułatwienia czytania, pojawia się również na wielu stronach internetowych i w projektach graficznych. Przykłady obejmują Courier, Bergen Mono i Source Code Pro.
• Czcionki ekspozycyjne: Znane również jako czcionki dekoracyjne, to przyciągające uwagę kroje pisma, które mogą dodać charakteru i oryginalności logo, banerom i nagłówkom. Przykładowe czcionki ekspozycyjne to Clearview, Johnston i Skywalker.

Kluczowe elementy typografii

Możesz dostosować wygląd, czytelność i nastrój słowa, linii tekstu lub produktu, regulując jeden lub więcej elementów typograficznych.

Wyrównanie

Aby uzyskać równowagę i ułatwić użytkownikom poruszanie się po stronie, wyrównaj elementy projektu, takie jak logo, obraz, nagłówek i tekst główny. Rozmieść wszystkie elementy projektu w równych odstępach i stosuj spójne marginesy oraz wypełnienia. Wyrównaj tekst do lewej, prawej, do pełnej szerokości lub do środka, w zależności od potrzeb projektu. Projektanci mogą na przykład wyrównać nagłówek lub krótki cytat do środka, ale długi tekst wyrównać do lewej strony.

Kolor

Wybierz paletę kolorów, która jest spójna z Twoją marką i jasno przekazuje komunikat. Dostosuj nieprzezroczystość tekstu i używaj uzupełniających się kolorów, które dobrze kontrastują ze sobą, aby zachować czytelność i dostępność. Możesz użyć generatora koła kolorów, aby stworzyć dobrze zbalansowaną paletę kolorów. Porada eksperta: Zobacz wytyczne dotyczące dostępności treści internetowych, aby poznać idealne współczynniki kontrastu. Wyraziste, jasne kolory mogą lepiej sprawdzać się w nagłówkach i podtytułach, natomiast neutralne kolory pasują do dużych bloków tekstu.

Hierarchia

Opracowanie hierarchii w typografii pomaga ustalić priorytety i podkreślić kluczowe informacje, dzięki czemu łatwiej je przeglądać i przyswajać. Nagłówki powinny być większe niż podtytuły, a podtytuły większe niż tekst główny. Na przykład tekst główny strony internetowej ma zazwyczaj rozmiar 16 pikseli, a nagłówki H1 — 48 pikseli. Eksperymentuj z białymi przestrzeniami, wyrównaniem tekstu, kolorami i różnymi czcionkami, aby uwydatnić hierarchię wizualną.

Interlinia

Dostosuj odstępy między poszczególnymi literami, aby odległości były jednolite. Odpowiednie rozstawienie znaków (kerning) pomaga zwiększyć atrakcyjność wizualną tekstu, poprawiając jednocześnie jego czytelność.

Odstęp między wierszami (leading)

Odstęp między wierszami (leading) odnosi się do wysokości linii — odległości między linią bazową jednego wiersza tekstu a linią bazową wiersza tekstu powyżej niego. Zasadniczo wysokość linii wynosi 1,125 i 1,200 razy rozmiar czcionki (112,5%–120.0%). skutkuje lepszą czytelnością. Każdy krój czcionki wymaga jednak dopracowania, w tym starannego dostosowania odstępów między wierszami.

Gęstość składu (tracking)

Czytelność można poprawić za pomocą gęstości składu (czyli odstępów między znakami), które obejmuje ogólne odstępy między literami w słowie lub wierszu tekstu. Zwiększ gęstość składu, aby dodać miejsce lub zmniejsz, aby je zredukować. Słowa lub frazy wyświetlane wielkimi literami są czasami łatwiejsze do odczytania przy zwiększonej gęstości składu.

Jak wybrać odpowiedni krój czcionki

Proces wyboru kroju pisma dzieli się na następujące kluczowe etapy:

• Dokonaj analizy zakresu projektu, wymagań i celów. Zadaj zespołowi kluczowe pytania dotyczące treści: w jaki sposób dostarczamy treści (za pośrednictwem aplikacji, strony internetowej, poczty elektronicznej lub materiałów drukowanych)? Kim są nasi odbiorcy i jakie są ich potrzeby? Jakich krojów i czcionek używają nasi konkurenci? Należy pamiętać, że niektóre kroje czcionek lepiej sprawdzają się w nagłówkach niż w tekście menu. Inne mają duże rodziny czcionek z międzynarodowymi skryptami, glifami i innymi znakami specjalnymi.
• Stwórz tablicę inspiracji, aby opracować wizualny styl w oparciu o badania użytkowników i konkurencji. Aby rozpocząć, skorzystaj z szablonu tablicy inspiracji FigJam. Rada eksperta: analiza podobnych rozwiązań może pomóc w zidentyfikowaniu przydatnych wzorców i norm.
• Zapoznaj się z opcjami krojów pisma na swoim komputerze lub na stronach takich jak Google Fonts. Poszukaj kroju pisma, którego elementy wizualne odzwierciedlają to, co chcesz przekazać za pomocą swojego produktu lub marki. Jeśli na przykład ton Twojej marki jest bardziej profesjonalny, wybierz poważną czcionkę z niewielką liczbą ozdobników. Który z tych przykładów projektów Figma wydaje Ci się bardziej profesjonalny? Jeśli Twój wybór padł na moduł po lewej stronie, jesteś na dobrej drodze. Moduł ten wykorzystuje czcionkę Roboto, czystą i łatwą do odczytania czcionkę bezszeryfową. Moduł po prawej stronie zawiera czcionkę Almendra, opartą na kaligrafii, często używaną w książkach dla dzieci.

• Wybierz kroje pisma, które są zgodne z wizerunkiem marki i przyciągają wzrok, aby wesprzeć cele projektu. Weź pod uwagę ogólną konstrukcję liter (np. wysokość x, wysokość wielkich liter, kontury, górne i dolne wydłużenia), możliwość skalowania, czytelność, charakter i dekoracyjność. Elementy te wpływają na ogólny wygląd i styl kroju pisma.
• Przetestuj kroje pisma na rzeczywistej, istotnej treści. To najlepszy sposób na wybór kroju czcionki, który przyciągnie uwagę użytkowników. Wypróbuj krój pisma w kilku różnych rozmiarach, aby upewnić się, że sprawdzi się zarówno w przypadku dużego, jak i małego tekstu.
• Sprawdź kolory marki na wybranym kroju pisma. Zacznij odumieszczenia czarnego tekstu na białym tle i białego tekstu na czarnym tle. Następnie zastosuj główny kolor marki do tekstu i sprawdź, jak krój pisma wygląda na białym i czarnym tle. Odwróć kolory, aby zobaczyć, jak biały i czarny tekst wygląda na tle w głównym kolorze Twojej marki.

Grubość i styl

W kroju pisma, na przykład Montserrat autorstwa Juliety Ulanovsky i studia, istnieje wiele stylów i grubości — takich jak zwykły, pogrubiony, pochylony, cienki, czarny itp. — a każdy z nich ma swoją czcionkę. Czcionka to plik służący do instalacji i używania zestawu znaków o określonej grubości i stylu tekstu. Krój pisma z wieloma grubościami ma czcionkę dla każdej grubości, razem tworzą one rodzinę czcionek.

Krój pisma Montserrat obejmuje rodzinę 18 czcionek: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black oraz Black Italic.

Grubość odnosi się do grubości kreski litery. Krój pisma może mieć różne grubości, od bardzo cienkiej do bardzo grubej. Niektóre kroje pisma mogą występować tylko w jednej grubości. Grubości te mają również przypisane numery, co jest pomocne podczas programowania lub współpracy z programistą. Grubości czcionek są zazwyczaj przypisane do liczb w skali od 100 do 900, w odstępach co 100: zwykła 400, średnia 500, półgruba 600, gruba 700 itd.

Styl czcionki to dostosowanie znaków lub wielkości liter, np. kursywa lub wielkie litery. Niektóre kroje pisma nie mają opcji stylu, a czasami oferują tylko grubość Regular (zwykła).

Wielkość liter, zwana również po prostu „wielkością”, to rozróżnienie między małymi literami, takimi jak małe litery, a dużymi literami, takimi jak wielkie litery lub litery wielkie. Większość zestawów krojów pisma zawiera litery w obu wersjach, natomiast czcionki takie jak Bangers zawierają wyłącznie wielkie litery. Kroje pisma składające się wyłącznie z wielkich lub małych liter są znacznie mniej popularne.

W języku angielskim różne style wielkości liter są używane w różny sposób, w zależności od okoliczności:

• Tytuły z wielkimi literami to styl mieszany, w którym wszystkie słowa w zdaniu są pisane wielką literą, z wyjątkiem przedimków, krótkich przyimków i spójników. Wymienione wyjątki są w pewnym stopniu subiektywne.
• Do pisania tekstów, w tym również tego zdania, przyzwyczailiśmy się do stosowania wielkich liter na początku zdania.
• PISOWNIA WERSALIKOWA to sytuacja, w której cały tekst jest pisany wielkimi literami i jest powszechnie stosowany w nagłówkach, logotypach, tekstach na przyciskach lub innych rodzajach etykiet. Używaj jej raczej do podkreślenia tekstu niż do tworzenia długich tekstów, gdzie brak górnych i dolnych wydłużeń może utrudniać czytanie dużych ilości tekstu. W internecie wersaliki są również używane do sugerowania krzyku, dlatego należy unikać ich stosowania w interfejsach do czatu i rozmów.
• Kapitaliki są podobne do liter wielkich, ale mają wysokość odpowiadającą wysokości x danego kroju pisma. Kapitaliki służą do odróżnienia tekstu głównego od nagłówków, jednak nie są one dostępne w wielu krojach pisma.
• tekst pisany małymi literami jest wyborem stylistycznym stosowanym w niektórych produktach i znakach słownych ze względów estetycznych.

Rozmiar

Wybór oraz zmiana wielkości czcionki może być trudną decyzją. Będzie to w dużej mierze zależało od nośnika, na którym tekst zostanie wyświetlony, np. papier, telefon komórkowy lub billboard, i może się zmieniać w zależności od urządzenia odbiorcy lub responsywności projektu.

Ważne jest, aby określić hierarchię przy wyborze czcionek, wykorzystując rozmiar jako jeden z elementów podkreślających.

W tworzeniu stron internetowych należy zdefiniować niektóre kluczowe rozmiary, takie jak nagłówek, podtytuł, tekst główny, menu i tekst stopki itp. Wielu projektantów zaczyna od rozmiaru nagłówka, znanego również jako H1, ale pomocne może być rozpoczęcie od rozmiaru tekstu głównego, ponieważ w ten sposób mogą go zaimplementować programiści front-endowi. Kiedy programista pracuje w ems, jednostce miary opartej na skalowaniu, rozmiar tekstu głównego wynosi 1em, a każdy inny rozmiar tekstu jest jego wielokrotnością lub ułamkiem.

Na przykład typowy rozmiar tekstu w treści stron internetowych wynosi 16 pikseli. Nagłówek H1 można ustawić na 3em, czyli trzykrotność rozmiaru tekstu głównego, w tym przypadku 48 pikseli. Ponieważ strona internetowa będzie zaprojektowana dla wielu rozmiarów ekranów, tworzone projekty mogą wymagać różnych rozmiarów czcionek w zależności od urządzenia klienta. Programista może zmienić rozmiar tekstu głównego zgodnie z wymiarami przeglądarki klienta, a pozostały tekst zostanie odpowiednio przeskalowany.

Szczegóły

W typografii wiele zależy od drobnych szczegółów i niuansów.

Na przykład podczas układania tekstu jednym z aspektów, które należy wziąć pod uwagę, są nierówne krawędzie (rag). Rag to nierówna krawędź tekstu wyrównanego do lewej i prawej strony. Można ją modyfikować, zwiększając lub zmniejszając szerokość pola tekstowego lub zmieniając odstępy między literami w całym tekście.

Kiedy jedno lub dwa słowa znajdują się na końcu akapitu, określa się je zazwyczaj mianem „wdowy”. A kiedy znajdują się na początku następnej kolumny, nazywa się je „sierotą”.

Jednak jak wskazuje May-Li Khoe:

Zamiast tego nazywaj je „wisiorkami”.

W miarę dostosowywania pól tekstowych w celu zapobiegania wisiorkom, dostosowywana jest długość linii. W przypadku tekstu głównego w języku angielskim idealnym rozwiązaniem pod względem dostępności i czytelności jest ograniczenie długości wiersza do około 40–60 znaków, wliczając spacje i znaki interpunkcyjne. Jeśli długość linii musi przekraczać 60 znaków, zwiększ wysokość linii, aby poprawić czytelność.

Jednym z najprostszych sposobów nadania dokumentowi lub interfejsowi dobrze zaprojektowanego wyglądu i stylu jest spójność rozmieszczenia obiektów w przestrzeni.

Załóżmy, że ekran Twojej aplikacji ma tytuł, który znajduje się 100 pikseli od góry ramki lub ekranu. Chcesz, aby wszystkie inne ekrany aplikacji z podobnymi tytułami miały te tytuły w tym samym miejscu.

W tym przypadku pomocne są linie pomocnicze i pomiary — wystarczy kliknąć i przeciągnąć linijkę w Figma, aby utworzyć linię pomocniczą, a po zaznaczeniu obiektu przytrzymać klawisz Alt, aby zobaczyć odległość do obiektów wokół niego.

Spójrzmy na lewą stronę lub lewy margines pionowy strony internetowej, plakatu, ekranu aplikacji, infografiki itp., zawierający logo, obraz, nagłówek i część tekstu. Dostosowanie tych elementów do siebie ułatwi przesuwanie wzroku w dół strony, a także sprawi, że układ treści będzie wyglądał na przemyślany i zamierzony.

Wyjustowanie to koncepcja wyrównania charakterystyczna dla bloków lub linii tekstu.

• Wyjustowanie do lewej strony oznacza, że początek każdego wiersza tekstu zaczyna się w tym samym miejscu wzdłuż lewego marginesu. Nazywane jest to również wyrównaniem do lewej strony i powoduje powstanie marginesu po prawej stronie.
• Wyjustowanie do prawej strony oznacza, że koniec każdego wiersza tekstu jest wyrównany do prawego marginesu. Nazywane jest to również wyrównaniem do prawej strony i powoduje powstanie marginesu po lewej stronie.
• Wyjustowanie pełne występuje wtedy, gdy zarówno lewa, jak i prawa strona wierszy tekstu są wyrównane do obu stron pola tekstowego. Odstępy między literami i wyrazami są dostosowywane, aby każda linia tekstu miała jednakową szerokość. Przy pełnym wyjustowaniu nie ma nierównych krawędzi (rag).
• Tekst wyśrodkowany to brak wyjustowania.

Rozpocznij swoją przygodę z typografią z Figma

Figma zapewnia profesjonalne zasoby projektowe, które pomogą Ci rozpocząć pracę, w tym narzędzie projektowe Figma oraz przykład, jak poznawać nowe kroje pisma. Możesz również stworzyć tablicę inspiracji marki za pomocą narzędzia do tworzenia tablic inspiracji FigJam.

Aby uzyskać więcej profesjonalnych wskazówek, zobacz artykuł Figma o tym, jak budować i wdrażać systemy typografii w Figma.

Potrzebujesz inspiracji? Zobacz obszerną bibliotekę szablonów typograficznych, przykładów i przewodników stylu udostępnianą przez społeczność Figma.

Chcesz znaleźć krój pisma, który podkreśli wyjątkowość Twojej marki?