Typografia w projektowaniu UI – poznaj 5 wskazówek!

W dzisiejszych czasach typografia odgrywa znaczącą rolę w tworzeniu interfejsu użytkownika, który powinien być czytelny, intuicyjny, a także piękny. Chociaż projektowanie aplikacji mobilnej, strony internetowej lub magazynu drukowanego może wydawać się zupełnie inną rzeczą, do wszystkich tych mediów i nie tylko do nich, mają zastosowanie pewne podstawowe zasady projektowania. Poznajcie je wszystkie!

Hierarchia i rozmiar

Aby zapewnić przejrzystą strukturę wszystkim elementom projektu, konieczne jest uporządkowanie tekstu. W Twoim projekcie zapanuje hierarchia, kiedy stworzysz elementy tekstowe o różnych rozmiarach. Czy chcesz, aby nagłówek strony był znacznie większy niż treść i ją przytłaczał? Mamy nadzieję, że nie. Poniżej znajdziesz ściągawkę przedstawiającą najczęściej spotykane proporcje dla standardowych wyświetlaczy, tak aby Twój projekt wyglądał przejrzyście i estetycznie.

Czcionki

Istnieje wiele rodzin czcionek i ich szeroka oferta do wyboru. Ale jeśli chodzi o projektowanie interfejsu, sprawdzi się znana zasada: mniej znaczy więcej. Bez względu na to, czy zamierzasz kupić profesjonalną rodzinę czcionek, czy użyć niektórych swobodnie dostępnych czcionek, najprostsze opcje będą najlepsze. W większości przypadków prosty oznacza bezszeryfowy, ponieważ jest łatwy do odczytania na wyświetlaczach cyfrowych. Zawsze jednak należy pamiętać o głównym celu projektu, jego pożądanym wyglądzie i odbiorze przez użytkownika. Zachęcamy do poszukiwań i znalezienia idealnego dopasowania do projektu. To nie znaczy, że zawsze należy korzystać z płatnych czcionek – można z powodzeniem wybrać zaledwie kilka darmowych fontów i stworzyć piękny interfejs. Oto kilka przykładów.

Jeśli wolisz bardziej wyrafinowany wygląd, oto mój najlepszy wybór dla płatnych czcionek.

Wyrównanie tekstu

Ilekroć zastanawiasz się, jak wyrównać zawartość tekstową w projekcie – idź za wyrównaniem do lewej (chyba, że pracujesz z językami hebrajskim, arabskim lub, oczywiście, z językami Dalekiego Wschodu). W większości przypadków ważne jest, aby treść była czytelna i wyrównana do lewej. W przypadku niektórych wyśrodkowanych tekstów może to być ciekawy pomysł, ale trzymaj fonty nisko i używaj tylko nagłówków lub krótkich fragmentów liter, takich jak cytaty.

Rozstaw

Odstępy pomiędzy wierszami to odległość w pionie między wierszami tekstu. Ułatwia to przeglądanie treści wzrokiem i jest ważne zwłaszcza w przypadku dużych fragmentów tekstu, takich jak artykuły, wpisy na blogu lub dłuższe akapity. Słabe odstępy między wierszami utrudniają czytanie. Dobrą praktyką jest ustawienie odstępów między wierszami na około 150% wysokości tekstu. Gdy łączysz różne poziomy treści tekstowej, tj. nakładki, nagłówki, treść i wezwanie do działania, zaleca się również zachowanie spacji między nimi, aby uczynić ją bardziej elegancką i czytelną.

Odstępy między literami to oczywiście odległość w poziomie między pojedynczymi literami. Zwykle nie będziesz zbytnio zmieniać odstępów między literami, ale uważam, że bardzo fajnie jest zmniejszyć odstępy, jeśli chodzi o mniejsze etykiety z dużymi literami (na przykład w polach wejściowych), na około 50 punktów co daje świetny i przejrzysty efekt.

Kolor

Chociaż pożądane jest, aby tekst był czarny na białym tle w większości przypadków interfejsu użytkownika, pierwszy niekoniecznie musi być w 100% czarny. Dobry kontrast jest kluczowy, ale zbyt duży może powodować zmęczenie oczu. Dobra praktyka polega na tym, aby kopia była nieco jaśniejsza niż nagłówek. Osobiście lubimy zaczynać od numeru 121212 dla nagłówków i wszystkiego, co ma się wyróżniać, oraz # 333333 lub # 555555 dla kopii treści. Dodatkowe informacje, takie jak autor artykułu lub data utworzenia, mogą być czasami jeszcze jaśniejsze, np. #AAAAAA.

Mamy nadzieję, że powyższe informacje okażą się przydatne podczas pracy nad nowym projektem interfejsu użytkownika.

Zapraszamy do lektury poprzednich artykułów na naszym blogu >>> klik!