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

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

Шрифты

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

Семейства, веса и резервные варианты

Хотя системы могут варьировать шрифты в зависимости от тематики, большинство из них изначально основываются на определении основного семейства шрифтов с засечками и / или без засечек. Каждый шрифт дополнен каскадом резервных вариантов (Hello, Arial и Times), и многие системы добавляют моноширинный шрифт для отображения кода (даже если только их собственный).

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

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

Получение шрифтов с помощью загрузки, ссылки или CDN

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

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

Для разработчиков это зависит от подхода, предоставляя такие параметры, как:

• Прямая загрузка шрифтов для обслуживания самих шрифтов.
• Инструкции по установке ссылки на такую ​​службу, как Google Fonts.
• Ссылки CDN, на которые все продукты ссылаются вместе.
• Приглашение к техническому архитектору, поскольку требуется лицензия на шрифт. Организации требуют этого, чтобы контролировать повторяющиеся и часто нетривиальные затраты на размещение и обслуживание шрифта.

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

Масштаб и иерархия типографики

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

Основной текст

В системах используется шкала шрифтов, чтобы предлагать основные размеры текста, часто называемые просто текстом или основным текстом, которые включают малый, средний, большой и, если вам это нужно, xs, xl и т. д. Большинству систем требуется три или около того (таким образом, я комфортно использую размеры футболок). Начните с нескольких и расширяйте по мере необходимости, добавляя дизайн компонентов - и готовые композиции страниц.

Основной текст также может содержать отдельный абзац «Lead» (альтернативно «Lede») для открытия страницы, например, в статье (подробнее об этом позже). Таким образом, для простой шкалы S / M / L также могут потребоваться другие варианты. Это особенно актуально в системах, предлагающих несколько размеров, поскольку вывод для больших дисплеев с меньшей плотностью будет больше, чем вывод для альтернативных вариантов меньшего размера с высокой плотностью.

Цвет текста

Цвет также играет ключевую роль в типографской иерархии интерфейса, часто для таких установленных типов, как:

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

Когда дело доходит до обозначения цветов текста на основе намерения, я считаю, что имена Hudl Uniform наиболее интригуют: по умолчанию, контрастность, тонкость и несущественность. Такие имена уравновешивают компромисс между усилением контроля и большей абстракцией (и, следовательно, менее очевидным повторным использованием).

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

Например, в библиотеке Yoursite.com (которая поддерживается гораздо менее строго, дети сапожника и все такое) мы используем смесь для раскраски текста, которая перебирает цвета фона по типу.