1. Używaj maksymalnie dwóch krojów pisma!
Do tego ich długość i szerokość powinna komplementować się nawzajem. Staraj się nie dobierać czcionek, które znacznie się od siebie różnią.
Często łączymy ze sobą na przykład Avenir i Georgie.
Ja gdy chcę dowiedzieć się czegoś więcej o czcionkach i jak wyglądają ze sobą odwiedzam stronę typ.io. Zobacz przykład pokazujący te dwie czcionki ww akcji.
Mają one podobne szerokości liter. To połączenie tworzy wizualną harmonie. Odległość pomiędzy literami również jest taka sama. Zapamiętać jednak należy, że czcionki, które dobieramy powinny różnić się między sobą. W przeciwnym razie jaki by był sens łączenia ich? Skoro wyglądają tak samo? Tak stałoby się jeżeli obie należały by na przykład do krojów Sarah albo Sans-serif. Także Twoje zadanie nie jest łatwe z jednej strony musisz znaleźć tą wizualną różnicę, która wzbudzi zainteresowanie, a z drugiej czcionki dobrać tak żeby ze sobą współgrały.
Zbyt wiele czcionek wprowadza nieład. Nie osiągamy wtedy tej jedności, harmonii. Nic nie łączy ze sobą tych czcionek. Nie musisz użyć ich aż tylu żeby osiągnąć ten efekt zróżnicowania. Manipuluj nimi poprzez zmianę rozmiaru, dodanie pogrubienia. To tworzy czystą wizualną hierarchie i wygląda o wiele przejrzyściej.
2. Limit w szerokości linii
Standardowo ww jednej linii powinno być około 60 liter, dla urządzeń mobilnych jest to 30-40 liter. W przypadku gdy liczba tych słów wynosi ponad 100 człowiek często czytając jej koniec zapomina co w ogóle czytał na początku. Popatrz chociażby na stronę mojego bloga - tekst nie zajmuje więcej niż połowę szerokości całej strony. Jeżeli jednak otworzysz ją na urządzeniu mobilnym tekst zajmie cały obraz, gdybyśmy dodali tam negatywną przestrzeń miałbyś wiele trudności w przeczytaniu tego artykułu.
3. Czytelność tekstu
Pamiętajmy o tym, że w naszym UI tekst będzie użyty w wielu różnych rozmiarach. Będą to nagłówki, tekst właściwy, ale też etykiety i przyciski. Musisz wybrać takie kroje pisma, które będą czytelne dla wszystkich tych części składowych. Proponuje żebyś już na początku przeprowadzał własne testy - jak szalony naukowiec. Ustal rozmiary liter dla tych elementów i sprawdź jak dana czcionka będzie wyglądała dla każdego z nich.
Kolejną rzeczą jest odległość pomiędzy literami. Jeżeli nie będzie ona wystarczająca może okazać się, że po zmniejszeniu czcionki Twój tekst będzie wyglądał jak zagubiony piksel z gier Atari. Także polecam wykonać takie testy na samym początku Twojej pracy nad stroną.
4. Czytelność związana z wyglądem liter
Czy w wybranej przez Ciebie czcionce z łatwością można rozpoznać daną literę? Dobrym przykładem jest litera "L" w niektórych krojach pisma jej mały odpowiednik łatwo pomylić z literą "I" jak chociażby na przykładzie poniżej.
Jedyną różnicą pomiędzy tymi dwoma literami jest wysokość - a i tak nie jest ona znacząca. W poprzednim podpunkcie wspominaliśmy o tym, aby uważać na odległości pomiędzy literami i jak wpływa na czytelność tekstu. Jeżeli bierzemy pod uwagę wygląd jest podobnie. Problematycznym jest rozszyfrowanie słowa gdy litery "r" i "n" są zbyt blisko siebie, podobnie jest z kombinacją "f" i "l". Najlepiej zobrazować to na przykładzie.
Teraz nie będzie to dla Ciebie aż tak duży problem, ze względu na powstanie OpenType.
5. Używaj przerwy pomiędzy paragrafami
Wspominałam o tym wcześniej. Dajesz wtedy odpocząć oczom. Nabiorą one siły przed kolejną emocjonującą częścią Twojego artykułu lub przedstawionej historii. Przerwa powinna być przynajmniej tak długa jak połowa wysokości liter, których użyłeś.
6. Używaj linii bazowych
Takim sposobem z łatwością określisz położenie danych elementów Twojego tekstu. Jeżeli kawałki tekstu nie są ze sobą powiązane to właśnie położenie pozwoli Ci stworzyć uporządkowany układ na stronie. Sprawi to że użytkownik szybko i z łatwością będzie się po niej poruszał.
7. Styl na ratunek
Używanie stylów pozwoli Ci na zaznaczenie wizualnej różnicy danej zawartości. Wybierając krój tekstu patrzysz na taki, który ma przynajmniej trzy style: normalny czyli regularny, potem pochylony - ja nazywam go kopniętym i pogrubiony. Z tymi trzema stylami i zmianą koloru już jesteś w stanie zróżnicować poszczególne kawałki tekstu. Czasami nawet nie będziesz potrzebował drugiej czcionki. Tak jak zrobiono to na stronie BBC News.
Jeśli masz jakieś pytania, wątpliwości lub chcesz podzielić się swoją wiedzą z danego tematu - czekam na Twoją wiadomość w komentarzu :)
Komentarze
Prześlij komentarz