niezależnie od tego, czy jest to na naszych telefonach, w książkach czy na stronach internetowych, stale trawimy słowa pisane. Od broszur instruktażowych po fronty sklepowe, typ jest wszędzie wokół nas. Często zastanawiamy się nad siłą słowa pisanego, ale rzadko rozważamy rolę projektanta w naśladowaniu tonu słowa lub zdania.
Za kulisami projektant poświęcił czas na rozważenie związku między wyglądem tekstu a tym, co mówi tekst. W rzeczywistości różne nastroje, atmosfera i emocje można wyrazić po prostu poprzez wybór typu. Ale czym właściwie jest typografia-i dlaczego jest tak istotna?
w tym artykule zajmiemy się wszystkim, co musisz wiedzieć o typografii. Zaczniemy od definicji typografii, w tym krótkiej historii jej początków. Następnie zajmiemy się korzyściami płynącymi z dobrej typografii i jej wpływem na użytkowników. Na koniec przyjrzymy się różnym elementom składającym się na typografię i ich znaczeniom.
oto co omówimy:
- czym jest typografia?
- dlaczego typografia jest ważna?
- różne elementy typografii
- Jak wybrać odpowiedni krój dla swojej strony internetowej
- wnioski
gotowe? Zanurzmy się!
czym jest typografia?
zacznijmy od podstaw: czym właściwie jest typografia? W istocie typografia jest sztuką układania liter i tekstu w sposób, który sprawia, że kopia jest czytelna, przejrzysta i atrakcyjna wizualnie dla czytelnika. Typografia obejmuje styl czcionki, wygląd i strukturę, która ma na celu wywołanie pewnych emocji i przekazanie określonych wiadomości. Krótko mówiąc, typografia jest tym, co ożywia tekst.
w poniższym filmie, Opiekunka Fundacji UI design, Olga, wyjaśnia, dlaczego typografia ma znaczenie—i jaka to różnica dla użytkowników.
Typografia może być datowana na XI wiek, podczas innowacji ruchomego typu. Przed erą cyfrową typografia była wyspecjalizowanym rzemiosłem związanym z książkami i czasopismami, a ostatecznie z pracami publicznymi. Pierwszy przykład typografii można zobaczyć w Biblii Gutenberga, która zapoczątkowała rewolucję typograficzną na zachodzie. Ciekawostka: styl tekstu używany w Biblii Gutenberga jest teraz znany jako Textura i znajdziesz go w rozwijanym menu czcionki w głównych aplikacjach komputerowych!
przenieś się do współczesności, gdzie typografia kojarzy się głównie zarówno ze światem cyfrowym, jak i z drukiem. Wraz z narodzinami Internetu przyszła twórcza eksplozja sztuki typografii. Nagle projektanci stron internetowych mieli do dyspozycji mnóstwo czcionek i opcji czcionek, dzięki czemu typografia była bardziej zróżnicowana wizualnie niż kiedykolwiek wcześniej.
dlaczego typografia jest ważna?
Typografia to o wiele więcej niż tylko wybór pięknych czcionek: jest ważnym elementem projektowania interfejsu użytkownika. Dobra typografia ustanowi silną hierarchię wizualną, zapewni równowagę graficzną stronie internetowej i nada ogólny ton produktowi. Typografia powinna prowadzić i informować użytkowników, optymalizować czytelność i dostępność oraz zapewniać doskonałe wrażenia użytkownika.
zagłębimy się nieco głębiej w to, dlaczego typografia jest tak ważna.
Typografia buduje rozpoznawalność marki
dobra typografia nie tylko poprawi osobowość witryny, ale twoi użytkownicy podprogowo zaczną kojarzyć kroj czcionki prezentowane na twojej stronie z Twoją marką. Unikalna, spójna typografia pomoże Ci stworzyć silnego użytkownika, zbudować zaufanie do użytkowników i pomóc w rozwoju marki.
Typografia wpływa na podejmowanie decyzji
Typografia ma ogromny wpływ na sposób, w jaki użytkownicy trawią i postrzegają informacje przekazywane przez tekst. Przyciągający wzrok typ jest o wiele bardziej przekonujący niż słabe czcionki, które nie wzmacniają przekazu tekstu.
Typografia przyciąga uwagę czytelników
dobra typografia może być różnicą między kimś przebywającym na twojej stronie przez minutę lub pół godziny. Ważne jest, aby Twoja strona była wizualnie stymulująca i zapadała w pamięć, a typografia odgrywa ogromną rolę w tym procesie.
różne elementy typografii
aby rozpocząć pracę z typografią, musisz najpierw uporać się z ośmioma podstawowymi elementami typograficznymi.
czcionki i kroje czcionek
istnieje pewne zamieszanie wokół różnicy między krojami czcionek i czcionek, z których wiele traktuje je jako synonimy. Krój pisma to styl projektowania, który składa się z niezliczonych znaków o różnych rozmiarach i wadze, podczas gdy czcionka jest graficzną reprezentacją znaku tekstowego. Mówiąc najprościej, krój pisma to rodzina pokrewnych czcionek, podczas gdy czcionki odnoszą się do gramatur, szerokości i stylów, które tworzą krój pisma.
istnieją trzy podstawowe rodzaje krojów pisma: serif, sans-serif i decorative. Aby interfejs był czytelny i usprawniony, dobry projektant nigdy nie będzie używał więcej niż trzech czcionek—i ograniczy czcionki dekoracyjne do minimum. Większość projektantów interfejsu łączy czcionki serif z czcionkami bezszeryfowymi, takimi jak umieszczanie tekstu głównego w czcionce bezszeryfowej i umieszczanie tytułu w czcionce bezszeryfowej lub odwrotnie.
kontrast
podobnie jak hierarchia, kontrast pomaga przekazać, które pomysły lub wiadomości chcesz podkreślić swoim czytelnikom. Spędzanie czasu na kontraście sprawia, że tekst jest interesujący, znaczący i przyciąga uwagę. Większość projektantów tworzy kontrast, bawiąc się różnymi krojami, kolorami, stylami i rozmiarami, aby uzyskać efekt i rozbić stronę.
spójność
zachowanie spójnych krojów pisma jest kluczem do uniknięcia mylącego i niechlujnego interfejsu. Podczas przekazywania informacji ważne jest, aby trzymać się tego samego stylu czcionki, aby czytelnicy natychmiast zrozumieli, co czytają i zaczęli zauważać wzór. Chociaż do pewnego stopnia można bawić się poziomami hierarchii, dobrą praktyką jest ustanowienie spójnej hierarchii krojów pisma (jedna spójna czcionka dla nagłówków, druga dla podtytułów) i trzymanie się jej.
Biała spacja
często określana jako „spacja ujemna”, Biała spacja to spacja wokół tekstu lub grafiki. Jest często pomijany i ma tendencję do niezauważania przez użytkownika, ale właściwe użycie białej spacji zapewnia czytelność interfejsu i czytelność tekstu. Biała przestrzeń może nawet zwrócić uwagę na tekst i zapewnia ogólne wrażenia estetyczne. Białe spacje często mają postać marginesów, padding lub po prostu obszarów bez tekstu lub grafiki.
wyrównanie
wyrównanie to proces jednoczenia i komponowania tekstu, grafiki i obrazów w celu zapewnienia równej przestrzeni, rozmiaru i odległości między każdym elementem. Wielu projektantów interfejsu tworzy marginesy, aby upewnić się, że ich logo, nagłówek i treść tekstu są ze sobą wyrównane. Podczas dostosowywania interfejsu użytkownika warto zwrócić uwagę na standardy branżowe. Na przykład wyrównanie tekstu do prawej strony wydaje się sprzeczne z intuicją dla czytelników, którzy czytają od lewej do prawej.
Kolor
kolor jest jednym z najbardziej ekscytujących elementów typografii. To jest, gdzie projektanci mogą naprawdę stać się kreatywni i podnieść interfejs na nowy poziom. Kolor tekstu nie należy jednak lekceważyć: przybicie koloru czcionki może wyróżnić tekst i przekazać ton wiadomości – ale niewłaściwe wykonanie może spowodować bałagan w interfejsie i tekście, który koliduje z kolorami witryny.
kolor ma trzy kluczowe składniki: wartość, odcień i nasycenie. Dobry projektant będzie wiedział, jak zrównoważyć te trzy elementy, aby tekst był atrakcyjny i czytelny, nawet dla osób z wadami wzroku. Często projektanci będą to testować, przeglądając tekst w skali szarości (bez koloru) i wprowadzając poprawki, jeśli tekst jest zbyt ciemny lub zbyt jasny na tle koloru.
hierarchia
ustalanie hierarchii jest jedną z najważniejszych zasad typografii. Hierarchia typograficzna ma na celu stworzenie wyraźnego rozróżnienia między wybitnymi fragmentami kopii, które powinny być zauważone i przeczytane jako pierwsze, a standardową kopią tekstu. W dobie krótkich zainteresowań wywołanych przez media społecznościowe projektanci są zachęcani do bycia zwięzłymi i tworzenia krojów pisma, które pozwalają użytkownikom konsumować niezbędne informacje w krótkim czasie.
hierarchia może być utworzona za pomocą rozmiaru, koloru, kontrastu i wyrównania. Na przykład, jeśli masz linię kopii z ikoną wykrzyknika na początku, która jest czerwona i większa niż poprzednia kopia, jest to wizualna wskazówka dla czytelników, że jest to wezwanie do działania. Najbardziej typowym przykładem hierarchii typograficznej jest rozmiar: nagłówki powinny być zawsze większe niż podtytuły i standardowy tekst.
jak dobrać odpowiedni krój do swojej strony internetowej?
teraz, gdy zapoznaliśmy się z różnymi elementami typografii, porozmawiajmy o procesie wyboru krojów pisma dla twojego interfejsu. Przy tak wielu różnych czcionkach i krojach pisma do wyboru, łatwo czuć się przytłoczonym. Dokonanie właściwego wyboru zależy od znacznie więcej niż tylko zobaczyć, co wygląda ładnie. Oto kilka kluczowych kwestii:
pomyśl o osobowości
jak chcesz, aby użytkownicy czuli się, gdy po raz pierwszy wchodzą na Twoją stronę. Chcesz naśladować przyjazną atmosferę? Czy chcesz, aby strona była wysokiej klasy, przyjazna, zabawna lub poważna? Konieczne jest, aby typografia odzwierciedlała osobowość marki lub produktu. Dobrym punktem wyjścia w obliczu tego wyzwania jest zdefiniowanie podstawowych cech marki i rozpoczęcie zbierania krojów, które odzwierciedlają te cechy. Stamtąd możesz zacząć zauważać trend.
zastanów się nad tonem
równie ważne jest zastanowienie się, jak czcionka harmonizuje z tonem komunikatu. Na przykład, jeśli chcesz przekazać poważne lub ważne informacje, wybierz mniej stylizowaną lub dekoracyjną czcionkę, która jest zarówno czytelna, jak i ogranicza rozproszenie uwagi.
nie oszczędzaj na funkcji
funkcja jest tak samo ważna jak forma: nie ma nic gorszego niż strona internetowa, która wygląda ładnie, ale jest całkowicie nieczytelna, co prowadzi do kliknięcia niewłaściwego przycisku lub niewłaściwego skręcenia, ponieważ instrukcje były niejasne. Decydując o tym, jakie kroje pisma należy uwzględnić w interfejsie, Ustaw styl, estetykę i głos na bok i zastanów się, czy czcionka jest czytelna, czytelna i dostępna. Czy tekst może być czytelny bez wysiłku? Czy postacie są wystarczająco różne?
rozważ wydajność
jedną z rzeczy, które wielu projektantów często pomija, jest wybór krojów czcionek przyjaznych dla przeglądarki internetowej. Powszechnie używane biblioteki czcionek, takie jak Google fonts, oferują internetowe pliki czcionek, które mogą być idealnie renderowane w przeglądarce bez żadnych problemów. Wskazówka: podczas pobierania czcionek internetowych nigdy nie należy pobierać więcej zestawów znaków niż jest to konieczne. W ten sposób unikniesz nadwagi!
Zainspiruj się
Jeśli nie wiesz, od czego zacząć, poświęć trochę czasu, aby zobaczyć, co robią inni ludzie. Otwórz oczy na typografię, którą widzisz wokół siebie. Czy można zauważyć podobne wzory? Czy widzisz dobre i złe przykłady typografii? Nawet śledzenie hashtagów typograficznych w mediach społecznościowych lub przeglądanie typografii na Pintereście da ci kilka dobrych pomysłów na to, co tam jest. Możesz również zajrzeć do tych ośmiu trendów typograficznych, aby uzyskać dalszą inspirację.
poświęć trochę czasu, aby przetestować
najlepszy sposób na rozszyfrowanie, której czcionki użyć do interfejsu? Test, test i test! Zbierając przydatne informacje zwrotne od prawdziwych użytkowników, uzyskasz jaśniejszy wgląd w to, co działa, co nie, co jest czytelne i co wydaje się sprzeczne z intuicją lub niezrozumiałe.
wnioski
Typografia jest często pomijana, ale jest kluczowym elementem projektowania interfejsu użytkownika. Opanowanie typografii sprawi, że staniesz się fantastycznym projektantem interfejsu użytkownika! Jeśli nie jesteś pewien, od czego zacząć, dlaczego nie udać się do swoich ulubionych stron internetowych i zacząć notować, jakie kroje pisma zostały one przeznaczone.
chcesz dowiedzieć się więcej o projektowaniu interfejsu użytkownika? Sprawdź podobne posty na blogu:
- 10 przykładów pięknych blogów, które przybiły swój interfejs użytkownika
- 32 elementy interfejsu użytkownika dla projektantów interfejsu użytkownika: twój ostateczny słowniczek
- oto jak zaprojektować ikonę od zera: przewodnik krok po kroku