UI Typography Guide
Learn UI typography design principles, font selection, readability, and responsive design
UI Typography Fundamentals
Why UI Typography Matters
Typography in UI design directly impacts user experience, readability, and the overall perception of your application. Good typography guides users through your interface and enhances usability.
Readability First
UI fonts must prioritize readability over style. Users need to quickly scan and understand information without strain.
- Clear character distinction
- Appropriate line spacing
- Good contrast ratios
- Suitable font sizes
Consistency
Maintain consistent typography throughout your interface to create a cohesive user experience.
- Consistent font families
- Uniform sizing scale
- Standardized spacing
- Predictable hierarchy
Font Selection for UI
Sans-serif Fonts for UI
Sans-serif fonts are generally preferred for UI design due to their clean appearance and excellent readability on screens.
Popular UI Fonts:
- Inter
- Roboto
- Open Sans
- SF Pro Display
Characteristics:
- Clean and modern
- Excellent screen readability
- Good at small sizes
- Wide language support
Font Weights in UI
Use different font weights to create hierarchy and emphasize important information.
Light (300)
Secondary text, captions
Regular (400)
Body text, main content
Bold (700)
Headings, emphasis
Typography Scale
Responsive Typography Scale
Desktop Scale
- H1: 48px / 56px line-height
- H2: 36px / 44px line-height
- H3: 24px / 32px line-height
- Body: 16px / 24px line-height
- Small: 14px / 20px line-height
Mobile Scale
- H1: 32px / 40px line-height
- H2: 28px / 36px line-height
- H3: 20px / 28px line-height
- Body: 16px / 24px line-height
- Small: 14px / 20px line-height
Readability Optimization
Line Length
Optimal line length for readability is 45-75 characters per line. This prevents eye strain and improves reading speed.
Guidelines:
- Desktop: 50-75 characters
- Tablet: 40-60 characters
- Mobile: 30-50 characters
Line Spacing
Proper line spacing (leading) improves readability and reduces eye fatigue.
Recommended Ratios:
- Headings: 1.1-1.3
- Body text: 1.4-1.6
- Small text: 1.5-1.7
Responsive Typography
CSS Implementation
Use CSS media queries and relative units for responsive typography:
/* Base styles */
body {
font-size: 16px;
line-height: 1.5;
}
/* Responsive typography */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
Viewport Units
Use viewport units (vw) for truly responsive typography that scales with screen size.
Fluid Typography
Implement fluid typography using CSS clamp() for smooth scaling between minimum and maximum sizes.
Accessibility Considerations
Color Contrast
Ensure sufficient contrast between text and background colors (WCAG AA standard: 4.5:1 for normal text).
Font Size
Provide options for users to increase font size. Minimum 16px for body text on mobile devices.
Screen Readers
Use semantic HTML and proper heading hierarchy to ensure screen reader compatibility.
UI Typography Best Practices
Key Principles
- Start with a clear typography hierarchy
- Use consistent spacing and alignment
- Test readability across different devices
- Consider loading performance for web fonts
- Provide fallback fonts for better compatibility
- Use appropriate font weights for emphasis
- Ensure adequate touch targets for mobile
- Test with real users and gather feedback