Типографика — правила оформления текста. Она составляет 95% дизайна веб-сайта. Такие аспекты, как выбор шрифта, адекватная длина и размер текста, а также иерархия типографского макета, помогают пользователям ориентироваться на сайте.

До появления ИТ правила типографики использовали в печатных изданиях. На сегодняшний день мы наглядно видим эти правила на экранах компьютера или телефона.

Типографика напрямую влияет на то, как контент на веб-странице читается и понимается пользователями. Поэтому понимание ее важности и следование предложенным методам — это одни из самых простых способов выделиться в своей нише и создать лучший онлайн-опыт для ваших клиентов.

В этой статье мы раскроем все, что нужно знать о типографике, различных типографских компонентах и ​​о том, что они все означают, чтобы вы могли предоставить своим пользователям максимально эффективный UI.

Четыре основных шрифта в типографике

Каждый текст, который вы читаете на экране, использует тот или иной шрифт, влияющий на визуальное оформление сайта. Существует некоторое непонимание разницы между гарнитурами и шрифтами, и многие люди используют эти термины как синонимы.

Гарнитура — это стиль дизайна, который имеет много разных размеров и весов букв, тогда как шрифт — это графическое представление структуры текста.

Проще говоря, шрифт — это семейство связанных гарнитур.

Существует 4 основных типа шрифтов:

- с засечками

- без засечек

- брусковый с засечками

- рукописный

Гарнитуры с засечками и без засечек являются наиболее часто используемыми наборами шрифтов в Интернете. Засечки являются более традиционными, последовательными и официальными. Они улучшают читабельность длинных абзацев.

Шрифты без засечек более повседневны и просты, чем шрифты с засечками; потому что они хорошо отображаются на дисплеях с низким разрешением и являются рекомендуемым вариантом для веб-дизайна. Оба обычно используются для основного контента или заголовков (включая заголовки, логотипы и т. д.).

В то время как шрифт slab предназначен для привлечения внимания, его наиболее важной особенностью является; толстый и смелый. Рукописный шрифт предназначен для имитации динамичных штрихов почерка, и его следует сохранить для особых событий, таких как заметные заголовки и т. д.

Почему типографика важна в веб-дизайне

Типографика — это гораздо больше, чем просто выбор привлекательного шрифта. Это жизненно важный аспект дизайна пользовательского интерфейса.

Хорошая типографика устанавливает эффективную визуальную иерархию, придает графический баланс веб-сайту и определяет общий тон вашего цифрового продукта, что, в свою очередь, создает положительный пользовательский опыт.

Если с типографикой стало яснее, теперь перейдем к более сложному уроку. Мы дадим шпаргалку по правильному изображению валюты в веб-дизайне.

1. Знак рубля

Никогда не используйте в написании «руб.» или «р.», существует знак рубля, лучше применять его.

2. Пробел между ценой и валютой

В случае, если валютный знак написан после ценника, то их следует разделить неразрывным пробелом. Знак «$» ставится перед ценой, поэтому пробелом не отделяется.

3. Экономьте место.

Старую цену можно перечеркнуть для экономии пространства.

4. Контрастность.

Для контраста используйте динамику шрифтов, чтобы новая цена казалась меньше старой еще и визуально.

5. Пробелы в цене

Если ваш ценник находится в диапазоне 1000–9999, то не нужно разделять разряды пробелами. Лучше, если пробел вы использовать не будете, плюсом ко всему визуально это уменьшит цену.

6. Акцент

Поиграйте с цветом, сделайте старый ценник менее заметным благодаря использованию контрастных оттенков. Так вы сделаете акцент на новой версии цены.