Эстетика типографики

При поддержке канала UI/UX Designer.

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

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

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

Средняя линия указывает на вершину строчных букв (или вершину x-высоты).

Базовая линия — это линия, на которой расположено большинство букв.

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

Кернинг регулирует индивидуальный интервал между буквами для достижения визуально привлекательного результата.

Межбуквенный интервал является последовательной настройкой оптического расстояния между буквами.

Интерлиньяж (Leading или line-height) — это расстояние между двумя строками текста. Хорошо продуманное расстояние делает текст более разборчивым, поскольку помогает глазу легче переходить от одной строки текста к следующей. Стандартный интерлиньяж составляет 120% размера шрифта, но он может варьироваться.

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

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

Гарнитуры без засечек хорошо читаются на экранах, особенно с низким разрешением. Sans Serif может использоваться для основного текста и заголовков.

Каждая буква имеет одинаковую ширину. Часто используется в программировании. Для основного текста он не идеален, но его можно использовать для заголовков.

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

Рукописные шрифты имитируют каллиграфию или почерк. Не следует использовать для основного текста, но можно использовать для заголовков (как и для шрифтов Display, очень важно обратить внимание на разборчивость).

Давайте взглянем на крупные бренды. Какую типографику они используют?

Все они используют шрифт без засечек в геометрическом или гуманистическом стиле. Некоторые бренды, такие как Basecamp, Intercom, Airbnb и Spotify, используют один и тот же шрифт, но в разных вариантах. Каждый шрифт имеет очень хорошую читаемость. Они используют более смелый вариант шрифта для своих заголовков, чтобы обеспечить хороший контраст с подзаголовками и основным текстом.

Использование более трёх различных шрифтов делает сайт неструктурированным и непрофессиональным.

Слишком низкий контраст ухудшает разборчивость текста, слишком высокий контраст — тоже не хорошо. В таком случае необходимо найти правильный баланс.

Убедитесь, что ваш текст и выделенные элементы узнаваемы для дальтоников. Пример: если вы используете в сером тексте выделение красным цветом, они могут не увидеть никакой разницы.

Сильно стилизованный текст, может быть неправильно понят или рассматриваться как другой элемент (как реклама или что-то подобное). Также будьте осторожны с синим цветом, потому что он часто используется для ссылок.

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

Для оптимальной разборчивости межстрочный интервал должен быть около 140–180% размера вашего текста.

Длинная строка текста негативно влияет на читабельность и может сбить с толку, поэтому ограничьте длину строки до 70–80 символов.

Меньшие шрифты труднее читать, поэтому буквы должны иметь больший межстрочный интервал.

Также у пользователя будут трудности с чтением контента, если весь текст будет в верхнем или нижнем регистре.

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

Начиная с базового размера вашего основного текста, вы определяете типографский масштаб для всех других элементов (заголовков, подзаголовков и так далее). Хорошим инструментом для этого может быть type-scale.

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

При выборе шрифта для вашего продукта следует учитывать три критерия:

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

#типографика