Typography & Spacing System¶

Overview¶

Our typography system is built on Inter and JetBrains Mono fonts with a Perfect Fourth musical scale (1.333 ratio) and 8px baseline grid. This creates a harmonious, readable, and professional typographic hierarchy that enhances the user experience.

Font Foundation¶

Primary Typeface - Inter¶

Inter is our primary typeface for all text content. Designed specifically for user interfaces, it offers exceptional readability at all sizes.

Inter Font Family

Light 300 - For subtle hierarchy

Regular 400 - For body text

Medium 500 - For emphasis

Semibold 600 - For headings

Bold 700 - For strong emphasis

Extrabold 800 - For hero elements

Why Inter? - Optimized for screens and user interfaces - Excellent legibility at small sizes - Wide range of weights (300-800) - Professional, modern appearance - Perfect letter spacing for documentation

Code Typeface - JetBrains Mono¶

JetBrains Mono is our monospace font for all code content, designed specifically for developers.

// JetBrains Mono Features
function
demonstrateFeatures() {
  const
ligatures = "!== >= <=";
    return
 { clarity: "excellent" };
  

  }

Why JetBrains Mono? - Designed for coding and technical content - Excellent character distinction (0/O, l/1/I) - Programming ligatures support - Consistent character width - Optimized for long coding sessions

Typographic Scale¶

Perfect Fourth Ratio (1.333)¶

Our type scale uses the Perfect Fourth musical interval, creating natural harmonic relationships between sizes:

XS
0.75rem (12px)

SM
0.875rem (14px)

Base
1rem (16px)

LG
1.125rem (18px)

XL
1.25rem (20px)

2XL
1.5rem (24px)

3XL
2rem (32px)

4XL
2.67rem (43px)

Responsive Scaling¶

Our typography automatically scales across device sizes:

Mobile (375px+)Tablet (768px+)Desktop (1024px+)Large Desktop (1440px+)

Base scale with optimized sizes for readability on small screens.

--brand-scale-mobile: 1;

10% larger for improved readability on medium screens.

--brand-scale-tablet: 1.1;

20% larger for comfortable reading on large screens.

--brand-scale-desktop: 1.2;

25% larger for optimal experience on high-resolution displays.

--brand-scale-large: 1.25;

Typography Hierarchy¶

Display Typography¶

For hero sections and major page elements:

Display 1

Largest display text for hero sections

Display 2

Large display text for feature sections

Display 3

Medium display text for section headers

Headlines¶

For page and section headings:

Headline 1 (H1)

Main page headings

Headline 2 (H2)

Major section headings

Headline 3 (H3)

Subsection headings

Body Text¶

For content and reading material:

Body Large - Primary reading text with excellent readability and comfortable line height for long-form content.

Used for main content areas

Body Medium - Standard reading text for most content areas with balanced readability and space efficiency.

Default body text

Body Small - Compact text for supporting information, captions, and secondary content areas.

For secondary information

Code Typography¶

For technical content:

Inline code example

For inline code and short snippets

// Code block example
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

For code blocks and longer examples

Spacing System¶

8px Baseline Grid¶

Our spacing system is based on an 8px baseline grid, creating consistent vertical rhythm:

2px
space-1

4px
space-2

8px
space-3

16px
space-5

24px
space-6

32px
space-7

Semantic Spacing¶

Token	Size	Usage
`space-xs`	4px	Tight spacing, borders
`space-sm`	8px	Component padding
`space-md`	16px	Standard element spacing
`space-lg`	24px	Section spacing
`space-xl`	40px	Large section breaks
`space-2xl`	64px	Major layout spacing
`space-3xl`	96px	Page section spacing

Line Heights & Reading Experience¶

Optimized Line Heights¶

Different content types use optimized line heights for best readability:

Content Type	Line Height	Purpose
Display Text	1.25 (Tight)	Maximum impact, headlines
Headings	1.375 (Snug)	Clear hierarchy, scannable
Body Text	1.625 (Relaxed)	Optimal reading comfort
Code	1.6	Clear code structure
Labels	1.5 (Normal)	UI element clarity

Reading Width Optimization¶

Content is constrained to optimal reading widths:

Reading Width Guidelines

Primary content: 65 characters maximum
Wide content: 75 characters maximum
Code blocks: No width limit (horizontal scroll)
Tables: Responsive with horizontal scroll

CSS Implementation¶

Typography Classes¶

/* Display typography */
.brand-display-1 { font: var(--md-sys-typescale-display-large); }
.brand-display-2 { font: var(--md-sys-typescale-display-medium); }
.brand-display-3 { font: var(--md-sys-typescale-display-small); }

/* Headlines */
h1 { font: var(--md-sys-typescale-headline-large); }
h2 { font: var(--md-sys-typescale-headline-medium); }
h3 { font: var(--md-sys-typescale-headline-small); }

/* Body text */
p { font: var(--md-sys-typescale-body-large); }
.brand-body-2 { font: var(--md-sys-typescale-body-medium); }
.brand-body-small { font: var(--md-sys-typescale-body-small); }

Spacing Utilities¶

/* Margin utilities */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--brand-space-3); }
.mt-5 { margin-top: var(--brand-space-5); }

/* Padding utilities */
.p-4 { padding: var(--brand-space-4); }
.p-6 { padding: var(--brand-space-6); }

Accessibility Features¶

High Contrast Support¶

Automatically adapts for users who prefer high contrast:

@media (prefers-contrast: high) {
  :root {
    --brand-font-weight-normal: 500;
    --brand-font-weight-medium: 600;
  }
}

Reduced Motion Support¶

Respects user motion preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Font Rendering Optimization¶

Optimized for high-DPI displays:

@media (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

Usage Guidelines¶

Typography Best Practices¶

Do

✅ Use semantic HTML (h1, h2, h3, p) for proper structure
✅ Maintain hierarchy with consistent heading levels
✅ Limit line length to 65-75 characters for readability
✅ Use appropriate font weights for emphasis
✅ Test across devices and font size preferences

Don't

❌ Skip heading levels (don't go from h1 to h3)
❌ Use color alone to convey information
❌ Override line heights without good reason
❌ Use too many font weights in one design
❌ Make text too small (minimum 14px on mobile)

Spacing Best Practices¶

Do

✅ Use consistent spacing from our 8px grid system
✅ Group related content with appropriate spacing
✅ Create clear sections with larger spacing
✅ Maintain vertical rhythm throughout the page

Don't

❌ Use arbitrary spacing values outside the system
❌ Crowd elements together without breathing room
❌ Over-space content making it hard to scan
❌ Ignore responsive spacing needs

This typography and spacing system provides the foundation for clear, readable, and professionally presented content across all documentation.