Основы типографики в дизайне пользовательского интерфейса (UI)

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

Согласно знаковой книге 1928 года «Новая типографика» Яна Чичольда, наиболее важными характеристиками при использовании шрифта являются четкость и читаемость. Однако другие, менее функциональные аспекты, такие как эмоциональное выражение — их настроение или стиль, оказывают значительное влияние на пользователя. Таким образом, то, что мы должны искать, — это широкий спектр типографических вариантов для выражения того, что мы хотим.

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

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

Цвет

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

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

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

Сложность

Сложность шрифта будет зависеть от его размера на экране. Более запутанные и художественные шрифты должны быть крупнее из-за своих деталей. С другой стороны, более простые шрифты могут позволить себе быть меньшего размера.

Не существует стандарта, но декоративные и рукописные шрифты редко работают в маленьких размерах или в текстовых блоках из-за их сложных контуров. Глазу будет очень тяжело читать мелкие шрифты с необычными элементами, если они не достаточно большие, чтобы можно было понять их форму. Это может изменяться в зависимости от того, происходит ли чтение на рабочем столе или на мобильном устройстве.

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

Пространство

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

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

Вот некоторые важные способы применения пространства при проектировании интерфейсов:

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

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

Кернинг: Похож на трекинг, только применяется к определенным парам символов, чтобы улучшить плавность.

Размер

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

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

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

Верхний регистр

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

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

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

Выравнивание

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

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

Итог

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