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
- Line Length: Keep lines between 45-75 characters
- Line Height: Use 1.4-1.6 for body text
- Contrast: Ensure sufficient color contrast
- Hierarchy: Use clear typographic hierarchy
- 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;
}