10 zasad typografii internetowej, które powinien znać każdy projektant

Możesz włączyć do swojego projektu wiele elementów, które zwiększą zaangażowanie i utrzymają uwagę odwiedzających. Należą do nich obrazy, filmy, a nawet dźwięk. Jednak najważniejszą częścią prawie każdej witryny internetowej jest treść, którą odwiedzający czytają, aby uzyskać informacje, które czytają.

Jeśli chcesz, aby ta informacja była łatwiejsza do odczytania, interesująca wizualnie i aby ten tekst był dodawany do ogólnego projektu strony internetowej, musisz zrozumieć typografię. To sztuka i umiejętność sprawiania, by słowo pisane było zarówno funkcjonalne, jak i estetyczne.

Jeśli chcesz nauczyć się wykorzystywać typografię na swoją korzyść, zapoznaj się z tymi 10 zasadami, o których powinien pamiętać każdy projektant.

1. Przestań używać LoremIpsum po wstępnym procesie projektowania

Jeśli treść jest najważniejsza, dlaczego nie jest ona poważnie brana pod uwagę w procesie projektowania stron internetowych? Wykorzystując fałszywą treść jako symbol zastępczy, projektanci stron internetowych spychają treść do drugorzędnej roli. Jest to duża wskazówka, że ​​priorytety projektowe są nie do zniesienia. Nie jest to takie problematyczne na wczesnych etapach, na przykład, gdy szykujesz różne układy stron. Jednak po zawężeniu tematu ważne jest, aby podczas tworzenia ostatecznego projektu pracować z rzeczywistą zawartością sieci Web. Gwarantuje to, że to, co jest powiedziane na konkretnej stronie internetowej, ma takie samo znaczenie, jak układ i elementy wizualne.

Oprócz tego posiadanie rzeczywistego tekstu ma znaczenie pod względem projektu i układu. Nie chcesz być w stanie w pełni zaprojektować stronę internetową, tylko po to, by dowiedzieć się, że nie działa z rzeczywistą treścią. Dlatego niezwykle ważne jest, aby jak najszybciej uzyskać rzeczywisty tekst od klienta autora treści.

2. Stwórz tekst bezszeryfowy

Tekst szeryfowy jest absolutnie piękny. Są to świetne czcionki do drukowania oraz do większych zastosowań drukowania, takich jak nagłówki, tytuły i podtytuły. Niestety na ekranie szeryfy nie skalują się dobrze, jeśli chodzi o mniejsze wyświetlanie treści, takie jak bloki tekstu. Szeryfy, które ładnie wyglądają w większym rozmiarze, utrudniają czytanie tekstu, gdy czcionka staje się mniejsza. Z tego powodu zaleca się zapisywanie szeryfów w przypadku dużego tekstu i poleganie na sans, gdy czytelność może być problemem. Co więcej, skorzystaj z czystego, eleganckiego, nowoczesnego wyglądu czcionek sans i zapisz szeryfy dla prasy drukarskiej. W ten sposób nigdy nie będziesz musiał radzić sobie z pogorszeniem czytelności na korzyść czcionki, która wygląda ładnie.

3. Pomyśl o inteligentnych cytatach i innych symbolach na początku procesu projektowania

Możliwe, że odwiedziłeś witrynę, na której niektóre symbole nie wyświetlałyby się prawidłowo. Czasami są one zastępowane pytaniem lub ciągiem dziwnie wyglądających znaków. Innym razem po prostu ich tam nie ma. Zdarza się to często w przypadku sprytnych lub „kręconych” cytatów. Jest to często wynikiem utworzenia tekstu w MS Word lub innym pakiecie, a następnie przeniesienia go na stronę internetową. Rzeczy po prostu nie tłumaczą się zgodnie z oczekiwaniami. Jest również powszechny w przypadku symbolu Euro, znaków dwubajtowych i innych symboli zaczerpniętych z treści obcych.

Aby uniknąć tego problemu w ostatecznym projekcie, masz kilka opcji. Po pierwsze, możesz zmodyfikować zawartość, aby pozbyć się tych symboli. Działa to, jeśli chcesz zmienić symbole na język naturalny. Możesz także użyć HTML, aby upewnić się, że symbole są wyświetlane poprawnie, zamiast polegać tylko na kopiowaniu i wklejaniu. Cokolwiek zdecydujesz, przetestuj stronę internetową w każdej możliwej przeglądarce. To, co może rozwiązać problem z symbolami w jednej przeglądarce, w innej może w ogóle nie działać.

