Skip to content
AI Learning Playground
LinkedInX
English
English

Prompting for Typography

5 min read + 20 min hands-on

Shiori
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

Understanding font categories helps communicate intent accurately.

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

Serif

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

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

Decorative fonts for large headings only. Use sparingly.

Condensed

Narrower characters. Good for space-constrained layouts.

Expanded

Wider characters. Creates an open, airy feel in headlines.

Key Typography Terms

TermMeaningExample instruction
Font weightCharacter thickness (100–900)font-weight: 700 (Bold)
Font sizeCharacter size (px / rem)font-size: 48px
Line heightSpace between linesline-height: 1.5
Letter spacingSpace between charactersletter-spacing: -0.02em
This table scrolls horizontally. Keyboard users can focus the table and use the left and right arrow keys.

4 Font Pairing Strategies

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

Use the same font family with substantially different weights.

Use Inter Black (weight 900) for headings and Inter Regular (weight 400) for body text.

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

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

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 backgrounds

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 readability

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 elements

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 accessibility

Responsive Typography

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

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 mobile

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-height for body text
  • Specify letter-spacing for headings and all-caps text
Quiz