Typography Usage
Proper use of typography enhances readability, establishes hierarchy, and improves overall user experience.
Best Practices
- Maintain consistent use of font sizes and weights
- Use appropriate line heights for optimal readability
- Limit line length to 60-75 characters for body text
- Use proper heading hierarchy (H1 > H2 > H3, etc.)
- Ensure sufficient contrast between text and background
Examples
- Body text: Use the 'base' size (16px) with regular weight
- Main headings: Use 'xl' or '2xl' sizes with semibold or bold weight
- Subheadings: Use 'lg' size with medium or semibold weight
- Small print: Use 'sm' or 'xs' sizes for less important information
By following these guidelines, you'll create typography that is both visually appealing and highly readable.
Font Families
Octagon uses carefully selected font families to ensure readability and visual appeal across different platforms.
Primary Font: Lexend
Lexend is our primary font family, chosen for its excellent readability and modern appearance.
font-family: 'Lexend', sans-serif;
Weights
- Light: 300
- Regular: 400
- Medium: 500
- Semibold: 600
- Bold: 700
Monospace Font: Fira Code
For code snippets and monospaced text, we use Fira Code.
font-family: 'Fira Code', monospace;
By consistently using these font families, we maintain a cohesive and professional look across all Octagon-based interfaces.
Typography Scale
Octagon uses a consistent typography scale to maintain hierarchy and readability.
Scale
- xs: 12px / 16px line height
- sm: 14px / 20px line height
- base: 16px / 24px line height
- lg: 18px / 28px line height
- xl: 20px / 30px line height
- 2xl: 24px / 32px line height
- 3xl: 30px / 36px line height
- 4xl: 36px / 40px line height
Headings
- h1: 3xl (30px)
- h2: 2xl (24px)
- h3: xl (20px)
- h4: lg (18px)
- h5: base (16px)
- h6: sm (14px)
Use this scale consistently to create clear visual hierarchies in your typography.