Typografia ma znaczenie

Zacznijmy od utartego banału: dobrze zaprojektowana typografia sprawia że content weba czy apki jest ładny, czytelny i ogólnie nie nastręcza żadnych problemów. Ale w dobie powszechnej mody na UX albo jak kto woli „większej świadomości potrzeb użytkownika”, visul designerzy (full-stack designerzy czy po prostu projektanci „czegoś tam” odpowiedzialni za projektowanie typografii), muszą brać pod uwagę nie tylko suche aspekty techniczne, ale cały złożony proces wpływu fontów na doświadczenie człowieka. Od czego więc zacząć?

Po pierwsze – nie popsuć usability

Stawiając pierwsze kroki na typograficznym polu minowym na szczęście nie musimy odkrywać ameryki na nowo. Na przestrzeni ostatnich kilkunastu lat dorobiliśmy „zbioru dobrych praktyk” w zakresie projektowania typografii pod kątem produktów cyfrowych. Istnieją reguły projektowe, których używanie w sposób obiektywny (potwierdzony badaniami) poprawia dostępność contentu. Stosowanie tego designerskiego ABC w dużym skrócie powinno zagwarantować:

  • dobrą widoczność tekstu (właściwy krój, kontrast fontu oraz dostosowana wielkość)
  • komfort czytania (odpowiednia interlinia, kerning oraz ilość znaków w jednym wierszu)
  • zgodność z UI (spójność stosowanych reguł typograficznych z całym projektem )

microsoft

Microsoft stara się stosować jednolity wzorzec typograficzny we wszystkich swoich nowych produktach i serwisach internetowych. Segoe UI to font zaprojektowany i rozwijany pod kątem zastosowania w interfejsach tekstowych w obszarze wiodących produktów firmy.

Po drugie – „dobre wrażenie”

Schody moim zdaniem zaczynają się w miejscu, w którym musimy zadbać o to, aby typografia faktycznie wzbudzała pozytywne doświadczenie użytkownika, a nie była tylko gwarantem dobrej dostępności contentu. Nie sztuką jest nie spieprzyć typografii. Prawdziwym wyzwaniem jest sprawić, aby font i wszystkie magiczne sztuczki z nim związane powodowały u użytkownika efekt „wow”, nie generując przy tym żadnych problemów z użytecznością.

ikea

Od 2010 roku IKEA uczyniła z Verdany swój flagowy font. Konsekwentnie używana typografia zarówno w sieci jak i w materiałach drukowanych w jest znakiem rozpoznawczym szwedzkiego potentata.

Odpowiednio dobranym krojem pisma można znakomicie wzbudzać emocje i nastroje. Designerzy specjalizujący się zwłaszcza w projektowaniu logotypów, identyfikacji wizualnych mogliby powiedzieć na ten temat coś więcej. Ostatecznie dobry projekt odznacza się nie tylko ogólną poprawnością, ale czymś co sprawia, że wychodzi przed szereg, zdobywa konkurencyjną przewagę. Połączenie spójności, dostępności oraz tego „elementu dodanego” który angażuje użytkownika, przykuwa jego uwagę, zdobywa jego zaufanie, jest jak sądzę największym projektowym wyzwaniem, z którym musi zmierzyć się nie tylko pozostawiony sam sobie grafik, lecz cały zespół projektowy już na wczesnym etapie całej zabawy.

pkobp

Odważne połączenie autorskiego fontu przygotowanego dla banku ze starą dobrą Tahomą o bardzo „kompaktowym” rozmiarze. Dzięki takiemu zabiegowi serwis internetowy PKO Bank Polski zdecydowanie wyróżnia się na tle konkurencji.

Dlaczego nie warto lekceważyć typografii?

Typografia w zdecydowanej większości przypadków jest nośnikiem contentu, swoistym medium za pomocą którego komunikujemy się z użytkownikiem i mimo, że czytamy o wiele mniej niż kiedyś, to cały czas potrzebujemy dobrego opakowania chociażby do krótkich UI-jowych komunikatów.

W wypadku projektów, opartych na tekście, typografia powinna być jedną z pierwszych rzeczy „do zrobienia”, często czymś dużo ważniejszym niż bezduszne wireframy, które klepiemy często w pierwszej kolejności „na żądanie” lub z głupiego przyzwyczajenia. Zresztą jest to poniekąd kolejny argument za tym, aby w dużych zespołach visual designerzy pracowali nad projektem od samego początku, a nie tylko byli wyrobnikami od kolorowania makiet w jego „końcowej” fazie.

Faktem jest, że typografia jest tylko jednym z wielu aspektów visual designu, więc być może nie warto jej od razu podnosić do rangi kolejnej „uxowej świętości”? Z drugiej strony często zapominamy, że są projekty o których powodzeniu decyduje w znacznej mierze na przekór nie zawartość lecz samo opakowanie i właśnie w takich sytuacjach jako projektanci użyteczności powinniśmy przykładać do typografii szczególną wagę.

Może się przydać

Poradniki:

Zasady cyfrowej typografii w pigułce:
https://bootstrapbay.com/blog/web-typography-best-practices/

Dobre wprowadzenie w świat webowej typografii w języku polskim:
http://collegiumpapricum.com/2010/03/typografia-na-stronach-internetowych/

Narzędzia:

Przyjemne narzędzie do testowania kombinacji fontów:
http://andreasweis.com/webfontblender/

Coś podobnego j.w w wersji dla leniwych:
http://www.pearsonified.com/typography/

Przyjazne testowanie kontrastów i zgodności ze standardami:
http://contrastchecker.com/

Jestem projektantem stron www i fascynatem tematyki User Experience. W swojej pracy inspiruję się dziedzinami takimi jak antropologia, filozofia, psychologia, semiologia. Przy tym życiową praktykę i mierzalną użyteczność zawsze przedkładam nad książkową teorię. Największą inspiracją jest dla mnie obserwacja ludzkich zachowań w procesie interakcji z produktami cyfrowymi.

  • Myślę że warto umieścić w zestawieniu najczęściej używane fonty i dlaczego to jest comic sans :) I to ilu fontów optymalnie używać na stronie :)

    Ale przyjemny wpis, zazwyczaj ludzie nie doceniają typografii, a potrafi albo stworzyć fantastyczny odbiór strony albo zupełnie ją pogmatwać.

    Pozdrawiam.

Site Footer

Sliding Sidebar

Facebook