Centrum wiedzy o technologiach i pracy w IT

Typografia w web designie – 5 przydatnych wskazówek

Za czytelność stron i aplikacji internetowych w ogromnym stopniu odpowiada typografia. Szczególnie w aktualnych minimalistycznych trendach w projektowaniu stanowi ona główny kanał komunikacji z użytkownikiem strony, a jednocześnie odpowiada za dużą część aspektów wizualnych.

Ostatnia aktualizacja: 26.08.2022. Dodaliśmy informację o tym, jak dobierać font na stronę.

Nie udało się zapisać Twojej subskrypcji. Spróbuj ponownie.
Udało się! Widzimy się niebawem – newsletter wysyłamy w każdy wtorek

Otrzymuj za darmo unikalne poradniki, dane i wiedzę o pracy w IT – dostarczane co tydzień

Klikając “Zapisz mnie” wyrażasz zgodę na otrzymywanie e-maili od redakcji, a także ofert partnerów oraz akceptujesz naszą Politykę prywatności.

Dzisiaj jednak skupimy się na podstawowych zasadach, które pozwolą zyskać pewność, że typografia stanowi idealne dopełnienie reszty elementów. Przedstawiamy 5 przydatnych wskazówek, dzięki którym poradzisz sobie z doborem odpowiedniej typografii do Twojego projektu.

Sprawdź: Typografia. Książki, które musisz o niej przeczytać

1. Nie mieszaj zbyt dużej liczby krojów pisma

Łatwy sposób na brak spójności i chaos to przesadzenie z liczbą krojów pisma w jednym projekcie. W takim razie ile to maksimum? Najlepiej użyć jednej rodziny fontów, która posiada opcję wyboru różnych grubości.

Dwa kroje pisma mogą być dopuszczalnym wariantem, ale polecamy z niego korzystać głównie doświadczonym designerom. W przypadku mieszania dwóch rodzin fontów należy dobrać takie, które pasują do siebie i do całości projektu.

2. Odpowiednia liczba znaków w wierszu – typografia dla desktopu i formatów mobile

Według zaleceń Instytutu Baymard, limit znaków w wierszu dla najlepszej czytelności tekstów na ekranie laptopa czy na monitorze wynosi około 50-70. Dla formatów mobilnych będzie to odpowiednio mniej – około 30-40 znaków.

Dlaczego? Człowiek męczy się, czytając tekst złożony w zbyt szerokich kolumnach, a dodatkowym czynnikiem utrudniającym jest światło emitowane przez urządzenie. Wystarczy zadbać o ten drobny szczegół, aby typografia nie była przeszkodą w przyswajaniu treści.

3. Wybierz krój pisma, w którym da się rozróżnić podobne litery

Dorosły człowiek nie czyta pojedynczych liter w wyrazie, a wyraz jako całość. Jednak niedogodności związane z występowaniem zbyt podobnych liter, np. „l” (małe el) i „I” (duże i) mogą wprowadzać w błąd albo męczyć odbiorcę.

4. Typografia to nie tylko krój pisma, ale też interlinia, kerning, odstępy itd.

Nie staraj się na siłę zmieścić kolumny, zmniejszając interlinię między wierszami. Taki zabieg zepsuje czytelność tekstu i sprawi, że będzie wyglądał zwyczajnie źle. Podobnie też nie przesadzaj ze zbyt dużą interlinią lub nadmierną manipulacją kerningiem.

Odstępy między znakami czasami będą wymagały ręcznej poprawy, ale w miarę możliwości staraj się weryfikować efekty razem z inną osobą, która spojrzy na projekt świeżym okiem.

Zobacz: Moodboard – jak tworzyć tablice inspiracji w UX?

5. Zadbaj o odpowiedni kontrast kolorów

Typografia wymaga również tego, aby dobrze komponować ją z innymi elementami wizualnymi. Jedną z podstawowych kwestii jest kontrast. Tekst będzie kompletnie nieczytelny, szczególnie na ekranach o różnych rozdzielczościach, jeśli nie zadbasz o ten parametr.

Wybieraj kolory kontrastowe, lecz dobrze współgrające. Pamiętaj o tym, aby nie były zbyt jaskrawe i męczące w odbiorze dla użytkownika. Inne założenia możesz przyjąć np. w projektowaniu plakatów, a innych będą wymagały projekty webowe – pamiętaj o tym.

Najlepsze fonty na stronę internetową

Możliwości wyboru różnego rodzaju fontów są naprawdę duże. Warto jednak postawić na klasykę i prostotę z kilku powodów. 

  1. Popularne i proste kroje pisma wyświetlą się zawsze bez problemów.
  2. Czytelność fontów o zbyt strojnym charakterze jest znacznie mniejsza, a jednak priorytetem jest komfort czytania i użytkowania, w dalszej kolejności eksperymenty z estetyką. 
  3. Do dużych partii tekstów warto wybrać proste kroje pisma o wysokim stopniu czytelności.

Najprostszą metodą doboru fontów jest research na istniejących już stronach. Aby sprawdzić, z jakiego fontu korzysta dany serwis, wystarczy kliknąć na stronę prawym przyciskiem myszy i wybrać opcję Zbadaj. Następnie przejść do zakładki Computed i tam w sekcji font-family będzie informacja o używanym na stronie foncie.

Total
0
Shares
_podobne artykuły