> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Customize fonts, sizes, and spacing throughout your store

Nexus Theme provides comprehensive typography customization options to match your brand identity and improve readability.

## Overview

Typography customization includes:

* **Font Selection** from Google Fonts or custom fonts
* **Font Sizes** with responsive scaling
* **Line Heights** for optimal readability
* **Font Weights** for emphasis and hierarchy
* **Letter Spacing** for improved legibility
* **Responsive Typography** for all devices

## Font Configuration

### CSS Variables

```css theme={null}
:root {
  /* Font Families */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Playfair Display', serif;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
}
```

### Typography Classes

```css theme={null}
/* Heading Styles */
.heading-1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.heading-2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.heading-3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.heading-4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.heading-5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.heading-6 {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* Body Text Styles */
.body-large {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

.body-normal {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.body-xs {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* Accent Text */
.accent-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--font-weight-normal);
}
```

## Responsive Typography

### Mobile-First Approach

```css theme={null}
/* Base styles (mobile) */
.heading-1 {
  font-size: var(--font-size-3xl);
}

.heading-2 {
  font-size: var(--font-size-2xl);
}

.heading-3 {
  font-size: var(--font-size-xl);
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .heading-1 {
    font-size: var(--font-size-4xl);
  }
  
  .heading-2 {
    font-size: var(--font-size-3xl);
  }
  
  .heading-3 {
    font-size: var(--font-size-2xl);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .heading-1 {
    font-size: var(--font-size-5xl);
  }
  
  .heading-2 {
    font-size: var(--font-size-4xl);
  }
  
  .heading-3 {
    font-size: var(--font-size-3xl);
  }
}
```

## Font Loading

### Google Fonts Integration

```html theme={null}
<!-- Preload critical fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
```

### Font Display Strategy

```css theme={null}
/* Optimize font loading */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
```

## Typography Best Practices

### Readability Guidelines

1. **Line Length**: Keep lines between 45-75 characters
2. **Line Height**: Use 1.4-1.6 for body text
3. **Contrast**: Ensure sufficient color contrast
4. **Hierarchy**: Use clear typographic hierarchy
5. **Spacing**: Provide adequate spacing between elements

### Accessibility

```css theme={null}
/* Ensure sufficient contrast */
.text-primary {
  color: var(--color-text-primary);
  /* Minimum 4.5:1 contrast ratio */
}

.text-secondary {
  color: var(--color-text-secondary);
  /* Minimum 3:1 contrast ratio */
}

/* Focus indicators */
a:focus,
button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
```

## Custom Font Implementation

### Adding Custom Fonts

```css theme={null}
/* Custom font declaration */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont-Regular.woff2') format('woff2'),
       url('/fonts/CustomFont-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont-Bold.woff2') format('woff2'),
       url('/fonts/CustomFont-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Update CSS variables */
:root {
  --font-heading: 'CustomFont', -apple-system, BlinkMacSystemFont, sans-serif;
}
```

### Font Fallbacks

```css theme={null}
/* Comprehensive font stack */
:root {
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
```

## Performance Optimization

### Font Loading Optimization

```css theme={null}
/* Critical font loading */
.font-loading {
  font-display: swap;
}

/* Preload critical fonts */
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
```

### Font Subsetting

```css theme={null}
/* Load only necessary characters */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-subset.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

<Button href="/customization/layouts" size="lg">
  Next: Layouts
</Button>