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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет текста

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