Типографика: основы и правила для создания понятного и эффективного сайта

Изначально типографика относилась только к печатным изданиям и графическому дизайну. Но чем больше материалов попадало в сеть — тем быстрее понятие распространялось в сфере создания сайтов. Сейчас большинство под «Типографикой» понимают совокупность правил для создания страниц. Визуальное оформление отвечает за общее впечатление от текста и вложенных смыслов. Понятие «вёрстка» тоже прошло долгий путь и переросло из «создание макета на печать» в «создание сайта».

Прежде чем создать сайт для пользователя и завоевать его внимание — разберёмся в терминах.

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

Вёрстка — это структурирование текста и всех сопровождающих его элементов в макете страницы, газетной полосы, книги и других печатных или электронных текстовых материалов. Важно понимать при этом, что вёрстка создаёт типографику.

Правила типографики текста описываются одной фразой: «вашему читателю должно быть понятно и приятно это читать».

Чтобы проверить, отвечает ли проект этим требованиям, используйте три основных критерия. Проверьте насколько сайт:

Посетитель страницы должен получить всю информацию не только быстро, но и правильно её понять.

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

Разберёмся в терминах, чтобы в следующих разделах было понятно о чём именно речь.

Шрифт — графическое изображение букв и знаков в едином стиле.

Кегль — размер буквы по вертикали со всеми её элементами.

Начертание — вид шрифта в пределах одной гарнитуры. Популярные: обычный, курсив, полужирный.

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

Кернинг — расстояние между букв и символов.

Базовая линия — та, на которой находятся буквы.

Интерлиньяж — расстояние между базовых линий. Это кегль вместе с расстоянием между строк.

Виды шрифтов: с засечками (антиква) и без засечек (гротеск).

Для начала разбираемся со шрифтами и общим наполнением. Первым идёт текст, после — визуальное оформление. Никто не подбирает шрифты до создания макета, не зная, сколько в нём будет текста и как его нужно будет распределить. Идеальная вёрстка не создаст для вас идеальный проект, но позволит читателям увидеть весь необходимый материал и направит на нужное целевое действие.

Основное наполнение страницы — текст. Пользователи приходят за необходимой справкой и хотят получить её как можно быстрее, желательно максимально понятно. Правила типографики текста такие:

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

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

Когда делаете проект — постарайтесь сохранить единообразие при общей читаемости. У вас есть все инструменты и правила использования для этого. Создавайте такое пространство, где человек не только найдёт то, что ему нужно или сделает целевое действие, но и захочет вернуться. При помощи типографики вы сможете создать подходящее пространство и для заказчика, и для пользователя.

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