---
name: typography-prompts
title: Typography Pattern LLM Prompts
description: Ready-to-use prompts for typography with wiki patterns.
---

# Typography Pattern Prompts

## 1. Gradient Text

```
Create gradient text effect:
- H1 with font-size: clamp(2.5rem, 6vw, 4rem)
- background: linear-gradient(135deg, #6366f1, #ec4899, #f43f5e)
- background-clip: text
- -webkit-text-fill-color: transparent
- text-shadow: none
- Letter-spacing: -0.02em
- Font weight: 800
- Line height: 1.1
```

## 2. Font Pairing

```
Create font pairing:
- Headings: Inter, font-weight: 700-900
- Body: Inter, font-weight: 400-500
- Mono: JetBrains Mono
- Scale ratio: 1.25
- Body text: 16px minimum
- Line height: 1.6 for body, 1.2 for headings
- Max-width: 65ch for body text
```

## 3. Kinetic Text

```
Create kinetic text animation:
- Each word wrapped in <span class="word">
- opacity: 0, translateY(30px) initially
- On scroll: opacity: 1, translateY(0)
- Duration: 0.6s ease-out
- Stagger: 0.1s between words
- Use IntersectionObserver
- Fallback: always visible text
```

## Anti-Patterns

1. Never use < 16px for body text
2. Never use line-height < 1.4
3. Never use more than 2 fonts
4. Never use all-caps for paragraphs
5. Never use decorative fonts for body