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

Możesz włączyć wiele elementów do swojego projektu internetowego, które stworzą 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 jest treść, którą odwiedzający czytają, aby uzyskać informacje, które czytają.

Jeśli chcesz, aby te informacje były łatwiejsze do odczytania, atrakcyjne wizualnie i aby ten tekst był dodany do ogólnego projektu strony internetowej, musisz zrozumieć typografię. Jest to sztuka i umiejętność uczynienia słowa pisanego zarówno funkcjonalnym, jak i estetycznym.

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 królem, dlaczego nie bierze się jej poważnie pod uwagę w procesie projektowania stron internetowych? Używając fałszywych treści jako symbolu zastępczego, projektanci stron internetowych spychają treść do drugorzędnej roli. To duża wskazówka, że ​​​​priorytety projektowe są nie do zniesienia. Nie jest to tak problematyczne na wczesnych etapach, na przykład, gdy makiety różnych układów strony. Jednak po zawężeniu zakresu prac ważne jest, aby podczas tworzenia ostatecznego projektu pracować z rzeczywistą zawartością internetową. Dzięki temu 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 sytuacji, gdy w pełni zaprojektowałeś stronę internetową, tylko po to, aby dowiedzieć się, że nie działa ona z rzeczywistą zawartością. Dlatego niezwykle ważne jest jak najszybsze uzyskanie rzeczywistego tekstu od klienta twórcy treści.

2 Ustaw tekst bezszeryfowy

Tekst szeryfowy jest absolutnie piękny. Są to świetne czcionki do drukowania i większych aplikacji drukarskich, takich jak nagłówki, tytuły i śródtytuł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 dla dużych tekstów i poleganie na sansach, gdy czytelność może stanowić problem. Co więcej, skorzystaj z czystego, eleganckiego, nowoczesnego wyglądu czcionek bez czcionek i zachowaj szeryfy dla prasy drukarskiej. W ten sposób nigdy nie będziesz musiał radzić sobie z degradacją czytelności na rzecz używania czcionki, która wygląda ładnie.

3 Pomyśl o inteligentnych cytatach i innych symbolach na wczesnym etapie procesu projektowania

Możliwe, że odwiedziłeś witrynę, na której niektóre symbole nie wyświetlają się poprawnie. Czasami są one zastępowane pytaniem lub ciągiem dziwnie wyglądających znaków. Innym razem ich po prostu nie ma. Często zdarza się to w przypadku inteligentnych lub „pokręconych" cytatów. Często jest to wynikiem tworzenia tekstu w MS Word lub innym pakiecie, a następnie przenoszonego na stronę internetową. Rzeczy po prostu nie tłumaczą się zgodnie z oczekiwaniami. Jest to również powszechne w przypadku euro symbol, znaki dwubajtowe i inne symbole zaczerpnięte z treści obcych.

Aby uniknąć tego problemu w ostatecznym projekcie, masz kilka opcji. Po pierwsze, możesz zmodyfikować treść, 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 zapewnić prawidłowe wyświetlanie symboli, zamiast polegać tylko na kopiowaniu i wklejaniu. Cokolwiek zdecydujesz, pamiętaj, aby przetestować stronę internetową w każdej możliwej przeglądarce. To, co może rozwiązać problem z symbolami w jednej przeglądarce, może w ogóle nie działać w innej.

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

Jeśli rozwinąłeś dobre umiejętności CSS, Twoi goście powinni być w stanie poruszać się po stronach Twojej witryny w absolutnie płynny sposób. Jeśli prawidłowo utworzysz arkusze stylów, możesz nawet mieć 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 uniknąć drobnych, ale typowych problemów, takich jak zmiana kroju pisma i rozmiaru czcionki z jednej strony na drugą.

Dlaczego spójna typografia jest taką koniecznością? Używanie CSS do zachowania spójnej typografii nadaje Twojej witrynie profesjonalny i ostry 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 na konkretnej stronie, że zamierzasz przeł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 Zarówno typografia mikro, jak i makro są ważne

Mikrotypografia odnosi się do szczegółów typografii związanych z czytelnością. Na przykład odstępy są problemem związanym z mikrotypografią, podobnie jak skalowanie i kontrast. Korekty, które wprowadzasz, aby upewnić się, że blok tekstu jest czytelny na dowolnym urządzeniu lub w dowolnej przeglądarce, są związane z mikro-typografią.

Makro-typografia odnosi się do sposobu, w jaki twoje wybory dotyczące typografii wiążą się z twoim ogólnym projektem. Odnosi się do estetyki.

Dobra typografia uwzględnia zarówno mikro- jak i makrotypografię. 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 makro-typografię, ale nie na mikro-typografię.

6 Zapoznaj się z treścią i projektem

