Типографика в интерфейсе

Типографика в интерфейсе: не очень коротко о главном

Дизайн

Роман Остапов

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

Меню

Заказать проект

Типографика — ядро дизайна

Задумывались ли вы о том, как создать подходящий визуальный язык? Или о том, как правильно оформить шрифты и выбрать их начертания? Если ответ «Да», — вы на правильной странице и читаете полезный материал.

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

Визуальный язык — наше всё

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

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

Заинтересовались? Расскажем, в каких программах это всё можно сделать.

Оформление шрифтов: 8 правил

Эти пункты — только фундамент для работы. На деле есть десятки тонкостей: часть из них мы расскажем дальше, а часть вы узнаете на практике. Без неё никуда.

1. Чем меньше шрифтов, тем лучше

Почему? Ответим: мешанина из шрифтов будет похожа на тетрадь первоклассника. Большие и маленькие буквы, всё в кучу и в разные стороны. Явно не тот эффект, которого хочется добиться от типографики. Поэтому сводим количество шрифтов к минимуму: 2 — допустимо, 5 — перебор.

2. Поставьте себя на место пользователя

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

3. Следите за длиной строк — это влияет на читабельность.

60 символов в строке — оптимальный вариант для сайта. Это примерно 8 слов или одно предложение. Для мобильных устройств будет достаточно порядка 30−40 символов. Установите границы (ограничьте ширину текстовых блоков, используя единицы измерения em или пиксель), а потом попробуйте перечитать материал. Стало проще?

4. Выбирайте универсальную гарнитуру.

Различие между гарнитурой и шрифтом в том, что первое включает в себя объединение шрифтов, которые могут отличаться по начертанию и кеглю, например: Arial. А шрифт — это вариация написания (размер, наклон, жирность), например: Arial Regular, Arial Bold, Arial Italic. Вам нужна гарнитура, которая одинаково хорошо читается на всех экранах. Например, Roboto удобен для восприятия как с ПК, так и с телефона. Google использует эту гарнитуру в интерфейсах своих продуктов: YouTube, Google Play, Google Drives, Google Doc.

5. Проверьте, удобно ли читать буквы отдельно.

В некоторых шрифтах путаются буквы, например: большая i ничем не отличается от маленькой L, а u и n в сочетании напоминают m. Избегайте таких шрифтов — читатель не должен прищуриваться, чтобы распознать символы.

6. Интерлиньяж лучше увеличить.

Другими словами, расстояние между строками. Оно должно быть на 30% больше высоты символов. Последовали совету — сделали текст на 20% читабельнее.

7. Соблюдайте контраст между фоном и текстом.

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

8. Не бойтесь нестандартных шрифтов.

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

Бонусное правило: никогда не используйте мигающий текст. Особенно яркого цвета. Он может вызвать приступы у чувствительных людей или просто неприятные ощущения для глаз.

Начертания шрифтов: 6 правил, о которых вы должны знать

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

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

1. Разборчивость.

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

2. Универсальность.

Каждая буква должна одинаково хорошо читаться на любом устройстве.

3. Большая высота букв.

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

4. Оптимальная пропорция по ширине.

Буквы не должны быть слишком «толстыми» или «худыми». Если не уверены, лучше придерживайтесь средних пропорций.

5. Увеличьте расстояние между буквами.

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

6. Запаситесь дополнительным шрифтом.

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

Какие шрифты используют дизайнеры Grids Agency

Стот текст был оформлен шрифтом Stapel — закрытый гротеск с техничными и простыми формами, а ещё — акцентом на тонких примыканиях штрихов. У Stapel широкая палитра начертаний и типографических возможностей. Он был отмечен на конкурсе шрифтового дизайна GRANSHAN 2022 и попал в шорт-листы D&AD и ADCR.