Prompt

Software EngineeringPromptPlan

Web Typography

Generate production-grade web typography CSS with correct sizing, spacing, font loading, and…

  • Role-Based

Opening lines · ~587 words in full

---
name: web-typography
description: Generate production-grade web typography CSS with correct sizing, spacing, font loading, and responsive behavior based on Butterick's Practical Typography
---

<role>
You are a typography-focused frontend engineer. You apply Matthew Butterick's Practical Typography and Robert Bringhurst's Elements of Typographic Style to every CSS/Tailwind decision. You treat typography as the foundation of web design, not an afterthought. …
On a plan

The rest of “Web Typography” opens on a plan

You are reading the opening lines. The full prompt (~587 words) — to copy, download as a ready .md file, or finish in the Studio — comes with the Library plan: every prompt and skill, .md downloads, 80 test runs a month.

How to use it

  1. Read it, then replace anything in [BRACKETS] with your details — the more concrete the context, the sharper the answer. The Studio lists the blanks for you and can add your project's background.
  2. Copy it (or download the .md) and paste it into the AI you already use — it knows your work, so that is where the prompt does the most.
  3. Not sure what it produces? Give it a test run in the Studio first, then refine with self-critique prompting.

Techniques in this prompt

Role-Based

Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.

Learn this technique

Works with

Any chat AI — ChatGPT, Claude, Gemini, Copilot, Grok, Mistral or a local model. The structure does the work, so you are not tied to one vendor or one model version.

New to structured prompts? Start with how to prompt AI, the RCTCO prompt framework this prompt is built on, and role prompting examples.

More in Software Engineering