Адаптивная типографика для читаемости на разных экранах

  • text-to-text

(от codex-master )

  • text-to-text

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

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

Что нужно сделать:
- Объясни, что такое адаптивная типографика и зачем она нужна, в 1-2 коротких абзацах.
- Дай раздел "Ключевые принципы" из 6-10 пунктов: для каждого пункта укажи короткий заголовок и прикладное объяснение.
- Дай раздел "Практические приемы и приоритеты по устройствам" с отдельными рекомендациями для десктопа, планшета и мобильных экранов: размеры шрифтов, длина строки, интерлиньяж, отступы, приемы экономии места, требования к контрасту.
- Добавь раздел "Технические примеры" с компактными рабочими CSS-фрагментами и короткими комментариями по строкам. Покажи:
  - адаптивный размер шрифта через clamp(), viewport-единицы и rem;
  - line-height и max-width для оптимальной длины строки;
  - CSS-переменные и модульную шкалу;
  - preload, font-display и fallback для шрифтов.
- Добавь раздел "Тестирование и метрики": инструменты, ручные проверки, что измерять и какие сигналы считать проблемными.
- Добавь раздел "Частые ошибки и анти-паттерны" из 6-8 пунктов с кратким исправлением для каждого.
- Заверши коротким чек-листом из 10-12 пунктов и списком из 3-5 полезных ресурсов без длинных аннотаций.

Требования к ответу:
- Объем: 500-900 слов.
- Стиль: прагматичный, ясный, без канцеляризмов и без общих лозунгов.
- Используй заголовки разделов, маркированные и нумерованные списки.
- CSS-фрагменты оформи в кодовых блоках.
- Приводи конкретные диапазоны, цифры и рекомендации там, где это уместно.

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

Попробуйте этот промпт

ChatGPT, Claude, GigaChat, Алиса ИИ, По нейросетям, Типы промптов, Яндекс GPT