Rozmiar fontu powinien wynosić minimum 16 pkt dla tekstu podstawowego – to zalecenie od Googla. Apple natomiast sugeruje minimalne 17 pkt. Pamiętaj jednak, że Google oraz Apple swoje wytyczne opierają o własne systemowe fonty czyli dla Google jest to Roboto, natomiast dla Apple jest to San Francisco (tutaj jako ciekawostkę powiem Ci, że font San Francisco użyjesz tylko dla urządzeń marki Apple. Natomiast font Roboto będzie się dobrze prezentował na każdym urządzeniu).
Są to świetnie skrojone fonty, dobrze wyglądające niemal przy każdej zastosowanej wielkości. Dlatego upewnij się czy krój, który wybrałeś do projektu, wygląda również dobrze i czytelnie, nawet przy małej wielkości – 12 pkt i niżej.
Jeśli masz wrażenie, że jest zbyt mały, zastosuj zamiast zalecanego 16 pkt 18 pkt. To również bardzo często stosowana wartość w projektach zwłaszcza w tych z większa ilością tekstu.
W tekście uzupełniającym zastosuj co najmniej 2 pkt różnicy między tekstem głównym. Czyli jeśli tekst główny ma 16 pkt, to tekst uzupełniający będzie mieścił się w przedziale 12 – 14 pkt.
Należy również pamiętać, że mniejsze rozmiary tekstu są zwykle lepszym wyborem dla stron z dużą interakcją, gdzie użytkownik cały czas musi w coś klikać, przesuwać, zmieniać. Natomiast gdy w projekcie masz więcej statycznej treści np. blog czy portal informacyjny, to dobrze jest ułatwić użytkownikowi czytanie i zastosować większy rozmiar 18 – 20 pkt i więcej. Z kolei jeśli projektujesz pod bardzo duże ekrany jak np. telewizory to musisz znacząco podnieść rozmiar fontu do około 32 pkt.
Wielkość nagłówka
Jeśli natomiast chodzi o wielkości nagłówka to na pewno zaobserwowałeś pewien trend, który polega na stosowaniu bardzo dużych nagłówków. Nagłówki w ostatnich latach znacznie się powiększyły i ze średnich wielkości 20 – 32 pkt urosły do średniej 38 – 50 pkt.
Musisz jednak wiedzieć, że tak duże litery mogą źle wyglądać na małych ekranach smartfonów. Użycie dużego rozmiaru nagłówka w aplikacjach mobilnych może powodować, że nagłówek jest rozciągnięty do 3 – 4 akapitów, a zawiera tylko 1 lub 2 słowa w wierszu. Tak jak w przykładzie poniżej.
Nie wygląda to estetycznie. Nagłówek powinien mieścić się w przedziale 2 do 3 akapitów. Jeśli Twój nagłówek na małym ekranie, rozbity jest na 3 akapity i więcej to znak, by zmniejszyć rozmiar fontu.
Jeśli nie wiesz jaką dobrać wielkość nagłówka w stosunku do tekstu głównego to trzymaj się takiej zasady:
– nagłówek h1 – 300% wielkości fontu z tekstu podstawowego. Załóżmy że tekst na stronie masz 18 pkt. Zatem dla nagłówka h1 otrzymasz wynik 54 pkt.
– nagłówek h2 – 200% wielkości fontu czyli jeśli masz tekst wielkości 18 pkt to dla nagłówka otrzymasz wynik 36 pkt.
– nagłówek h4 – jeśli w tekście tworzysz nagłówki uzupełniajcie, a na pewno tak jest, to pomnóż wielkość tekstu podstawowego przez 130 -150 %.
Jeśli spodobały Ci się porady z tego artykułu, to zapraszam Cię do zapoznania się z naszym ebookiem “przeprojektowani”, gdzie znajdziesz mnóstwo wiedzy z zakresu projektowania Ui/Ux.
