Typography
Our typography system uses the Inter font family, providing excellent readability across all screen sizes. The system includes a comprehensive set of heading, body, and caption styles for various use cases.
Hierarchy
Use heading styles (H1-H5) to create a clear visual hierarchy. H1 should be used for page titles, H2 for major sections, and H3-H5 for subsections. Maintain consistent heading levels throughout your application.
Readability
Body text should use comfortable line heights (1.5-1.8) and appropriate spacing. For longer content, limit line lengths to 60-80 characters for optimal readability. Use Body.Default (16px) as the base size for most content.
Contrast
Ensure sufficient color contrast between text and backgrounds (WCAG AA requires 4.5:1 for normal text, 3:1 for large text). Use darker text colors for important content and lighter colors for supplementary information.
Consistency
Apply typography styles consistently across your application. Use the predefined classes rather than custom sizes to maintain uniformity and make future updates easier.