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

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

Шрифты

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

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

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

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

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

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

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

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

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

<ул>

Прямая загрузка шрифта для обслуживания самих шрифтов

Инструкции по подключению к такому сервису, как Google Fonts

Ссылки CDN, на которые ссылаются все продукты вместе

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

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

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

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

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

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

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

Цвет текста

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

<ул>

Primary для большей части текста интерфейса, будь то основной текст или заголовок.

Secondary для уменьшения контраста (часто "серый текст") для дополнительной информации.

Interactive, не только для ссылок, но и для плоских кнопок, ярлыков вкладок и т. д.

Отключено, что часто приводит к особенно низкой контрастности

Ошибка, обычно красная, для максимального контраста с окружением

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

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

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