Tekst stanowi 95% tego co przeglądamy. Prawdopodobnie tak samo będzie i z tym artykułem. Zdjęcia to tylko dodatki które przyciągają naszą uwagę i cieszą oko. Poprzez typografię Ty jako designer pomagasz użytkownikowi znaleźć interesujące go rzeczy. Dzięki niej przekazywane są informacje, więc jeśli ktoś nie jest w stanie czegoś przeczytać staje się to bezużyteczne.
UWAGA!
Poprzez pogrubienie wyróżniasz daną część tekstu, która według Ciebie jest ważniejsza niż reszta. Może to być większa czcionka, mniejsza odległość pomiędzy literami.
UWAGA!
Ten sam tekst, ale w żaden sposób niewyróżniony kojarzy się z czymś spokojniejszym. Można powiedzieć że wygląda on też bardziej przyjacielsko, nie jest krzykliwy i wymowny. Osiągniemy to również przez zastosowanie większej odległości pomiędzy wyrazami.
A w praktyce wygląda to tak. W nagłówku zastosowana jest większa i pogrubiona czcionka, czyli z góry wiadomo że to jest najważniejsza część, która ma zachęcić nas do zobaczenia więcej. Pod zdjęciem rozmiar czcionki trzech informacji jest taki sam, ale przez zastosowanie pogrubienia również w łatwy sposób jesteśmy w stanie zauważyć ważniejszą część.
Czasami chcemy przekazać coś ważnego, chcemy by nasz głos został usłyszany. Ale ze względu na delikatność poruszanej przez nas tematyki, musimy być ostrożni w doborze czcionki.
Tutaj wybrano czcionkę z kroju Helvetica. Oba przykłady charakteryzują się silnym przekazem, ale ze względu na odległość pomiędzy literami nie budzą agresji u osób przeglądających stronę. Poprzez tą jedną zasadę możemy w sposób świadomy kontrolować emocjami jakie będą towarzyszyć człowiekowi podczas przeglądania naszego projektu.
Wyraźny napis DOOMSDAY nie wygląda już tak przyjaźnie prawda? Duży pogrubiony tytuł z nieznaczną przerwą pomiędzy literami. Czytając nawet na głos hasła powyżej nie podnosimy szczególnie głosu, nie zmieniamy jego barwy. Spróbuj teraz przeczytać tytuł z powyższej okładki. Jest różnica prawda? Czujesz to napięcie, w sposób jak jest on przedstawiony domyślasz się że masz do czynienia z katastrofą, a nie bajką dla dzieci.
Wybór odpowiedniej typografii stwarza wizualny balans i UDC czyli użyteczność, dostępność i czytelność. Wszystkie ze sobą współpracują i w efekcie tworzy się zrozumiała i efektywna wizualna komunikacja pomiędzy stroną i odbiorcą.
Duży, wyraźny, czytelny tytuł dzięki któremu z góry wiemy co zawarte będzie w artykule jest zdecydowanie najważniejsza częścią tekstu. Znacznie mniejszą czcionką przytoczono cytat Martina Luthera Kinga, nie możemy powiedzieć że jest on w jakiś sposób mniej czytelny. Dodano tu większe odległości pomiędzy literami jak i samymi wyrazami. Następnie przy użyciu innej czcionki wymieniono autora z przypisem kim jest. Chce żebyście zauważyli tutaj że poprzez sposób w jaki traktujemy poszczególne części tego artykuły tworzy tak jakby plan podróży jaki Ty jako czytelnik masz odbyć na danej stronie. Strona się z Tobą komunikuje.
Każdy może sobie wybrać czcionkę. Jako projektant masz wiedzieć jak traktować tekst, który jest Twoim wizualnym projektem. Tekst jest tak samo ważny jak obrazki czy inne obiekty znajdujące się na stronie. I wcale nie jest to takie łatwe, bo musisz zastanowić się jaki będzie miał rozmiar, ile zastosujesz przestrzeni, jak go wystylizujesz. Zapamiętaj więc jedną rzecz...
TYPOGRAFIA TO NIE WYBÓR CZCIONKI
Typografia kombinowanie wyglądem liter w sposób celowy by stworzyć podczas czytania takie optymalne emocjonalne doświadczenie. Ale musimy być ostrożni. Istnieje takie coś jak rozpoznawanie wzoru. Weźmy na przykład literę "A". Delikatnie ją wykrzywiając, albo sprawiając że wygląda bardziej bajkowo nadal jesteśmy w stanie bez problemu stwierdzić o jaką literę chodzi.
Ale dokonując takich zmian musimy pamiętać o zdrowym rozsądku. Jeżeli przekroczymy granicę abstrakcji i swojej wyobraźni rozpoznanie stanie się o wiele trudniejsze i kłopotliwe. Będziemy tracić czas na rozszyfrowanie "co autor miał na myśli". Tak jak w przykładzie poniżej.
Zabawa z rozpoznaniem jednej litery może nie jest tak emocjonująca. Ale wyobraź sobie, że ten artykuł napisany jest czcionką od której po pierwszej linijce, a jeśli jesteś uparty to po pierwszym paragrafie rozboli Cię głowa. Nie dość, że ilość informacji zawarta w artykułach nie jest znikoma to jeszcze zajmowałbyś się rozpracowywaniem słów napisanych w tajemniczy sposób.
Widać różnicę prawda? A to tylko dwa słowa, pomyśl co stałoby się jeżeli liczbę tą zwiększymy do 1500 znaków?
DOBRA TYPOGRAFIA IDZIE W PARZE Z WYRÓWNANIEM
Zazwyczaj wyrównujemy tekst do lewej strony, lub ustalamy wyrównanie obustronne. Wyśrodkowanie tekstu nie jest dobrym pomysłem - każda linijka będzie wtedy zaczynała się i kończyła i innym miejscu. Człowiek jako wzrokowiec czyta od lewej strony do prawej i jeżeli tekst rozpoczynał się będzie w tym samym punkcie znacznie ułatwi to mu czytanie. W innym przypadku mózg musi przez te kilka sekund zastanawiać się gdzie rozpoczyna się kolejna linijka. Daje nam to prawie osiem razy więcej roboty.
Zauważyłeś też na pewno różne przestrzenie pomiędzy poszczególnymi literami. Fachowo nazwiemy ją KERNING. Wpływa ona na czytelność i zrozumienie tego co jest napisane. Gdy w jednej linijce przestrzeń ta zmieni się kilkukrotnie nie jeden z nas pewnie rwał by sobie włosy z głowy. Zauważylibyśmy tą różnice i w efekcie by nas to rozpraszało. Przestrzeń pomiędzy literami i poszczególnymi słowami powinna być taka sama! Tej zasady nie można kwestionować. Przydatny może być artykuł How To Kern. Zobrazuje Ci to przykładem właśnie z tamtego artykułu.
Słowo po kerningu zajmuje mniej miejsca, wydaje się bardziej zbite, ale jest wyraźne i czytelne to przez fakt że wyrównane zostały odległości pomiędzy poszczególnymi literami. Zauważ odległość liter "x" i "a" oraz "p" i "l" wygląda jakby te dwie wymienione przeze mnie jako drugie ostro się pokłóciły.
Ale jak to z regułami bywa, występują wyjątki. Tak jest w przypadku chociażby liter "r" i "n" celowo odległość pomiędzy nimi będzie delikatnie większa, żeby nie stracić czytelności. Gdyby znajdowały się zbyt blisko siebie mogły by wyglądać jak litera "m". Nie stanowi to jakiejś większej przeszkody, bo jeśli reszta liter jest spójna oko najnormalniej w świecie pominie tą anomalie.
Jeśli mamy już wyjaśnione odległości pomiędzy literami zajmijmy się odległościami pomiędzy liniami zwanymi LEADING. Wzrost tych przestrzeni pozwala na szybsze czytanie danego tekstu co w efekcie przyspiesza jego zrozumienie. Jeżeli nie zastosujemy odpowiednich odległości nasze poszczególne myśli nie będą od siebie odseparowane. Akapity nie są wystarczającą pomocą w takim przypadku. Wolna linijka jest też odpoczynkiem dla osoby która czyta nasze artykuły. Nie męczy się on wtedy i jesteśmy w stanie przyswoić więcej informacji.
Po lewej stronie znajduje się jeden duży kawałek informacji nawet nagłówek i treść tworzą jedną nieoddzieloną grupę. Po dodaniu przerwy jesteśmy w stanie powiedzieć jakie relacje występują pomiędzy poszczególnymi liniami. Nie są zmiksowane razem jakby były jednym ciągłym tekstem. To sprawia że wysiłek użytkownika związany z rozpoznawaniem zależności znacznie się zmniejsza. UI design nie jest tylko tym jak wyglądają rzeczy, ale również mówi o tym jak łatwo jest wykorzystywać to co widzimy i to co jest na ekranie - to wszystko składa się na doświadczenie, które przeżywa użytkownik znajdujący się na naszej stronie.
W tekście wykorzystujemy w praktyce to o czym pisałam w artykule na temat HIERARCHII.
Dodawanie tych linijek przerwy sprawia że tekst jest podzielony na konkretne grupy. Należy pamiętać że zasad, które Wam przekazałam nie używamy oddzielnie, a wręcz staramy się przestrzegać ich wszystkich na raz. Typografia to dobry przykład, w którym nie sprawdza się powiedzenie "więcej znaczy lepiej". Teraz przyszedł czas na Twoje eksperymentowanie.
Jeśli masz jakieś pytania, wątpliwości lub chcesz podzielić się swoją wiedzą z danego tematu - czekam na Twoją wiadomość w komentarzu :)
Komentarze
Prześlij komentarz