Skip to main content
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

: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

/* 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

/* 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

<!-- 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

/* 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

/* 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

/* 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

/* 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

/* 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

/* 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;
}