Comprehensive typography accessibility rules for text design and readability
When to Use
Apply when designing text styles, font choices, spacing, and text presentation across interfaces.
Rules
- Use minimum font size of 14px for body text, 18px for headings
- Maintain line spacing of at least 1.5 times font size
- Allow text resize up to 200% without loss of content or functionality
- Avoid using all caps for more than single words or short phrases
- Provide clear visual distinction between link text and surrounding content
- Use sufficient spacing between paragraphs and text blocks
- Ensure text remains readable when zoomed or enlarged
- Provide alternatives for text embedded in images
- Maintain text contrast ratio of at least 4.5:1 for normal text, 3:1 for large text
- Ensure contrast is maintained when text is hovered or focused
Avoid
- Justified text alignment that creates irregular spacing
- Very thin or decorative fonts that reduce readability
- Text that disappears or becomes unreadable when resized
- Insufficient contrast between text and background colors
You Might Also Like
Related Skills

fix
Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.
facebook
frontend-testing
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
langgenius
frontend-code-review
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
langgenius
code-reviewer
Use this skill to review code. It supports both local changes (staged or working tree) and remote Pull Requests (by ID or URL). It focuses on correctness, maintainability, and adherence to project standards.
google-gemini
session-logs
Search and analyze your own session logs (older/parent conversations) using jq.
moltbot