Jak wiesz, dobra strona internetowa ma flow. Częścią tego jest czytelność treści znajdujących się na stronie. Omówiliśmy już, jak wpływają na to takie rzeczy, jak szeryfy, i omówiliśmy, że fikcyjny tekst nie zastąpi prawdziwego, jeśli chodzi o późniejsze fazy projektowania. Jeszcze nie skończyliśmy. Treść naprawdę jest królem. Po przygotowaniu ostatecznego projektu, w tym treści, należy zapoznać się ze stroną internetową.

Czytając zawartość po ukończeniu projektu, możesz określić, czy występują problemy z odstępami lub przerwaniem linii. Mogą one sprawić, że treść będzie myląca, a nawet nieumyślnie zmieni jej znaczenie. Naprawienie tych problemów za pomocą kilku sztuczek typograficznych może zapewnić, że produkt końcowy będzie dokładnie komunikował 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, koloru i (oczywiście) typografii, aby stworzyć tę hierarchię.

To po prostu kwestia poprowadzenia gościa od pierwszej rzeczy, którą chcesz, aby zobaczył, do następnej i tak dalej. Dzięki typografii możesz użyć rozmiaru, zmian w czcionce i odstępów, aby pomóc zdefiniować hierarchię, którą mają przestrzegać użytkownicy. W rzeczywistości, jeśli masz stronę, która nie konwertuje, możesz poeksperymentować z typografią, aby zobaczyć, czy wprowadzone zmiany pomogą skierować odwiedzających do przycisku wezwania do działania.

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

Najłatwiejszym sposobem zapewnienia, że ​​nigdy nie będziesz mieć problemów z czytelnością z powodu problemów z kolorem czcionki i kolorem tła, jest użycie najbardziej kontrastowych kolorów, czarnego i białego. Niestety, może to spowodować dość nudny projekt.

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 po prostu rozjaśnienie lub przyciemnienie o jeden lub dwa odcienie to wszystko, co musisz zrobić. Następnie Twoja typografia zmienia się z nieczytelnej w doskonale rozpoznawalną i naprawdę fajnie wyglądającą.

9 Tekst wyśrodkowany na rowku

Problemów z wyśrodkowanym tekstem jest wiele. Przede wszystkim może sprawić, że Twoje strony internetowe będą przypominać źle zaprojektowane ulotki. Poza tym prawie zawsze pojawiają się dziwne marginesy i tekst, który wydaje się być wierszem lub notatką ze starego albumu rockowego. Chociaż używanie wyśrodkowanego tekstu w nagłówkach może być w porządku, zwykle najlepiej jest go całkowicie unikać. Trzymaj się tekstu dopasowanego do lewej strony, a Twoi czytelnicy uznają Twoje treści o wiele łatwiejszymi do odczytania.

10 Zastanów się, jak Twój tekst wygląda 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 robią to po prostu dlatego, że trudno im przeczytać tekst w normalnym rozmiarze.

Byłoby wspaniale, gdyby każdy mógł przeglądać Twój tekst zgodnie z zamierzeniami, ale ponieważ osoby z wyżu demograficznego często potrzebują dodatkowej pomocy, aby zobaczyć tekst, jest to po prostu niemożliwe. Uważaj, aby nie używać kroju pisma, który degraduje się po powiększeniu.

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 zidentyfikować czcionki znalezione w Internecie. Jest to świetne narzędzie, które można mieć, gdy natrafisz na czcionkę, która naprawdę przyciąga wzrok. Ta wtyczka Chrome pomoże Ci zidentyfikować, znaleźć i kupić dowolną komercyjnie dostępną czcionkę, którą widzisz na dowolnej stronie internetowej.
• TypePlate: Jest to kompletne środowisko typograficzne, idealne dla projektantów stron internetowych. TypePlate może obsługiwać inicjały, cytaty blokowe, skalowanie, kolory i wiele innych wyzwań związanych z typografią.
• Modułowa skala: Jest to skala, która pozwala określić idealną czcionkę i rozmiar czcionki. Pomaga także zachować równowagę między rozmiarem czcionki tytułów i nagłówków a czcionką wybraną dla tekstu.
• TIFF: To narzędzie umożliwia wyświetlanie dwóch różnych czcionek. Następnie wyświetla 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 znaleźć najfajniejsze czcionki i najbardziej inspirujące wykorzystanie 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 tych, którzy mogą potrzebować przekonania, jak ważny jest wybór odpowiedniego zawodu.

Wniosek

Mamy nadzieję, że ten artykuł skłoni projektantów stron internetowych do zastanowienia się nad typografią, a także do znalezienia sposobów efektywniejszego i bardziej kreatywnego wykorzystania czcionek w swoich projektach.