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.
The prompt
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.
Highlighted [brackets] are blanks to replace with your own details.
Fill in the blanks and use this promptMore Product & UX Design prompts
What to fill in
- e.g. calm and editorial, crisp and technical
- plain CSS / Tailwind / CSS-in-JS
- paste
How this prompt is built
This prompt follows the Few-Shot structure (Few-shot prompting). A few-shot prompt includes one or more worked examples of the input and the output you want, so the model can copy the pattern instead of guessing it.
Related prompts
- Write user stories and acceptance criteriaTurns a feature into well-formed user stories with testable acceptance criteria.
- Write release notes and stakeholder updatesClear release notes for users and internal teams.
- Turn research insights into problem statements and How Might We questionsConverts research findings into sharp problem statements and well-scoped How Might We questions ready for an ideation session.
- Write a correction or clarification for a published storyA clear, proportionate correction notice, the fixed copy, and an internal note on how the error happened.