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

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

Шрифты

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

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

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

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

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

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

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

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

Для разработчиков это зависит от подхода, предоставляющего такие опции, как:

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

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

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

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

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

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

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

Цвет текста

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

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

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

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

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