Typeset

Коли використовувати

Зверніться до /impeccable typeset, коли текст на сторінці виглядає як типова типографіка замість продуманої. Брудна ієрархія, три розміри, які виглядають однаково, основний текст на 14px, display-шрифт, який насправді просто Inter bold, заголовки без уваги до кернінгу.

Типові тригери: “ієрархія здається плоскою”, “читабельність не та”, “шрифти виглядають типовими”.

Як це працює

Навичка оцінює типографіку за п’ятьма вимірами:

1. Вибір шрифтів: чи використовуєте ви невидимі значення за замовчуванням (Inter, Roboto, Arial, Open Sans), чи відповідає шрифт бренду, чи є більше 2-3 сімейств.
2. Ієрархія: чи чітко відрізняються заголовки, основний текст та підписи з першого погляду, чи контраст розмірів принаймні 1.25x між кроками, чи чіткі контрасти ваги.
3. Розміри та масштаб: чи є зв’язна типова шкала, чи відповідає основний текст мінімуму 16px, чи шкала фіксована-rem для UI додатків або fluid-clamp для маркетингових сторінок.
4. Читабельність: довжина рядка 45-75 символів, міжрядковий інтервал налаштований для шрифту та контексту, контраст.
5. Узгодженість: один і той самий елемент використовує однакове оформлення скрізь, немає одноразових перевизначень font-size.

Потім вона виправляє те, що знаходить: обирає виразні шрифти, будує модульну шкалу, розширює контраст ієрархії, встановлює правильну довжину рядка та ведення.

Спробуйте

/impeccable typeset the article layout

Очікуваний diff:

• Display-шрифт замінено з Inter 700 на справжній display-шрифт
• Типова шкала перебудована: 3rem / 2rem / 1.25rem / 1rem / 0.875rem, співвідношення 1.333
• Основний текст збільшено з 14px до 16px
• Довжина рядка обмежена до 68ch на колонці статті
• Міжрядковий інтервал 1.6 для основного тексту, 1.1 для display
• Видалено чотири одноразові значення font-size, розкидані у стилях компонентів

Підводні камені

• Запит нового шрифту без контексту. Typeset обиратиме на основі фірмового голосу PRODUCT.md. Якщо ви не запускали /impeccable teach, пропозиція буде типовою.
• Звернення до typeset, коли проблема в макеті. Якщо абзаци нормальні, але сторінка здається тісною, вам потрібен /impeccable layout.
• Очікування fluid clamp шкал для UI додатків. Typeset використовує фіксовані rem шкали для UI інтерфейсів. Плинна типографіка — для маркетингових та контентних сторінок, де довжина рядка суттєво змінюється.