/brand

Typography Specifications

Guidelines for defining and implementing brand typography.

Font Stack Structure

Primary Fonts

/* Headings - Display font for impact */
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;

/* Body - Readable for long-form content */
--font-body: 'Inter', system-ui, -apple-system, sans-serif;

/* Monospace - Code, technical content */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

Font Loading

<!-- Google Fonts (recommended) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Type Scale

Base System

• Base size: 16px (1rem)
• Scale ratio: 1.25 (Major Third)

Scale Definition

Responsive Adjustments

/* Mobile (< 768px) */
h1 { font-size: 2rem; }    /* 32px */
h2 { font-size: 1.5rem; }  /* 24px */
h3 { font-size: 1.25rem; } /* 20px */
body { font-size: 1rem; }  /* 16px */

/* Desktop (>= 768px) */
h1 { font-size: 3rem; }    /* 48px */
h2 { font-size: 2.25rem; } /* 36px */
h3 { font-size: 1.75rem; } /* 28px */
body { font-size: 1rem; }  /* 16px */

Font Weights

Weight Scale

Weight Pairing

• Headings: 600-700
• Body: 400
• Links: 500
• Buttons: 600

Line Height Guidelines

Rules

Letter Spacing

Guidelines

Paragraph Spacing

Margins

/* Heading spacing */
h1, h2 { margin-top: 2rem; margin-bottom: 1rem; }
h3, h4 { margin-top: 1.5rem; margin-bottom: 0.75rem; }

/* Paragraph spacing */
p { margin-bottom: 1rem; }
p + p { margin-top: 0; }

Maximum Line Length

• Body text: 65-75 characters (optimal)
• Headings: Can be wider
• Code blocks: 80-100 characters

.prose {
  max-width: 65ch;
}

CSS Implementation

Full Variables

:root {
  /* Font Families */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
}

Tailwind Config

theme: {
  fontFamily: {
    heading: ['Inter', 'system-ui', 'sans-serif'],
    body: ['Inter', 'system-ui', 'sans-serif'],
    mono: ['JetBrains Mono', 'monospace'],
  },
  fontSize: {
    xs: ['0.75rem', { lineHeight: '1rem' }],
    sm: ['0.875rem', { lineHeight: '1.25rem' }],
    base: ['1rem', { lineHeight: '1.5rem' }],
    lg: ['1.125rem', { lineHeight: '1.75rem' }],
    xl: ['1.25rem', { lineHeight: '1.75rem' }],
    '2xl': ['1.5rem', { lineHeight: '2rem' }],
    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
    '5xl': ['3rem', { lineHeight: '1.1' }],
  }
}

Common Font Pairings

Clean & Modern

• Heading: Inter
• Body: Inter

Professional

• Heading: Playfair Display
• Body: Source Sans Pro

Startup/Tech

• Heading: Poppins
• Body: Open Sans

Editorial

• Heading: Merriweather
• Body: Lato

Accessibility

Minimum Sizes

• Body text: 16px minimum
• Small text: 14px minimum, not for long content
• Caption: 12px minimum, use sparingly

Contrast Requirements

• Text on background: 4.5:1 minimum (AA)
• Large text (18px+): 3:1 minimum

Best Practices

• Don't use all caps for long text
• Avoid justified text (use left-align)
• Ensure adequate line spacing
• Don't use thin weights (<400) at small sizes