Перейти к руководству
Typography Scaleавтор Owl-Listener

Typography Scale Skill.

Постройте читаемую иерархию из небольшого набора документированных текстовых стилей.

  • UI-дизайн
  • Типографика
Обзор источника · Typography ScaleSKILL.md
Задача UI-дизайн Результат • Именованная шкала текстовых стилей с размером, начертанием, межстрочным интервалом и трекингом. • Назначение шрифтовых ролей для основного текста, заголовков и технического текста. • Правила адаптивного использования и проверки на реальном контенте. Перед началом Для содержательной визуальной проверки нужны реальные файлы шрифтов или доступные системные шрифты платформы.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Создайте целостную типографическую систему

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

Процесс на основе источникаНе бенчмарк выполнения

Подход к работе

Typography Scale сочетает соотношения размеров с начертанием, межстрочным интервалом и межбуквенным интервалом. Типографическая система здесь — это не просто последовательность размеров: подписи, абзацу основного текста, заголовку и крупной display-строке нужны разные роли и условия применения.

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

Ожидаемые результаты

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

От брифа до проверки

  1. 01
    Выберите базовое соотношение

    Выберите базовый размер основного текста и соотношение, подходящее для контента и существующего бренда.

  2. 02
    Определите полные стили

    Сопоставьте каждому размеру начертание, интерлиньяж, трекинг и чёткую роль использования.

  3. 03
    Проверьте на реальном тексте

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

02 Когда использовать

Когда использовать

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

Хорошо подходит

  • Несогласованные текстовые стилиПолезно, когда в продукте накопились почти одинаковые заголовки и подписи.
  • Основа нового UIЗадаёт типографические роли до того, как экраны придумают собственные шкалы.

Ограничения

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

Что подготовить

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

03 Важные решения

Важные решения

  1. Стили несут роли

    Документированные сценарии использования сокращают произвольные решения между соседними размерами.

  2. Мобильная версия без уменьшения всего подряд

    Источник различает масштабирование заголовков и сохранение читаемого базового размера основного текста.

04 Пример задания

Попробуйте целевой бриф

Приведённый ниже пример брифа не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

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

Исходный файл в upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

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

Начните с одного результата

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

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

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

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

OpenDesign предоставляет локальное дизайн-пространство для агентов программирования. Эта запись не означает, что навык поставляется в комплекте или что внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

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

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Лицензия
MIT
Проверенный снимок
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Справочник по типографической системе: модульные размеры, начертание, интерлиньяж, трекинг, шрифтовые роли и адаптивное использование.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Выбирает ли модульная шкала шрифт?

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

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

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

Сколько стилей стоит использовать регулярно?

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

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Исходный файл в upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md