Ten materiał jest dostępny również w wersji video na moim kanale na YouTube. Zerknij również na newsletter, który wysyłam dwa razy w miesiącu.
Treść vs forma
Kiedy mówimy o tekstach w interfejsach graficznych możemy mieć na myśli UX writing – czyli słowa, których używamy, styl, sposób komunikacji. A możemy mówić o ich formie, tego jak wyglądają i jak są ułożone – i wtedy wchodzimy w temat typografii.
Dziś zajmiemy się formą i postaram się przejść przez podstawowe zagadnienia, które są istotne dla projektowania interfejsów graficznych. Więc jeśli do tej pory nie mieliście nic wspólnego z typografią, to zapraszam was do oglądania.
A jak interesuje was też temat UX writingu, to na kanale i blogu powstało już kilka materiałów na ten temat, między innymi wywiady ze świetnymi specjalistami i specjalistkami z tego obszaru. Linki znajdziecie w opisie.
Rola typografii w interfejsie
Typografia w interfejsie ma dwie podstawowe role – po pierwsze to oprawa graficzna informacji, które interfejsy nam przekazują. Jeśli zerkniecie na strony i aplikacje, które przeglądacie najczęściej, nawet jeśli wydają się wam bardzo wizualne – jak YouTube czy Netflix, gdzie oglądamy filmy, to gdyby przyjrzeć się uważniej, zauważycie, że duża część interfejsu to wciąż teksty.
To podpisy pod zdjęciami lub filmami albo napisy na filmach, to reklamy na których pojawiają się teksty, to podpisy pod ikonami, elementy nawigacji, filtrów, kategorii, opisy, komunikaty błędów i tak dalej. Nie wspominając już o serwisach takich jak Facebook, serwisy informacyjne, blogi, Wikipedia, gdzie przychodzimy po to żeby coś tam przeczytać.
Z drugiej strony teksty, które pojawiają się na stronach i w appkach, mogą mieć też wartość czysto dekoracyjną. Czyli są jakimiś dużymi tekstami w tle, które za zadanie mają raczej wprowadzić nas w jakiś klimat, zapoznać z brandingiem, przekazać jakieś emocje i tu czasami nawet te teksty, nie mają dużego znaczenia, jak forma, w której są przedstawione.
Jako, że projektując interfejsy zależy nam przede wszystkim na upewnieniu się, że nasze rozwiązanie będzie użyteczne, w tym materiale skupiam się na tej roli informacyjnej, a nie dekoracyjnej. Więc jeśli szukacie wskazówek jak zaprojektować fajny napis na stronę, to tu tego nie znajdziecie. Za to pogadamy sporo o czytelności tekstu, dostępności, użyteczności właśnie.
Krój pisma
Zacznijmy od krojów pisma. Jest ich cała masa, w różnych stylach (powstał kiedyś materiał na temat kategoryzacji krojów pisma). To jeśli mowa o UI to bardzo, bardzo zawęzimy sobie wybór kroju do określonych stylów.
Krój pisma to komplet znaków, które charakteryzują się jakimś jednolitym stylem, proporcjami. To będzie to, co często nazywane jest również w aplikacjach, które pozwalają na edycję tekstu – czcionkami, fontami.
Takie popularne kroje to Arial, Times New Roman, Comic Sans, Papyrus, Helvetica, Futura i cała masa innych. Oprócz takich systemowych, które znajdziecie na swoich komputerach albo telefonach, jest mnóstwo osób i firm, które zajmują się tworzeniem i dystrybucją nowych krojów.
Zdarza się, że duże firmy zlecają tworzenie własnego kroju lub jacyś zajawkowicze digitalizują, przenoszą do cyfrowego świata kroje, które powstały tylko w formie fizycznych czcionek albo samych szkiców.
Zmierzam do tego, że krojów pisma są tysiące – lepsze lub gorsze, płatne i darmowe i kiedy przychodzi nam wybierać właściwy krój do projektu, może być to przytłaczające.
Kroje pisma w interfejsach
Na całe szczęście w UI używamy bardzo ograniczonej puli i wynika to przede wszystkim ze względów praktycznych. Najczęściej używanym typem kroju w językach opartych o alfabet łaciński będzie krój bezszeryfowy, bez zbędnych ozdobników, przede wszystkim czytelny w małym rozmiarze. Czyli dość nudny wybór.
Ale ma to sens patrząc na to w których miejscach takie teksty w interfejsie się pojawiają. I jak małe są to przestrzenie. Oczywiście możemy stosować kroje szeryfowe i kroje ozdobne, ale tworzymy wtedy pewne zasady, co do tego, w jakich miejscach są używane.
Na przykład nie mogą być mniejsze niż 16 px albo używamy ich tylko w nagłówkach. To oczywiście tylko przykłady, bo znowu, dużo zależy od samego kroju pisma i tego jak wygląda produkt.
Dodatkowo w UI i web designie przyjęło się, że nie używa się raczej więcej niż dwóch krojów w jednym projekcie. W projektach aplikacji mobilnych lub bardzo technicznych rozwiązaniach często spotkacie się tylko z jednym krojem, natomiast dla stworzenia odpowiedniej hierarchii i estetyki używa się różnych odmian tego kroju.
Odmiany kroju pisma
Osoby projektujące kroje tworzą często nie jedną, a kilka lub kilkanaście odmian kroju, które różnią się stylem. Na przykład mamy wersję pogrubioną, pochyloną, bardzo cienką lub mocno rozciągniętą.
Zdarza się, że krój szeryfowy (czyli mający poprzeczne zakończenia kresek w literach) dostaje wersję bezszeryfową albo bardziej zaokrągloną.
Lub dochodzi wersja monospace, czyli taka, gdzie wszystkie znaki mają taką samą szerokość, więc idealnie sprawdzają się np. w tabelach, bo np. liczby zawsze będą tworzyć w ten sposób idealne kolumny.
To, że krój ma 10 różnych odmian, wcale nie oznacza, że musimy ich wszystkich używać, powiedziałabym nawet, że jest to niewskazane.
Najpopularniejsza jest pewnie odmiana pogrubiona – czyli coś, co pozwala na łatwe wyróżnienie tekstu. Jeżeli krój ma kilka odmian cienkich i grubych, zachęcam do tego, żeby nie brać do projektu odmiany regularnej i najbliższej jej cienkiej i grubej.
Dlaczego? Bo w małych rozmiarach, w których stosujemy teksty w UI, może być niewidoczna różnica między nimi. Dlatego nieźle sprawdza się skakanie co dwa style, czyli z regularną używamy np. Ultra Light i Black zamiast Bold. Oczywiście nazwy stylów i to jak wyglądają są zawsze zależne od kroju. Nie ma zasad, których trzeba się trzymać, więc w jednym kroju te różnice między odmianami mogą być większe niż w drugim.
Wybór kroju pisma do UI
Wiemy już, że są kroje pisma i mają swoje odmiany. To teraz zerknijmy jeszcze na co zwrócić uwagę, jak wybieramy krój pisma do projektu interfejsu graficznego.
Webfonty
Po pierwsze, nie każdy krój został zaprojektowany do użycia w internecie. Jakkolwiek absurdalnie to może brzmieć i na pewno zdarza się coraz rzadziej, to należy zwrócić uwagę na to, czy krój, który chcemy zastosować jest webfontem.
Czyli fontem przygotowanym do publikacji na stronie internetowej bądź w aplikacjach. Pamiętajcie jednak, że nie każdy webfont będzie nadawać się do projektu interfejsu.
Licencje
Dodatkowo musimy pamiętać o ograniczeniach licencyjnych. Bo tak się składa, zwłaszcza w płatnych krojach, że kupując je wybieramy na jakich nośnikach, w jakich typach projektów, będziemy ich używać.
I tak np. inna cena i licencja kroju będzie gdy zaznaczymy desktop (czyli używamy kroju na komputerze, w programach graficznych), inna będzie, gdy krój będzie wykorzystywany do druku o dużym nakładzie (np. w gazetach, książkach), a inna gdy zaznaczymy użytek na potrzeby strony lub aplikacji natywnej.
Na oba problemy webfontów i licencji na szczęście znalazło się wspaniałe rozwiązanie i jeśli szukacie kroju na Google Fonts, to macie pewność, że zarówno postanowienia licencyjne jak i przygotowanie pliku pozwala na użycie krojów na stronach i w aplikacjach.
Natomiast obie kwestie są szalenie ważne, gdy realizujecie projekt dla firmy, o określonym brandingu, która ma narzucone kroje pisma i style, których używa.
To się na szczęście zdarza coraz rzadziej, ale spotkałam się z przypadkami, gdzie firmy zajmujące się identyfikacją, nie sprawdziły tego, czy wybrane do identyfikacji kroje w ogóle mają swoje wersje webfontów, żeby móc postawić choćby stronę. Lub czy te fonty mają odpowiednie zestawy znaków.
Wersje językowe
I tu płynnie przechodzimy do wersji językowych. No bo nie każdy krój zaprojektowany jest pod wszystkie możliwe litery diakrytyzowane (ą, ę, ś, ź, ł, czyli te takie z akcentami, ogonkami, charakterystyczne dla danego języka). Projektując po polsku koniecznie zwróćcie na to uwagę lub przeszukując np. Google Fonts od razu zaznaczcie taką opcję (Latin Extended).
Jeżeli krój nie ma jakiegoś znaku w swoim zestawie, a wpiszemy go np. na stronie albo aplikacji, to ten znak będzie zastępowany przez inny dostępny w systemie krój. Oznacza to, że nagle losowo może pojawić nam się jakaś literka z Ariala czy Times New Roman, która widocznie odbiega stylem od pozostałych.
Projektując duże systemy musimy wziąć pod uwagę też inne alfabety – cyrylica, alfabet arabski, chiński i tak dalej, nie zawsze są wspierane. Są jednak kroje, które zostały specjalnie zaprojektowane żeby wspierać jak najwięcej języków – i jest to np. krój od Google – Noto, którego możecie używać.
Wygląd liter
Wejdźmy jeszcze na chwilę w detale i przyjrzyjmy się jak wyglądają same litery w kroju. Jeśli chcemy ocenić czy krój nada się do małego rozmiaru, zwróćmy uwagę przede wszystkim na dwie jego cechy. Kontrast i ciężar optyczny.
Kontrast mówi nam o różnicy między najgrubszymi a najcieńszymi liniami w naszej literze. Jeżeli różnica jest duża, mówimy o wysokim kontraście kroju. W UI szukamy możliwie zbalansowanego kontrastu, to znaczy nie chcemy, żeby te różnice były zbyt duże.
Dlaczego? Bo kroje o wysokim kontraście, choć często atrakcyjne, w małym rozmiarze potrafią przynieść nieoczekiwane efekty i czasami wręcz zgubić najcieńsze linie w literach. Czyli widzimy wtedy tylko te najgrubsze części, co oczywiście wpływa na czytelność takich słów.
Ciężar optyczny można przyrównać do wrażenia grubości liter. Czyli tego jak dużo pustych przestrzeni znajdziemy w literach i dookoła nich.
Dwa kroje, które widzicie na przykładzie poniżej to kroje o bardzo różnym ciężarze. Po lewej widzimy krój lekki, delikatny, po drugiej stronie mamy Impact, który można powiedzieć, że wizualnie wydaje się cięższy.
Ten ciężar łatwo sprawdzić kiedy użyjemy kroju w dużej przestrzeni i użyjemy kroju o niskim ciężarze i wysokim. Widać na pierwszy rzut oka, że ta ciężka wersja jest ciemniejsza, bardziej skupia naszą uwagę ale też wydaje się nieprzyjemna do odczytywania w tak długim tekście.
W UI znowu, szukamy czegoś pomiędzy, zwłaszcza do tekstów paragrafowych, dłuższych, instrukcji, wpisów blogowych – tutaj nie ma co szaleć. Natomiast większe teksty, nagłówki, spokojnie mogą bardziej wyróżniać się krojem o skrajnym ciężarze optycznym.
Postawcie na sprawdzone kroje
No i jakby to podsumować to wychodzi, że w sumie sporo tego – małych detali, które mają znaczenie. Nie dziwi więc mnie fakt, że często jako podstawowy krój wybieramy coś sprawdzonego. I jeśli nie czujecie się komfortowo z typografią, to postawcie po prostu na popularne kroje, takie jak Lato, Roboto, Poppins, Inter, Noto. W tym wyborze najważniejsza będzie czytelność w małym rozmiarze i w dłuższych tekstach.
Natomiast jeśli macie przestrzeń by zastosować jeszcze jeden krój, który chcecie potraktować bardziej jako dekorację, możecie skusić się na mniej standardowe rozwiązania. Wciąż jednak bierzcie pod uwagę wyżej wymienione cechy.
Pamiętajcie, że większość stron oferujących darmowe i płatne fonty, ma opcje podglądu, możliwość wpisania własnego tekstu oraz zmniejszanie i powiększanie go – więc można trochę potestować krój zanim się go pobierze i zainstaluje.
Teraz czas na formatowanie tekstu
Mamy krój, co dalej? Przyjrzyjmy się jak pracować z tekstem, bo tu często jeszcze widzę pojawiający się błąd, wynikający ze złego doboru wyrównania tekstu. Paragraf tekstu możemy wyrównać do lewej krawędzi, wtedy każda linijka zaczyna się w tym samym miejscu, do środka i do prawej strony, a także do obu marginesów, potocznie to wyrównanie nazywamy justowaniem.
I tutaj ważna lekcja – zasady tego jak składamy książki nie mają zastosowania tego, jak projektujemy teksty w internecie. Strona i aplikacja to nie książka, nie wchodzimy na strony żeby przeczytać każde słowo od deski do deski, w dodatku strony i aplikacje to medium dynamiczne, zmieniające się pod wpływem działań użytkowników, a to oznacza, że musimy to wszystko brać pod uwagę.
Min. dlatego absolutnie nie polecam używania w interfejsach wyrównania tekstu do lewej i prawej strony (czyli „justowania”). Projektując interfejs z reguły projektujemy „szablon”, otoczkę do treści, które są dynamiczne. Popatrzcie na dowolnego bloga albo artykuł na portalu informacyjnym, gdzie mimo, że mamy stały układ treści, mamy jednolity wygląd kart, w których znajdują się treści, to same treści przyjmują różną formę.
Czasami to krótkie teksty, jedno zdanie, słowo, czasami to bardzo długi tekst, z użyciem emotikon, z dodatkiem zdjęć. Czyli tekst układa się różnie – do tego mamy wersje językowe – w przypadku np. niemieckiego mamy więcej bardzo długich słów niż w przypadku angielskiego. Oznacza to, że nie możemy na stałe czegoś zaprojektować, nie mamy nad tym kontroli, w którym miejscu możemy złamać słowo lub linię żeby dobrze wyglądały.
Jeśli mamy dobrze wyszkoloną osobę od kodowania, to na statycznej stronie, takiej jak wizytówka firmowa, portfolio, możemy zakodować wygląd tekstu tak, jak sobie wymyślimy. Ale musimy wiedzieć jaki jest tekst żeby na nim pracować. A i tak nie zdarzyło mi się jeszcze zobaczyć dobrze zakodowanego wyjustowania.
Na stronach i aplikacjach gdzie mamy treści generowane dynamicznie – tworzą je dziennikarze, blogerzy, użytkownicy portali społecznościowych, nie będziemy mieć tej kontroli. Może z rozwojem AI będzie to łatwiejsze, ale póki co, efekt jest taki, że przy wyjustowaniu tworzą nam się tak zwane rzeki.
Rzeki w tekście to takie ogromne przerwy, które robią się w każdej linijce, kiedy słowa są automatycznie rozciąganie na całą długość linii by dopasować się do określonej szerokości. Zwiększają się przerwy między słowami a także literami. Co nie tylko wpływa negatywnie na estetykę ale również czytelność.
I często słyszę ten argument, że taki sposób formatowania jest ładniejszy, bardziej elegancki, no bo ma te proste marginesy, no ale nie wiem, czy ludzie nie widzą tego co się z tym tekstem dzieje w środku? Albo próbowali go kiedyś przeczytać?
W długich tekstach, tzn. takich na więcej niż trzy linie, unikamy również środkowania tekstu. I tu znowu i kwestie estetyczne, bo nikt mi nie wmówi, że taka choineczka z tekstu jest ładniejsza niż wyrównanie do lewej, to znowu cierpi na tym czytelność.
W językach w których czytamy od lewej do prawej, czyli w polskim, angielskim, niemieckim, wyrównanie do lewej strony jest najbardziej naturalne – bo właśnie od tej strony zaczynamy czytać kolejną linię. Kiedy linia zaczyna się zawsze z tej samej strony, łatwiej nam się w tekście odnaleźć.
Kiedy linie zaczynają się w różnych miejscach, tak jak w przypadku wyrównania do środka i prawej strony, musimy trochę bardziej skupić się na tym, gdzie jest nasza kolejna linijka. I to może brzmieć głupio, ale trzeba zdać sobie sprawę z tego, że nasze oczy czytając tekst, cały czas wykonują skokowy ruch, pomiędzy elementami tekstu.
Nasze oczy skaczą po tekście i im bardziej utrudniamy im te skoki przesuwając elementy i rozmieszczając je w nieoczywistych miejscach, skazujemy nasze oczy na trochę więcej pracy. To może przyczynić się do wrażenia, że tekst czyta się trudniej, trudniej będzie nam się może na nim skupić lub w ogóle go nie przeczytamy, bo formatowanie nam to skutecznie utrudni.
Dlatego najbezpieczniej stosować wyrównanie naturalne dla kierunku czytania – w naszym przypadku będzie to wyrównanie do lewej.
Szerokość paragrafu
Kolejny temat bliski wyrównaniu to szerokość naszego paragrafu. I o ile w aplikacjach mobilnych to nie problem, bo nasze telefony wciąż są dość małe, to kiedy projektujemy aplikację desktopową, webową przychodzi nam pracować z różnymi szerokościami monitora. I najgorsze co możecie zrobić dla tekstu, to pozwalać mu rozciągać się na całą, dostępną szerokość ekranu.
Zalecają szerokością jest około 50-90 znaków w linii – wiadomo, że to trochę będzie zależeć od stosowanego kroju i języka, którym się posługujemy. Ale to taka bezpieczna liczba by upewnić się, że tekst nie rozciągnie się za bardzo gdy będziemy mieć do dyspozycji duży monitor. Nie chcemy żeby użytkownicy machali głowami kiedy trzeba przeczytać linijkę tekstu –zwłaszcza gdy tych linijek jest więcej.
Interlinia
O interlinii warto wspomnieć, żeby nie przesadzać ze zwiększaniem odległości między kolejnymi linijkami tekstu. Jeżeli interlinia jest zbyt mała, linie tekstu będą się prawie dotykać, zaburzając czytelność tekstu.
Jeżeli jednak interlinia będzie zbyt duża, możemy odnieść wrażenie, że nie mamy do czynienia z paragrafem tekstu, a osobnymi punktami. W takim bardzo rozciągniętym tekście, też można się trochę pogubić, więc szukamy złotego środka.
Optymalny odstęp między wierszami różni się w zależności od takich czynników, jak rozmiar, krój pisma i kontekst. Zaleca się zachowanie odstępów między wierszami w zakresie od 120% do 145% rozmiaru kroju. Na przykład, jeśli rozmiar wynosi 12 punktów, staramy się zachować odstępy około 15 do 17 punktów.
Kerning vs tracking
Ucząc się o typografii możecie trafić na temat kerningu i trackingu. O ile kerning nie musi was specjalnie interesować w przypadku UI, to tracking może się przydać.
Kerning, czyli odległości między parami liter w kroju, został odpowiednio zaprojektowany i nie zmieniamy go. Korekty można robić gdy pracujemy np. nad identyfikacją wizualną czy czymś czego nie musimy kodować.
Tracking to funkcja pozwalająca na określenie jakie są odległości między literami w słowie. Czyli takie rozstrzelenie liter. Tracking często stosuje się jako formę dekoracji, ale zdarza się, że małe teksty zamknięte w jakimś komponencie, np. przycisku, potrzebują tego rozstrzelenia żeby zwiększyć czytelność tekstu.
Rozmiary tekstu
Pracując w programie graficznym, na dużym monitorze, w dużym przybliżeniu, koniecznie raz na jakiś czas przeglądajcie projekt w docelowym rozmiarze i ekranie. Jeśli projektujecie aplikację mobilną, przełączajcie się na podgląd na waszych telefonach. Dopiero wtedy zobaczycie, jak naprawdę wygląda tekst (i inne elementy graficzne), a przede wszystkim czy rozmiar jest wystarczający.
Możecie spotkać się z różnymi poradnikami gdzie będą podane wartości typu „tekst paragrafowy powinien mieć minimum 16 px” albo polecane są systemy wielkości z jakiegoś design systemu (np. Material Design). Tylko pamiętajcie, że każdy font będzie miał trochę inne rozmiary i przez to trudno nam ustandaryzować zalecenia. Takie zalecenia można tworzyć, jak w przypadku design systemów, gdy mamy konkretny font (w Material Design to Roboto lub Noto).
Pracując z popularnymi, prostymi krojami, o których już wspominałam, trzymam się zasady żeby najmniejsze teksty nie miały mniej niż te 13/14 i dotyczy to naprawdę małych, dodatkowych tekstów. Pamiętajcie, że jeżeli robicie teksty tak małe, że nie da się ich przeczytać albo trzeba włożyć w to naprawdę dużo wysiłku, to równie dobrze możecie te teksty usunąć, bo prawie nikt nie podejmie próby żeby je przeczytać. Chyba, że naprawdę nie będzie innego wyjścia.
Wyróżnienia w tekście
Nikt nie ma ochoty przedzierać się przez ścianę tekstu, kiedy nawet nie wiemy czy warto inwestować w to naszą energię i czas. Czytelnicy w sieci raczej skanują niż czytają słowo po słowie. Dlatego staramy się długie teksty dzielić na mniejsze części i stosować wyróżnienia w tekście.
Krótsze akapity i nagłówki dzielą tekst, co ułatwia szybszą identyfikację głównych punktów i odpowiednich sekcji. Dzielenie treści na mniejsze części pomaga czytelnikom efektywniej przetwarzać informacje, zmniejszając zmęczenie poznawcze – co jest szczególnie istotne w kontekście dostępności.
No i estetyka – mniejsze akapity, kontrastowe nagłówki, pomagają nam mądrzej zaprojektować przestrzenie między tekstami i zadbać o przestrzeń negatywową (en. whitespace).
Nie bójcie się stosować różnych rodzajów wyróżnień – pogubienia, pochylenia, punktory, podkreślenia, przekreślenia, kapitaliki czy znaki specjalne. Pamiętajcie jednak, że podkreślenia są najczęściej kojarzone z elementem interaktywnym – linkiem tekstowym.
A jak już wspomniałam o kapitalikach… Kapitaliki to znaki wyglądające jak wielkie litery ale mające rozmiar małych. Wersaliki to po prostu wielkie litery. Wspominam o tym, bo nie jesteśmy przyzwyczajeni do tego, że wszystkie teksty, które czytamy pisane są tak zwanym capslockiem, czyli są w formie WIELKICH LITER.
Dlatego nie składamy długich tekstów w ten sposób, bo zajmie nam chwilę dłużej przeczytanie takiego tekstu w porównaniu do zwykłego. Dlatego wielkie litery zachowajmy na wyróżnienia tekstów krótkich, jak np. etykiety w przyciskach czy krótkie nagłówki.
Barwa, czyli kontrast tekstu do tła
Nie będę rozwodzić się o teorii barw i dostosowaniu koloru do projektu, ale muszę wspomnieć przy okazji tekstów, jak ważny jest dobór odpowiedniej barwy tekstu do tła. Czyli zadbanie o wysoki kontrast treści. Jeśli kontrast jest zbyt mały, tekst jest po prostu nieczytelny.
I nie trzeba mieć problemów ze wzrokiem, żeby mieć poczucie, że nie mam zamiaru się męczyć i próbować odczytać informacji, które zostały zaprojektowane w niedostępny sposób.
Projektanci graficzni mają tendencję do wyszarzania tekstów, zwłaszcza gdy jest ich dużo, żeby trochę „zbalansować” projekt. Co jest absolutnie kontrproduktywne, bo to treści są najważniejszymi elementami w projekcie interfejsu.
Po nie właśnie do tych produktów przychodzimy. Dobrą praktyką jest sprawdzanie jaki jest stosunek wartości kontrastu tekstu do tła (strony, przycisku, tabeli, zdjęcia) używając tak zwanych contrast checkerów – czyli darmowych narzędzi, które pomogą nam je ocenić.
Wytyczne dotyczące dostępności treści internetowych (WCAG) określają standardy zapewniające dostępność treści internetowych wszystkim użytkownikom, w tym osobom z wadami wzroku. WCAG określa minimalny współczynniki kontrastu dla zwykłego, paragrafowego tekstu i wynosi 4,5:1. W przypadku większych tekstów to 3:1. Jak więc widzicie, wielkość tekstu ma znaczenie, ale również będzie miało znaczenie to jaki to krój pisma (np. te Ultra Light wciąż będą dość nieczytelne przy takich wartościach).
Jakby… to zależy
I pewnie już poczuliście, że często wspominam o tym, że coś zależy… od wielkości, od grubości, od stylu i tak dalej. I to ta najtrudniejsza część typografii dla UI. Bo nie mamy tak naprawdę jednolitych, uniwersalnych zasad, jak projektować teksty do interfejsów graficznych.
Bo przez to, że kroje pisma nie są czymś zunifikowanym (mogą mieć różne kształty i wielkości), to trudno takie zasady stworzyć. W dodatku tekst jest tylko częścią projektu i bardzo dużo naszych odczuć, wrażeń będzie zależne od tego jak zbudowany jest cały projekt. Co się dzieje po scrollowaniu? Czy są jakieś animacje?
Do tego dochodzą kwestie dostępności i zwyczajne kwestie techniczne. Projektanci mogą dowolnie zaprojektować swoje teksty w Figmie, Sketchu czy dowolnym narzędziu. Ale to trzeba później wdrożyć. I jak już wspominałam przy treściach generowanych dynamicznie czy wielu wersjach językowych, zapanować nad wyglądem tekstu jest niezwykle trudno.
Ale mam poczucie, że to też coś, co czyni naszą pracę po prostu ciekawą.
Podsumowanie
Jak już wspominałam, w internecie nie czytamy treści jak książek, czyli nie czytamy każdego słowa po słowie, tylko wchodzimy na strony z jakimś konkretnym zamiarem. Np. szukamy przepisu, informacji, sprawdzamy czy polecany link jest faktycznie ciekawym artykułem albo wchodzimy gdzieś po rozrywkę, żeby bezmyślnie poscrollować i zająć sobie czas.
Częściej więc skanujemy treści wzrokiem w poszukiwaniu słów kluczy, elementów, które nas zaciekawią albo dadzą poczucie, że zbliżamy się do treści, po które przyszliśmy. Jest takie ciekawe pojęcie jak zapach informacji – czyli trochę jak zwierzęta, szukamy „tropów” w warstwie wizualnej i tekstowej strony lub aplikacji.
Stosunkowo łatwo też stracić nam uwagę kiedy scrollujemy treści, zwłaszcza gdy pojawiają się obok np. reklamy lub dodatkowe informacje (np. belki boczne z polecanymi artykułami). No i zmienia się trochę kontekst użycia produktów cyfrowych, gdy korzystamy z urządzeń mobilnych, bo oznacza to, że w różnych sytuacjach te treści będziemy przeglądać.
Czasami będzie wiązało się to, z regularnym odrywaniem wzroku od ekranu, bo np. spacerujemy chodnikiem i czytamy coś jednocześnie.
Trzeba pamiętać, że teksty w interfejsie nie występują w izolacji. Jest dookoła mnóstwo innych elementów, które będą walczyć o uwagę – kolorowe tła, animacje, przyciski i zdjęcia. Samo zadbanie o warstwę tekstową może być niewystarczające żeby zadbać o czytelność informacji i skupienie naszej uwagi w odpowiednich miejscach. Dlatego na projekt patrzymy jak na całość a tekst traktujemy jak jeden z elementów graficznych tego projektu.
Pamiętajcie też, że nawet najpiękniej zaprojektowany tekst, jeśli jest nieciekawy lub nie jest tym, czego szukają użytkownicy, po prostu nie zostanie przeczytany.
