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

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

Шрифты

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

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

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

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

Вывод

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

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

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

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

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

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

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

  Типографский масштаб и amp; Иерархия

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

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

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

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

  Цвет текста

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