# Set up readable, responsive typography for my website

Production-ready CSS for body text, a type scale, font loading, and responsive sizing based on proven typography rules.

- Topic: Product & UX Design
- Framework: Few-Shot
- Level: Standard
- Tags: Writing, Write, Rewrite & Edit, Fill-in Template
- Source: https://www.thinkwithprompt.com/prompts/set-up-readable-responsive-typography-for-my-website

## Prompt

```text
Write the typography CSS for my website so text is comfortable to read on every screen.

**Site type and content:** [e.g. blog with long articles, SaaS marketing site, documentation]
**Fonts:** [font names and source: Google Fonts, self-hosted, system fonts, or "suggest some"]
**Brand feel:** [e.g. calm and editorial, crisp and technical]
**Tech:** [plain CSS / Tailwind / CSS-in-JS]
**Existing CSS (optional):** [paste]

Follow this order:
1. **Body text first:** size 16-20px, unitless line-height around 1.4-1.6 for long text, and a max line length of about 60-75 characters (use ch units).
2. **Type scale:** pick one ratio (1.2-1.333) from the body size and derive headings, small text, and captions from it. No arbitrary sizes.
3. **Responsive sizing:** use clamp() so text scales smoothly between mobile and desktop without breakpoint jumps.
4. **Spacing:** vertical rhythm for paragraphs, lists, and headings (more space above a heading than below).
5. **Font loading:** font-display: swap, preload only the critical weights, sensible fallback stack, and size-adjust to reduce layout shift.
6. **Details:** heading letter-spacing and line-height, tabular numerals for tables, link underline offset, no justified text on the web, hyphenation only where it helps.
7. **Accessibility:** WCAG contrast for text colors, relative units so browser zoom works, readable at 200% zoom.

Return: the CSS (or Tailwind config) in one code block with comments, a table of the scale (element, size range, line-height), and a short sample HTML page to test it.
```

## What to fill in

- e.g. calm and editorial, crisp and technical
- plain CSS / Tailwind / CSS-in-JS
- paste

Free to copy and use. From ThinkWithPrompt (https://www.thinkwithprompt.com/), a library of 2,663 curated AI prompts.