Лучшие практики выравнивания текста в интерфейсе

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

Любой интерфейс на 90% текстовый. Вот почему, когда вы видите правильно выровненную типографику, у вас создается впечатление, что вы используете более продуманный интерфейс. А когда что-то не на своем месте, это сразу же бросается в глаза и вредит нашему восприятию.

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

Совет 1. Избегайте выравнивания по центру для длинного текста

Если текст длиннее двух или трех строк, всегда рекомендуется не использовать выравнивание по центру.

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

Совет 2. Всегда выравнивайте длинный текст по левому краю

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

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

Совет 3. Используйте выравнивание по центру только для заголовков или небольших блоков текста.

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

Если вам нужно центрировать более одного блока текста, но один из них немного длиннее, то лучшее решение — изменить/переписать контент, чтобы сделать его короче:

Совет 4. Используйте выравнивание выступа для соединения с элементами пользовательского интерфейса.

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

Выступ помогает создать четкую траекторию глаз для текста, устраняя зигзагообразные скачки глаз.

Совет 5. Выровняйте данные и числа по правому краю

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

Совет 6. Балансируйте пустые пространства для текста с выравниванием по ширине

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

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

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

Спасибо за чтение!

Оригинал