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