fbpx
1

Рекомендации по выравниванию текста в дизайне

Сделайте свой интерфейс более эффективным и легким для чтения с помощью правильного выравнивания текста.

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

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

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

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

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

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

Рекомендации по выравниванию текста в дизайне

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

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

Рекомендации по выравниванию текста в дизайне

Примечание:

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

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

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

Рекомендации по выравниванию текста в дизайне

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

Рекомендации по выравниванию текста в дизайне

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

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

Рекомендации по выравниванию текста в дизайне

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

Рекомендации по выравниванию текста в дизайне

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

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

Рекомендации по выравниванию текста в дизайне

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

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

Свойство hyphens управляет расстановкой переносов текста в элементах уровня блока. Обратите внимание, что класс <hyphens> зависит от языка. Это помогает находить возможные разрывы в зависимости от языка, определенного в атрибуте font родительского элемента. Поддерживаются не все языки, и поддержка зависит от конкретного браузера.

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

Рекомендации по выравниванию текста в дизайне

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

3 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи

Лучшие статьи, раз в неделю, с доставкой на почту

Total
3
Share