Три инструмента типографики и дизайн интерфейсов

Изначальная предпосылка этой серии статей – ответить на вопросы потенциальных клиентов. Поскольку в интернете 95% информации – печатный текст, то придётся уделить внимание типографике. Эта древняя наука приобрела новое «звучание» с расцветом мобильных приложений и интерфейсов для них.

Типогра́фика — искусство оформления печатного текста, базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки». Формирование типографики началось с изобретением книгопечатания. Это случилось в середине XV века. Основы заложил сам изобретатель – Иоганн Гуттенберг. С развитием книгопечатания развивалась и типографика. Появлялись новые шрифты, инструменты для работы с ними.

Новый толчок для развития правил работы с текстом дал интернет. Появление интернет страниц, а затем сайтов потребовали изменения подходов к обработке и оформлению информации. Мобильный интернет заставил WEB-дизайнеров напрячься снова. А что делать, если к началу 2019 года 52,2% пользователей выходили в сеть со своих мобильных устройств. Покупки через интернет с помощью мобильной связи прогнозируют в 2021 году на уровне 67% от общего объёма продаж.

Дизайн WEB-страниц, мобильных приложений и интерфейсов к ним внесли изменения в типографику. Теперь это не просто оформление внешней подачи текста с помощью шрифта. Качественное отображение одной и той же информации на любом экране от десктопа до планшета или смартфона – стали основной задачей UX/UI специалиста, WEB-дизайнера и основным требованием заказчика.

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

Шрифт – это набор знаков заданного рисунка и размера. Сами изображения литер, цифр, специальных знаков и символов только ограниченная, узкая часть проблемы. Основная задача шрифта – отобразить информацию на экране любого устройства без искажений. В мире шрифтов не десятки, даже не сотни. Точное число не назовёт и статистика. Определённая классификация всё же существует. Назовём наиболее важные критерии выбора шрифтов для работы с ресурсами интернета.

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

Гарнитуры делят на шрифты с засечками (Антиква) и без засечек (Гротеск).

Существует мнение, что каждая из них применяется для своего типа текстовой информации.

Во-вторых, кегль. Высота буквы с учётом выступающих элементов верхних и нижних:

Измеряется эта величина в пунктах (pt). Минимальным кеглем для текста на страница считается высота в 12pt. Свою «родословную» ведёт от площадки, на которой располагалась сама литера в элементах наборных шрифтов в полиграфии. Сейчас в WEB обозначает высоту буквы.

В-третьих, интерлиньяж. Это межстрочный интервал или расстояние между базовыми линиями соседних строк. Базовая линия – условная линия, на которой «стоят» буквы и цифры. Отлично иллюстрируется подчёркиванием.

Есть ещё параметры (кёрнинг – расстояние между буквами, например). Однако, цель статьи – не детальная «анатомия» шрифта. Это знание удел профессиональных дизайнеров-шрифтовиков. Нас интересует корректное использование шрифтов разработке мобильных интерфейсов, веб-страниц и адекватное отображение информации на любых устройствах.

Почему именно перечисленные здесь параметры важны для WEB? Они прямо влияют на объём и восприятие информации пользователем. Это поисковому роботу безразличны межстрочный интервал, начертание букв и удобочитаемость текста. Он вообще всё «видит» в кодах HTTP. Чтобы убедиться откройте любую страницу любого браузера и попросите его показать исходный код страницы. Что увидим?

Мы:

Робот:

Несколько правил для работы со шрифтами или как делать не следует

Использовать больше 2, максимум 3 разных шрифтов на сайте в целом и не странице в частности. Можно ограничиться вообще одним. Это связано с особенностями восприятия зрительной информации. Сравните то, что только прочитали и это:

Не используйте шрифты гарнитуру, которые сильно отличаются. Это усложняет восприятие и нарушает единство стиля. Сравните:

Следите за контрастностью, используя различные фоны. Не стоит применять такие вещи:

Разница заметна «невооруженным глазом», а вот текст почти нет.

ТЕКСТ, НАБРАННЫЙ CAPS LOCK,ТОЖЕ ВОСПРИНИМАЕТСЯ ПЛОХО. ЗАМЕТНО, НЕ ТАК ЛИ

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

Каллиграфия – искусство писать чётким, красивым почерком. В Китае, Японии, например, этот навык возведен в ранг искусства. Мастера, владеющие каллиграфией, отработке своих умений посвящают десятки лет. Каждый из них имеет свой уникальный стиль, почерк. Тоже можно сказать о любом, кто пишет каллиграфически.

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

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

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

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

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

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

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