Typography

This section defines how typography must be used across NayaOne applications.

Typography establishes the visual hierarchy and readability of content across NayaOne applications.

For a complete list of typography tokens and values, see Typography.

These guidelines focus on correct usage, accessibility, and maintainability in a multi-tenant environment.

General rules

• Typography must always be applied using design tokens or CSS variables
• Hardcoded font sizes, weights, or line heights are not allowed
• Typography must be used consistently across all modules and applications
• Font sizes and weights must follow the established scale

Multi-tenant considerations

Typography settings may vary between tenants to support different branding requirements.

To support this:

• All typography must be referenced via semantic tokens (e.g. --font-size-md, --font-size-lg)
• UI components must not assume fixed font sizes or weights
• Tenant-specific typography must be handled through variable overrides, not component-level changes
• Components must render correctly with different typography configurations

Hardcoding typography values breaks theming, increases maintenance cost, and makes tenant customization unreliable.

Use semantic typography tokens

DOs

1. Use semantic typography tokens (e.g., `--font-size-md`, `--font-size-lg`)
2. Respect tenant theming and overrides
3. Maintain consistent hierarchy across the application
4. Use appropriate font sizes for content type

DON'Ts

1. Hardcode font sizes (`12px`, `16px`, `1.5rem`)
2. Use arbitrary font weights or line heights
3. Mix different typography scales
4. Override typography tokens at component level

Font size scale

The design system provides a consistent font size scale:

• xs: 0.75rem (12px) - Small labels, captions
• sm: 0.875rem (14px) - Secondary text, helper text
• md: 1rem (16px) - Body text, default size
• lg: 1.25rem (20px) - Subheadings, emphasized text
• xl: 1.5rem (24px) - Headings, large emphasis

Always use the appropriate size token for the content type and hierarchy level.

Line height and readability

• Line heights are optimized for readability and must be used consistently
• Default line height for body text is 1.25 (20px at base font size)
• Headings use line-height: 1.5 for better readability
• Line heights should scale proportionally with font sizes
• Avoid custom line heights that reduce readability

Font weight

• Default font weight is 400 (normal)
• Use semantic weight tokens when available
• Avoid arbitrary font weights (e.g., 350, 550)
• Maintain consistent weight hierarchy across the application

Accessibility requirements

Typography must support readability and accessibility:

• Minimum font size for body text: 16px (--font-size-md)
• Line height must provide adequate spacing for readability
• Font weights must maintain sufficient contrast
• Text must remain readable when zoomed to 200%

References

• Understanding Success Criterion 1.4.4: Resize text — WCAG 2.1

Heading hierarchy

Use semantic heading elements (h1 through h6) with appropriate typography tokens:

• Use heading-specific tokens: --heading-1-font-size, --heading-2-font-size, etc.
• Each heading level has corresponding tokens for font size, line height, and weight
• Maintain clear visual hierarchy
• Use heading levels sequentially (don’t skip levels)
• Match visual size to semantic importance
• Use heading tokens consistently across similar content types

Testing and validation

• Verify typography scales correctly across different tenants and themes
• Test readability at different zoom levels
• Review typography usage during code review and QA
• Ensure consistent hierarchy across all modules