4. Zaawansowane umiejętności CSS są niezwykle ważne

Jeśli masz dobre umiejętności w zakresie CSS, Twoi odwiedzający powinni być w stanie poruszać się po stronach Twojej witryny w absolutnie bezproblemowy sposób. Jeśli odpowiednio utworzysz arkusze stylów, możesz mieć nawet wiele wersji tej samej strony, zachowując jednocześnie doskonałą ciągłość, jeśli chodzi o typografię. Oczywiście nie musisz używać wielu sztuczek. Dobry CSS może pomóc w uniknięciu drobnych, ale powszechnych problemów, takich jak zmiana kroju i rozmiaru czcionki z jednej strony na drugą.

Dlaczego spójna typografia jest taką koniecznością? Korzystanie z CSS w celu utrzymania spójnej typografii nadaje Twojej witrynie profesjonalny i wyrazisty wygląd. Oznacza to również, że nie musisz myśleć o typografii podczas projektowania każdej strony. Zamiast tego wystarczy użyć odpowiedniego arkusza stylów. Jeśli zdecydujesz, że na konkretnej stronie zamierzasz złamać normę i zrobić coś innego z typografią, aby stworzyć efekt lub zwrócić na coś uwagę, będzie się ona bardziej wyróżniać dzięki zastosowaniu CSS.

5. Ważna jest zarówno typografia mikro, jak i makro

Mikrotypografia dotyczy szczegółów typografii związanych z czytelnością. Na przykład odstępy są problemem związanym z mikrotypografią, podobnie jak skalowanie i kontrast. Wszystkie zmiany wprowadzane w celu zapewnienia, że ​​blok tekstu jest czytelny na dowolnym urządzeniu lub przeglądarce, są związane z mikrotypografią.

Makrotypografia odnosi się do sposobu, w jaki Twoje wybory dotyczące typografii są powiązane z ogólnym projektem. Odnosi się do estetyki.

Dobra typografia uwzględnia zarówno mikro-, jak i makro-typografię. Czy kiedykolwiek odwiedziłeś stronę internetową, która używała naprawdę schludnie wyglądającej, niestandardowej czcionki, która była również prawie niemożliwa do odczytania? Tak się dzieje, gdy zwraca się uwagę na makrotypografię, ale nie na mikrotypografię.

6. Poznaj treść, a także projekt

Jak wiesz, dobra strona internetowa ma płynność. Częścią tego jest czytelność treści znajdującej się na stronie. Omówiliśmy już, w jaki sposób wpływają na to takie rzeczy, jak szeryfy, i dyskutowaliśmy, w jaki sposób fikcyjny tekst nie zastępuje prawdziwego tekstu, jeśli chodzi o późniejsze fazy projektowania. Jeszcze nie skończyliśmy. Treść naprawdę jest królem. Gdy ostateczny projekt, w tym treść, jest na miejscu, musisz przeczytać stronę internetową.

Czytając zawartość po zakończeniu projektowania, możesz określić, czy występują problemy z odstępami lub łamaniem linii. Mogą one sprawić, że treść będzie myląca, a nawet niechcący zmienić jej znaczenie. Naprawienie tych problemów za pomocą kilku sztuczek typograficznych może zapewnić, że produkt końcowy będzie komunikował dokładnie to, co zamierzasz Ty lub Twój klient.

7. Zrozum znaczenie hierarchii

Hierarchia to mapa drogowa, którą dajesz osobom odwiedzającym Twoją witrynę. Możesz użyć obrazów, wideo, kolorów i (oczywiście) typografii, aby stworzyć tę hierarchię.

Jest to po prostu kwestia prowadzenia gościa od pierwszej rzeczy, którą chcesz, aby zobaczyli, do następnej i tak dalej. Dzięki typografii możesz użyć rozmiaru, zmian czcionki i odstępów, aby określić hierarchię, którą mają przestrzegać użytkownicy. W rzeczywistości, jeśli masz stronę, która nie konwertuje, możesz poeksperymentować z typografią, aby sprawdzić, czy jakiekolwiek wprowadzone przez Ciebie zmiany pomogą skierować odwiedzających do przycisku wezwania do działania.

