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