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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

Шкала типографики и amp; Иерархия

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

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

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

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

Цвет текста

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

• Основной
• Вторичный< /strong>
• Интерактивный
• Отключено
• Ошибка

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

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

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