8. Bądź kreatywny, ale ostrożny z kolorem

Najprostszym sposobem na zapewnienie, że nigdy nie będziesz mieć problemów z czytelnością spowodowanych problemami z kolorem czcionki i kolorem tła, jest użycie kolorów o najwyższym kontraście, czerni i bieli. Niestety, może to sprawić, że projekt będzie dość nudny.

Nie bój się używać kolorów. W rzeczywistości nie bój się używać kombinacji kolorów, które nie wydają się działać. Czasami wystarczy rozjaśnić lub przyciemnić o jeden lub dwa odcienie. Następnie twoja typografia zmienia się z nieczytelnej w doskonale rozpoznawalną i naprawdę fajnie wyglądającą.

9. Tekst wyśrodkowany na rowie

Problemy z wyśrodkowanym tekstem są liczne. Przede wszystkim może sprawić, że Twoje strony internetowe będą przypominać źle zaprojektowane ulotki. Poza tym prawie zawsze kończysz z dziwnymi marginesami i tekstem, który wygląda tak, jakby miał być wierszem lub linijką ze starego albumu rockowego. Chociaż używanie wyśrodkowanego tekstu w nagłówkach może być w porządku, zwykle najlepiej całkowicie go unikać. Trzymaj się tekstu dostosowanego do lewej, a Twoi czytelnicy będą znacznie łatwiej czytać Twoje treści.

10. Zastanów się, jak wygląda Twój tekst w powiększeniu

Niezależnie od tego, czy użyją kciuka i palca wskazującego, czy klikną przycisk powiększenia, ludzie powiększą Twój tekst. Czasami robią to, aby zrekompensować mniejszy ekran. Innym razem po prostu to robią, ponieważ czytanie tekstu w normalnym rozmiarze jest dla nich trudne.

Byłoby wspaniale, gdyby każdy mógł wyświetlić Twój tekst zgodnie z zamierzeniami, ale ponieważ boomers często potrzebuje dodatkowej pomocy, aby zobaczyć tekst, jest to po prostu niemożliwe. Uważaj, aby nie używać kroju pisma, który ulega degradacji, jeśli jest powiększony.

Pomocne narzędzia i zasoby

Oto kilka przydatnych narzędzi i zasobów, które pomogą Ci zrobić więcej z typografią:

• FontFace Ninja : To narzędzie pomaga w identyfikacji czcionek znalezionych w Internecie. To świetne narzędzie, gdy natkniesz się na czcionkę, która naprawdę przyciągnie Twój wzrok. Ta wtyczka Chrome pomoże Ci zidentyfikować, znaleźć i kupić dowolną komercyjnie dostępną czcionkę, którą widzisz w dowolnej witrynie.
• TypePlate : jest to kompletna struktura typograficzna, idealna dla projektantów stron internetowych. TypePlate radzi sobie z inicjałami, cytatami blokowymi, skalowaniem, kolorami i wieloma innymi wyzwaniami związanymi z typografią.
• Skala modułowa : Jest to skala, która pozwala określić idealną czcionkę i rozmiar czcionki. Pomaga również zachować równowagę między rozmiarem czcionki w tytułach i nagłówkach a czcionką wybraną dla tekstu.
• TIFF : To narzędzie umożliwia wyświetlenie dwóch różnych czcionek. Następnie wyświetla dla Ciebie różnice między każdą z dwóch czcionek. Pozwala nawet porównywać różne litery i cyfry z jednej czcionki do drugiej.
• TypeWolf : Skorzystaj z tej witryny, aby uzyskać poprawki niektórych z najfajniejszych czcionek i najbardziej inspirującego wykorzystania typografii w Internecie. To doskonałe źródło inspiracji, a także informacji.
• Why Fonts Matter, Sarah Hyndman : To doskonała książka badająca znaczenie czcionek i sposoby, w jakie typografia może wpływać na stan umysłu. To świetna książka dla pasjonatów typografii, ale także dla osób, które mogą potrzebować przekonania, jak ważny jest wybór odpowiedniego rodzaju pracy.

Wniosek

Mamy nadzieję, że ten artykuł wpłynie na projektantów stron internetowych, aby bardziej zastanowili się nad typografią, a także znaleźli sposoby na efektywniejsze i bardziej kreatywne wykorzystanie pisma w swoich projektach.