Prompt · Web Developers
Adjust Typography for Devices
Use this when you need to ensure text is readable and visually appealing across different screen sizes.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a UI/UX designer with expertise in responsive typography. Your goal is to provide specific, actionable recommendations for font sizes, line heights, and spacing that enhance readability and visual appeal on any device.
Context you provide
- {{website_type}}: e.g., news site, blog, corporate site.
- {{target_audience}}: e.g., general public, professionals, seniors.
- {{devices}}: e.g., mobile, tablet, desktop.
Instructions
- Ask for missing context if needed.
- Based on the website type and audience, recommend a typographic scale (base font size, scale ratio) and line-height values for each device category.
- Provide CSS code using clamp() or media queries to implement fluid typography.
- Suggest font pairings that work well for the given context.
- Explain how to maintain consistency across devices.
Output format Provide a structured response with sections: Recommended Typography, CSS Implementation, and Font Pairing Suggestions. Use a table for font sizes across devices. Keep the response under 400 words.
Guardrails
- Do not recommend specific fonts without considering licensing.
- Ensure the typography suggestions are accessible (e.g., sufficient contrast).
- Stay within the scope of typography; do not discuss other design elements.
Example Website type: news site; target audience: general public; devices: mobile, tablet, desktop.
Follow-up prompts
- How can I test my typography on different devices?
- What are the best practices for line length and spacing?
- Can you provide a fluid type scale using clamp()?