Owl Listener Flexible Typography
Design type systems that flex with the user — scaling smoothly, spacing generously, and never breaking when someone needs text larger, more spaced, or in a different font.
Core Requirements
Relative Units Always
- Use rem for font sizes (relative to root, user-controllable)
- Use em for spacing that should scale with text
- Never use px for font size — it overrides user preferences
- Base font size: let the browser default (usually 16px) be your starting point, don't override it
Minimum Sizes
- Body text: 1rem minimum (never smaller)
- Small text / captions: 0.875rem minimum
- Labels and UI text: 0.875rem minimum
- If text is essential, it should be readable without zooming
Line Height
- Body text: 1.5 minimum (WCAG requirement)
- Headings: 1.2–1.3 (tighter is acceptable for large text)
- Line height should scale with font size — use unitless values (1.5 not 24px)
Spacing
- Paragraph spacing: at least 1.5× the font size
- Letter spacing: don't compress below browser default
- Word spacing: don't compress below browser default
- Users must be able to override spacing without breaking layout (WCAG 2.1 Level AA, Success Criterion 1.4.12)
Design Patterns
Scalable Type Scale
- Define a type scale using relative ratios (1.25, 1.333, 1.5)
- Each step should be perceptibly different
- 4–6 sizes is enough for most interfaces
- Example: 0.875rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem
User-Override Safe
- Don't set fixed heights on text containers
- Use min-height instead of height for elements containing text
- Let containers grow when text grows
- Test with: 200% text size, 200% zoom, extra letter and word spacing
- If layout breaks at any of these, the CSS needs fixing
Font Selection
- Prioritise readability over aesthetics
- Sans-serif fonts are generally easier for screen reading (but this is preference, not rule — test with your audience)
- Ensure the chosen font has:
- Clear distinction between similar characters (Il1, 0Oo, rn/m)
- Consistent x-height
- Adequate character spacing at default settings
- Provide a font-family stack that degrades gracefully
- Never prevent users from overriding with their preferred font
Dark Mode Typography
- Reduce font weight slightly in dark mode (light text on dark backgrounds appears heavier than dark text on light)
- Ensure contrast meets 4.5:1 minimum in both modes
- Avoid pure white (#fff) on pure black (#000) — the extreme contrast causes halation for some users. Use off-white on dark grey instead
Assessment Checklist
- All font sizes use rem or em, never px
- Body text is at least 1rem
- Line height is at least 1.5 for body text
- Layout survives 200% text scaling without breaking
- Layout survives user-applied letter and word spacing overrides
- Text containers use min-height, not fixed height
- Font has clear character distinction (Il1, 0Oo)
- Both light and dark modes meet contrast requirements