Web Typography Best Practices

Typography Fundamentals

Good typography improves readability, establishes hierarchy, and creates visual appeal.

Font Categories

Serif

Have decorative strokes. Traditional, trustworthy.

Examples: Georgia, Times New Roman, Merriweather

Sans-Serif

Clean, no strokes. Modern, minimal.

Examples: Arial, Inter, Open Sans

Monospace

Fixed-width characters. For code.

Examples: Courier, Fira Code, JetBrains Mono

Display

Decorative, for headlines only.

Loading Web Fonts

<!-- Google Fonts -->
<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">

/* Self-hosted */
@font-face {
    font-family: 'Custom Font';
    src: url('/fonts/custom.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

Font Sizing

Use Relative Units

html {
    font-size: 16px;  /* Base size */
}

body {
    font-size: 1rem;      /* 16px */
}

h1 {
    font-size: 2.5rem;    /* 40px */
}

small {
    font-size: 0.875rem;  /* 14px */
}

Fluid Typography

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

Type Scale

Use consistent ratios:

:root {
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
}

Line Height

body {
    line-height: 1.5;  /* Good for body text */
}

h1 {
    line-height: 1.2;  /* Tighter for headings */
}

Line Length

Optimal: 50-75 characters per line.

.content {
    max-width: 65ch;  /* Character-based width */
}

Font Pairing

Combine contrasting but complementary fonts:

1. Serif + Sans-Serif: Classic combination
2. Same family, different weights: Safe and cohesive
3. Contrast in style: One decorative, one simple

Common pairings:

• Playfair Display + Source Sans Pro
• Montserrat + Merriweather
• Roboto + Roboto Slab

Hierarchy

Establish importance through:

• Size
• Weight
• Color
• Spacing

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

Best Practices

1. Limit to 2-3 fonts per site
2. Ensure readable size (16px+ for body)
3. Adequate contrast (4.5:1 minimum)
4. Proper line height (1.4-1.6 for body)
5. Reasonable line length (50-75 characters)
6. Use font-display: swap for web fonts
7. Preload critical fonts