HomeOverviewFoundationsComponentsGuidelinesPatterns

Typography

A consistent type scale and hierarchy for clear communication across all AVNIR products.

Type Scale

MUZISYSTEM uses a modular type scale that provides a harmonious hierarchy from display titles to small captions. All sizes are defined as tokens for consistency.

Font Families

Sans-Serif (Primary)

--font-sans

Inter is our primary typeface, used for all UI text, headings, and body copy. It provides excellent readability at all sizes.

Monospace (Code)

--font-mono

System monospace fonts are used for code snippets, technical content, and data displays where fixed-width characters are beneficial.

Heading Scale

Six heading levels provide clear hierarchy for content structure:

Heading 1

--text-h1
3.5rem (56px)

Heading 2

--text-h2
3rem (48px)

Heading 3

--text-h3
1.5rem (24px)

Heading 4

--text-h4
1.25rem (20px)
Heading 5
--text-h5
1.125rem (18px)
Heading 6
--text-h6
1rem (16px)

Display Scale

Extra-large sizes for hero sections and marketing content:

Display
--text-display-lg
6rem (96px)
Display
--text-display-md
4.5rem (72px)
Display
--text-display-sm
3.75rem (60px)

Body Text

Three body text sizes for different contexts:

The quick brown fox jumps over the lazy dog. This is large body text for emphasis and readability.

--text-body-lg
1.5rem (24px)

The quick brown fox jumps over the lazy dog. This is default body text used throughout the interface.

--text-body
1rem (16px)

The quick brown fox jumps over the lazy dog. This is small body text for secondary content and captions.

--text-body-sm
0.875rem (14px)

Utility Sizes

Additional sizes for specific use cases:

Small text for captions, labels, and secondary information.

--text-small
0.875rem (14px)

Extra small text for micro content, badges, and timestamps.

--text-xs
0.75rem (12px)

Font Weights

Five weight options for emphasis and hierarchy:

Light weight (300) - Subtle, elegant text for special emphasis.

--font-light

Normal weight (400) - Default for body text and paragraphs.

--font-normal

Medium weight (500) - Subtle emphasis for important content.

--font-medium

Semibold weight (600) - Headings and strong emphasis.

--font-semibold

Bold weight (700) - Extra emphasis for critical information.

--font-bold

Line Height

Optimized line heights for readability:

Line height none (1.0) - Tight spacing for display text and headlines where vertical space is limited.

--leading-none

Line height tight (1.25) - Compact spacing for headings and titles where readability is still important.

--leading-tight

Line height normal (1.5) - Standard spacing for body text and most content. Provides good balance between density and readability.

--leading-normal

Line height relaxed (1.625) - Comfortable spacing for long-form content and articles. Enhances readability for extended reading sessions.

--leading-relaxed

Line height loose (2.0) - Extra spacing for maximum readability. Best used for accessibility or special emphasis contexts.

--leading-loose

Letter Spacing

Tracking adjustments for different contexts:

Tighter tracking (-0.05em) - Condensed spacing for large display text.

--tracking-tighter

Tight tracking (-0.025em) - Slightly condensed for headings.

--tracking-tight

Normal tracking (0) - Default spacing for body text and most content.

--tracking-normal

Wide tracking (0.025em) - Slightly expanded for emphasis.

--tracking-wide

Wider tracking (0.05em) - Expanded spacing for uppercase text and labels.

--tracking-wider

Usage Guidelines

  • Hierarchy - Use heading levels semantically (h1 → h2 → h3)
  • Readability - Keep line length between 50-75 characters
  • Contrast - Ensure sufficient contrast for all text sizes
  • Responsive - Consider reducing sizes on mobile devices
  • Consistency - Always use tokens, never hard-code sizes