Типографика: 7 советов в UI-дизайне

Типографика играет важную роль в UI-дизайне.

Очень важно иметь возможность четко донести намерение и цель продукта до пользователя, а это обычно делается с помощью текста. Вот почему эффективный дизайн и хорошая типографика идут рука об руку в улучшении общего UX. Другими словами, оптимизация типографики также оптимизирует ваш UI. Хотя оптимизация типографики включает в себя максимальную удобочитаемость, доступность и графический баланс, наиболее важным фактором остается удобство использования. В конечном счете, цель состоит в том, чтобы уменьшить и устранить любые разногласия между пользователем и интерфейсом, а не увеличивать когнитивную нагрузку пользователя. «На практике типографика — это не выбор шрифтов и не создание шрифтов, а формирование текста для оптимального взаимодействия с пользователем.» — Оливер Райхенштейн Важность типографики для UI-дизайна не может быть недооценена, а улучшение типографского дизайна является важным шагом к созданию первоклассного UI в целом. Ниже приведены несколько советов о том, как вы можете улучшить свою типографику. Используйте иерархию Дизайнеры создают правильную структуру, устанавливая визуальную иерархию, которая организовывает все визуальные элементы, чтобы пользователи могли легко воспринимать контент. Типографская иерархия используется для печатного содержимого путем разделения его на различные типы стилей: заголовки, подзаголовки, текст, т. д. Использование четкой типографской иерархии делает текст разборчивым и легким для чтения. Кроме того, он позволяет выделять ключевые части, чтобы привлечь внимание пользователя. Хорошее эмпирическое правило заключается в увеличении или уменьшении размера в два раза при изменении размеров текста. Например, если вы используете 32px для заголовка, то используйте 16px для основного текста, чтобы создать контраст.

Пусть ваш текст дышит

Межбуквенный интервал, высота и длина строки — это инструменты корректировки пробелов между типографскими элементами. Отсутствие пробела может привести к плохой разборчивости из-за трудности различения слов, которые расположены слишком близко друг к другу. С другой стороны, слишком много пустого пространства может привести к тому, что пользователь потеряется во время чтения. Высота линии Некоторые дизайнерские приложения, такие как Photoshop, используют термин «ведущий» (leading), в то время как другие могут называть его «высотой строки» (line-height). Начало, межстрочный интервал и высота строки относятся к вертикальному расположению в строках. Не существует идеального числа для высоты строки, поскольку оно зависит от дизайна и размера самого шрифта. Высота линии 1,5x — это общее правило в качестве отправной точки, которое вы можете постепенно корректировать соответственно. Это правило работает лучше всего, когда вы также используете базовый размер шрифта 16.

Межбуквенный интервал

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

Длина строки

Длина строки — это ширина текстового поля. Лучше иметь более короткие строки, чтобы улучшить читабельность текста. Рекомендуемая длина строки для экранного текста находится в диапазоне от 60 до 80 символов, что основано на размере экрана 1440px и размере шрифта 16px. Для мобильных экранов вместо этого вы должны настроить диапазон от 35 до 45 символов в строке.

Выберите шрифт в зависимости от контекста

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

!! «Хорошие дизайнеры воспринимают текст как контент, а лучшие — как UI.» — Кэмерон Молл

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

Одна семья шрифтов

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

Выравнивание для лучшей читаемости

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

Заключение

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