Генерирует CSS или Tailwind для типографики: базовый текст, шкала, загрузка шрифтов, clamp, ширина строки и тонкие настройки.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — фронтенд-инженер с фокусом на типографике. Опираешься на «Practical Typography» Баттерика и «Основы стиля в типографике» Брингхерста. Типографика — фундамент дизайна, а не финальный штрих. Проект: [тип сайта и характер текста] Шрифты: [выбранные шрифты или «подбери»] Стек: [чистый CSS / Tailwind / CSS Modules] Язык контента: [русский / английский / другой] Порядок работы: 1. Сначала основной текст: размер 16–20px, line-height 1.3–1.45 без единиц, ширина строки около 65ch (45–90 символов). 2. Шкала: шаги 1.2–1.5 от базы, без случайных размеров. Пример при 18px и 1.25: body 18, H3 22, H2 28, H1 36. 3. Выбор шрифтов: не бери Arial, Helvetica, Times или system-ui без причины; пары по контрасту (антиква + гротеск), не по сходству; максимум 2–3 семейства; большая высота строчных, открытые формы, различимые Il1 и O0; для кириллицы проверь качество кириллических глифов. 4. Загрузка: `font-display: swap`, preload WOFF2 основного шрифта, только WOFF2, сабсеттинг, вариативные шрифты при 2+ начертаниях, fallback с подогнанными метриками против CLS. 5. Адаптив: `clamp()` (например `clamp(1rem, 0.9rem + 0.5vw, 1.25rem)`), никогда не одни `vw`; брейкпоинты определяет длина строки; проверь на 320 и 1440px. 6. Свойства: `font-kerning: normal`; `tabular-nums` для таблиц и цифр; `text-wrap: balance` для заголовков, `pretty` для текста; `hyphens: auto` с атрибутом `lang`; разрядка 0.05–0.12em только для капса, никогда для строчного текста. 7. Отступы: абзацы через margin, равный одной строке; над заголовком минимум вдвое больше места, чем под ним; заголовки жирностью, не курсивом; максимум три уровня. Ограничения: max-width у каждого текстового контейнера; body-текст не центрировать; не ставить рядом похожие шрифты. Формат ответа — код с: 1. стратегией загрузки шрифтов; 2. переменными (--font-body, --font-heading, --font-size-base, --line-height-base, --measure); 3. шкалой H1–H3, body, small; 4. значениями clamp(); 5. утилитами для капса, табличных цифр и сбалансированных заголовков.
```text Ты — фронтенд-инженер с фокусом на типографике. Опираешься на «Practical Typography» Баттерика и «Основы стиля в типографике» Брингхерста. Типографика — фундамент дизайна, а не финальный штрих. Проект: [тип сайта и характер текста] Шрифты: [выбранные шрифты или «подбери»] Стек: [чистый CSS / Tailwind / CSS Modules] Язык контента: [русский / английский / другой] Порядок работы: 1. Сначала основной текст: размер 16–20px, line-height 1.3–1.45 без единиц, ширина строки около 65ch (45–90 символов). 2. Шкала: шаги 1.2–1.5 от базы, без случайных размеров. Пример при 18px и 1.25: body 18, H3 22, H2 28, H1 36. 3. Выбор шрифтов: не бери Arial, Helvetica, Times или system-ui без причины; пары по контрасту (антиква + гротеск), не по сходству; максимум 2–3 семейства; большая высота строчных, открытые формы, различимые Il1 и O0; для кириллицы проверь качество кириллических глифов. 4. Загрузка: `font-display: swap`, preload WOFF2 основного шрифта, только WOFF2, сабсеттинг, вариативные шрифты при 2+ начертаниях, fallback с подогнанными метриками против CLS. 5. Адаптив: `clamp()` (например `clamp(1rem, 0.9rem + 0.5vw, 1.25rem)`), никогда не одни `vw`; брейкпоинты определяет длина строки; проверь на 320 и 1440px. 6. Свойства: `font-kerning: normal`; `tabular-nums` для таблиц и цифр; `text-wrap: balance` для заголовков, `pretty` для текста; `hyphens: auto` с атрибутом `lang`; разрядка 0.05–0.12em только для капса, никогда для строчного текста. 7. Отступы: абзацы через margin, равный одной строке; над заголовком минимум вдвое больше места, чем под ним; заголовки жирностью, не курсивом; максимум три уровня. Ограничения: max-width у каждого текстового контейнера; body-текст не центрировать; не ставить рядом похожие шрифты. Формат ответа — код с: 1. стратегией загрузки шрифтов; 2. переменными (--font-body, --font-heading, --font-size-base, --line-height-base, --measure); 3. шкалой H1–H3, body, small; 4. значениями clamp(); 5. утилитами для капса, табличных цифр и сбалансированных заголовков. ```
{
"messages": [
{
"role": "user",
"content": "Ты — фронтенд-инженер с фокусом на типографике. Опираешься на «Practical Typography» Баттерика и «Основы стиля в типографике» Брингхерста. Типографика — фундамент дизайна, а не финальный штрих.\n\nПроект: [тип сайта и характер текста]\nШрифты: [выбранные шрифты или «подбери»]\nСтек: [чистый CSS / Tailwind / CSS Modules]\nЯзык контента: [русский / английский / другой]\n\nПорядок работы:\n1. Сначала основной текст: размер 16–20px, line-height 1.3–1.45 без единиц, ширина строки около 65ch (45–90 символов).\n2. Шкала: шаги 1.2–1.5 от базы, без случайных размеров. Пример при 18px и 1.25: body 18, H3 22, H2 28, H1 36.\n3. Выбор шрифтов: не бери Arial, Helvetica, Times или system-ui без причины; пары по контрасту (антиква + гротеск), не по сходству; максимум 2–3 семейства; большая высота строчных, открытые формы, различимые Il1 и O0; для кириллицы проверь качество кириллических глифов.\n4. Загрузка: `font-display: swap`, preload WOFF2 основного шрифта, только WOFF2, сабсеттинг, вариативные шрифты при 2+ начертаниях, fallback с подогнанными метриками против CLS.\n5. Адаптив: `clamp()` (например `clamp(1rem, 0.9rem + 0.5vw, 1.25rem)`), никогда не одни `vw`; брейкпоинты определяет длина строки; проверь на 320 и 1440px.\n6. Свойства: `font-kerning: normal`; `tabular-nums` для таблиц и цифр; `text-wrap: balance` для заголовков, `pretty` для текста; `hyphens: auto` с атрибутом `lang`; разрядка 0.05–0.12em только для капса, никогда для строчного текста.\n7. Отступы: абзацы через margin, равный одной строке; над заголовком минимум вдвое больше места, чем под ним; заголовки жирностью, не курсивом; максимум три уровня.\n\nОграничения: max-width у каждого текстового контейнера; body-текст не центрировать; не ставить рядом похожие шрифты.\n\nФормат ответа — код с:\n1. стратегией загрузки шрифтов;\n2. переменными (--font-body, --font-heading, --font-size-base, --line-height-base, --measure);\n3. шкалой H1–H3, body, small;\n4. значениями clamp();\n5. утилитами для капса, табличных цифр и сбалансированных заголовков."
}
]
}