При поддержке канала UI/UX Designer.
Цель типографики — улучшение разборчивости, читабельности и привлекательности текста. Перевод статьи, где рассмотрены элементы типографики, классификация шрифтов и лучшие практики их применения на примере крупных брендов.
Цель типографики — улучшение разборчивости, читабельности и привлекательности текста. Она включает в себя выбор шрифтов, их размер, длину строки, межстрочный интервал, межбуквенный интервал и кернинг.
Элементы типографики
Гарнитура и шрифт
Шрифт — это графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка. Шрифт является неотъемлемой частью типографики.
Линия строчных знаков
Средняя линия указывает на вершину строчных букв (или вершину x-высоты).
Базовая линия
Базовая линия — это линия, на которой расположено большинство букв.
х-высота
Это расстояние между базовой линией и верхом строчных букв.
Кернинг
Кернинг регулирует индивидуальный интервал между буквами для достижения визуально привлекательного результата.
Интервал
Межбуквенный интервал является последовательной настройкой оптического расстояния между буквами.
Интерлиньяж
Интерлиньяж (Leading или line-height) — это расстояние между двумя строками текста. Хорошо продуманное расстояние делает текст более разборчивым, поскольку помогает глазу легче переходить от одной строки текста к следующей. Стандартный интерлиньяж составляет 120% размера шрифта, но он может варьироваться.
Негативное пространство
В типографике отрицательное пространство описывает область между отдельными текстовыми элементами, например, параграфы или разные разделы текста. При правильном использовании отрицательное пространство может значительно улучшить читабельность.
Различные классификации шрифтов
С засечками (Serif)
Шрифты с засечками часто встречаются на печатных материалах, а также могут быть использованы для цифровых продуктов. Этот шрифт хорошо подходит для основного текста и заголовков.
Без засечек (Sans Serif)
Гарнитуры без засечек хорошо читаются на экранах, особенно с низким разрешением. Sans Serif может использоваться для основного текста и заголовков.
Моноширинный
Каждая буква имеет одинаковую ширину. Часто используется в программировании. Для основного текста он не идеален, но его можно использовать для заголовков.
Дисплейный
Дисплейный шрифт не рекомендуется к использованию в качестве основного текста, но может использоваться для заголовков (очень важно обратить внимание на разборчивость).
Рукописный
Рукописные шрифты имитируют каллиграфию или почерк. Не следует использовать для основного текста, но можно использовать для заголовков (как и для шрифтов Display, очень важно обратить внимание на разборчивость).
Лучшие практики
Давайте взглянем на крупные бренды. Какую типографику они используют?
Airbnb
Uber
Dropbox
Evernote
Intercom
Spotify
Basecamp
Slack
Все они используют шрифт без засечек в геометрическом или гуманистическом стиле. Некоторые бренды, такие как Basecamp, Intercom, Airbnb и Spotify, используют один и тот же шрифт, но в разных вариантах. Каждый шрифт имеет очень хорошую читаемость. Они используют более смелый вариант шрифта для своих заголовков, чтобы обеспечить хороший контраст с подзаголовками и основным текстом.
Рекомендации по улучшению типографики в пользовательских интерфейсах
Минимальное количество используемых шрифтов
Использование более трёх различных шрифтов делает сайт неструктурированным и непрофессиональным.
Хорошая контрастность и выбор правильного цвета очень важны для разборчивости и восприятия
Слишком низкий контраст ухудшает разборчивость текста, слишком высокий контраст — тоже не хорошо. В таком случае необходимо найти правильный баланс.
Убедитесь, что ваш текст и выделенные элементы узнаваемы для дальтоников. Пример: если вы используете в сером тексте выделение красным цветом, они могут не увидеть никакой разницы.
Используйте как можно меньше цветов для вашего контента (менее 3)
Сильно стилизованный текст, может быть неправильно понят или рассматриваться как другой элемент (как реклама или что-то подобное). Также будьте осторожны с синим цветом, потому что он часто используется для ссылок.
Шрифты без засечек лучше для текста на экранах
Шрифты без засечек часто являются лучшим выбором для цифровых устройств, но это больше правило, нежели закон. Есть отличные шрифты с засечками, которые также подходят для основного текста.
Обратите внимание на ваш межстрочный интервал
Для оптимальной разборчивости межстрочный интервал должен быть около 140–180% размера вашего текста.
Уменьшите длину вашего текста
Длинная строка текста негативно влияет на читабельность и может сбить с толку, поэтому ограничьте длину строки до 70–80 символов.
Маленький текст нуждается в большем интервале
Меньшие шрифты труднее читать, поэтому буквы должны иметь больший межстрочный интервал.
Также у пользователя будут трудности с чтением контента, если весь текст будет в верхнем или нижнем регистре.
Обратите внимание на расстояние между буквами
Слишком узкий, собственно как и слишком широкий, межстрочный интервал ухудшает типографику.
Создайте хорошую иерархию для ваших текстовых элементов
Начиная с базового размера вашего основного текста, вы определяете типографский масштаб для всех других элементов (заголовков, подзаголовков и так далее). Хорошим инструментом для этого может быть type-scale.
Как и большинство элементов в цифровых продуктах, функциональность должна быть узнаваемой, а взаимодействие простым и приятным для пользователя. Трудночитаемый текст нанесёт вред взаимодействию с клиентом.
При выборе шрифта для вашего продукта следует учитывать три критерия:
- Разборчивость: отдельные буквы и знаки препинания должны быть узнаваемы. Здесь вступают в игру элементы кернинга и межстрочного интервала.
- Читабельность: общая картина текста очень важна для хорошего взаимодействия с клиентом.
- Многосторонность: визуальная иерархия на вашем сайте имеет важное значение. Убедитесь, что выбранный вами шрифт будет иметь разные веса и стили.
Заключение
Всё вышеперечисленное является рекомендациями, а не правилами. Если пользователь вообще мало думает о типографике и просто получает приятные впечатления от чтения, значит, вы всё сделали правильно.
Спасибо, стал больше разбираться в типографике.
У Basecamp на иллюстрации не Graphic, а UberMove, перепутали иллюстрации, видимо