Prompting for Typography
5 min read + 20 min hands-on
Target audience: Anyone who defaults to "a nice font" when prompting AI.
Prerequisites: No prior knowledge required
Typography is the element that most influences a design’s overall feel. Instead of asking for “something readable,” specify font classification, weight, size, and letter-spacing — and AI will produce intentional, professional type systems.
Font Classifications
Section titled “Font Classifications”Understanding font categories helps communicate intent accurately.
Sans-Serif
Section titled “Sans-Serif”Clean, modern fonts without decorative strokes. Most common in digital UI.
- Inter — Versatile, screen-optimized. Works for headings and body text alike
- Geist — By Vercel. Compact spacing with softly bent arcs
- Plus Jakarta Sans — Friendly, designed for digital interfaces
- Bricolage Grotesque — Contemporary grotesque with distinctive details. Great for headings
Fonts with small decorative strokes at character ends. Used in editorial and brand sites.
- Merriweather — High readability for long-form content
- Playfair Display — Strong thick-thin contrast. Dramatic impact in headlines
- IBM Plex Serif — Technical, precise, contemporary
Monospace
Section titled “Monospace”Equal-width characters. Used for code blocks and technical content.
- Geist Mono — Companion to Geist Sans
- IBM Plex Mono — High readability for technical documentation
Display
Section titled “Display”Decorative fonts for large headings only. Use sparingly.
Condensed
Section titled “Condensed”Narrower characters. Good for space-constrained layouts.
Expanded
Section titled “Expanded”Wider characters. Creates an open, airy feel in headlines.
Key Typography Terms
Section titled “Key Typography Terms”| Term | Meaning | Example instruction |
|---|---|---|
| Font weight | Character thickness (100–900) | font-weight: 700 (Bold) |
| Font size | Character size (px / rem) | font-size: 48px |
| Line height | Space between lines | line-height: 1.5 |
| Letter spacing | Space between characters | letter-spacing: -0.02em |
4 Font Pairing Strategies
Section titled “4 Font Pairing Strategies”1. Contrast by classification
Section titled “1. Contrast by classification”Pair fonts from different categories. The most dependable strategy.
Use Playfair Display for headings and Inter for body text.
Headings at 64px, body at 16px — use size to amplify the contrast.2. Contrast by weight
Section titled “2. Contrast by weight”Use the same font family with dramatically different weights.
Use Inter Black (weight 900) for headings and Inter Regular (weight 400) for body text.3. Contrast by size
Section titled “3. Contrast by size”Font uniformity is fine when size differences are large enough.
Set headings to 3rem (48px) and body text to 1rem (16px).4. Historical or stylistic connection
Section titled “4. Historical or stylistic connection”Pair fonts that share a design era or philosophy.
For a mid-century modern design, use Futura for headings and Gill Sans for body text.Typography Prompt Examples
Section titled “Typography Prompt Examples”Business Website (Inter)
Section titled “Business Website (Inter)”Create a business homepage using Inter with the following typography scale:
- Headings: 48px, font-weight: 700, letter-spacing: -0.02em
- Subheadings: 24px, font-weight: 600, letter-spacing: -0.01em
- Body text: 16px, font-weight: 400, line-height: 1.5
- Button text: 16px, font-weight: 600
- Caption: 12px, font-weight: 400, letter-spacing: 0.02em
- Use dark gray (#333) for text on white backgroundsEditorial Blog (Playfair Display + Merriweather)
Section titled “Editorial Blog (Playfair Display + Merriweather)”Design a blog layout with elegant typography:
- Article titles: Playfair Display, 56px, font-weight: 700, line-height: 1.1
- Section headings: Playfair Display, 32px, font-weight: 600
- Body text: Merriweather, 18px, font-weight: 400, line-height: 1.6
- Pull quotes: Playfair Display italic, 24px
- Category labels: Merriweather Bold, 12px, ALL CAPS, letter-spacing: 0.05em
- Max text width: 680px for readabilityTech Startup / SaaS (Bricolage Grotesque + Inter)
Section titled “Tech Startup / SaaS (Bricolage Grotesque + Inter)”Create a SaaS landing page with modern typography:
- Hero heading: Bricolage Grotesque, 64px, font-weight: 700, letter-spacing: -0.03em
- Feature titles: Bricolage Grotesque, 28px, font-weight: 600
- UI text: Inter, 16px, font-weight: 400, line-height: 1.5
- Button text: Inter, 14px, font-weight: 600
- Use vibrant blue (#3B82F6) for interactive elementsE-commerce (Plus Jakarta Sans)
Section titled “E-commerce (Plus Jakarta Sans)”Design an accessible e-commerce store:
- Page titles: Plus Jakarta Sans, 40px, font-weight: 800
- Product names: Plus Jakarta Sans, 24px, font-weight: 700, line-height: 1.2
- Descriptions: Plus Jakarta Sans, 16px, font-weight: 400, line-height: 1.5
- Prices: Plus Jakarta Sans, 18px, font-weight: 700
- Ensure strong contrast on prices and CTAs for accessibilityResponsive Typography
Section titled “Responsive Typography”Fluid Typography
Section titled “Fluid Typography”Font sizes scale smoothly with viewport width.
Create a landing page with fluid typography using clamp():
- Headings: clamp(32px, 5vw, 64px)
- Subheadings: clamp(24px, 3vw, 36px)
- Body text: clamp(16px, 1vw, 18px)Breakpoint-Based Typography
Section titled “Breakpoint-Based Typography”Font sizes change at specific breakpoints.
Create breakpoint-based typography:
- Headings: 48px desktop, 36px tablet, 24px mobile
- Subheadings: 36px desktop, 28px tablet, 18px mobile
- Body: 18px desktop, 16px tablet, 14px mobileBest Practices
Section titled “Best Practices”- Use exact font names, not descriptions (“Playfair Display” not “an elegant serif”)
- Specify weight as numbers (“font-weight: 700” not just “bold”)
- Include fallback options (“Inter or similar modern sans-serif”)
- Always set
line-heightfor body text - Specify
letter-spacingfor headings and all-caps text