/* Coffee Blog Theme - Typography System */
/* ========================================
GOOGLE FONTS IMPORTS
Add these to your HTML section
======================================== */
/*
*/
/* ========================================
TYPOGRAPHY SCALE & BASE SETTINGS
======================================== */
/* Base Typography Scale */
:root {
/* Font sizes using perfect fourth scale (1.333) */
--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 */
--font-size-6xl: 3.75rem; /* 60px */
/* Line heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Letter spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Font weights */
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
}
/* ========================================
TYPOGRAPHY SYSTEM 1: CLASSIC ELEGANT
Perfect for traditional coffee blogs
======================================== */
.typography-classic {
--heading-font: 'Playfair Display', serif;
--subheading-font: 'Lora', serif;
--body-font: 'Inter', sans-serif;
--accent-font: 'Dancing Script', cursive;
--mono-font: 'Source Code Pro', monospace;
}
.typography-classic h1 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: 1.5rem;
}
.typography-classic h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: 1.25rem;
}
.typography-classic h3 {
font-family: var(--subheading-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
margin-bottom: 1rem;
}
.typography-classic h4 {
font-family: var(--subheading-font);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
margin-bottom: 0.875rem;
}
.typography-classic h5 {
font-family: var(--body-font);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
margin-bottom: 0.75rem;
}
.typography-classic h6 {
font-family: var(--body-font);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.typography-classic p {
font-family: var(--body-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.25rem;
}
.typography-classic .lead {
font-family: var(--subheading-font);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.5rem;
}
.typography-classic .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
}
/* ========================================
TYPOGRAPHY SYSTEM 2: MODERN CLEAN
Perfect for contemporary coffee blogs
======================================== */
.typography-modern {
--heading-font: 'Oswald', sans-serif;
--subheading-font: 'Roboto', sans-serif;
--body-font: 'Open Sans', sans-serif;
--accent-font: 'Pacifico', cursive;
--mono-font: 'Roboto Mono', monospace;
}
.typography-modern h1 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.typography-modern h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.typography-modern h3 {
font-family: var(--subheading-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
margin-bottom: 1rem;
}
.typography-modern p {
font-family: var(--body-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.25rem;
}
/* ========================================
TYPOGRAPHY SYSTEM 3: RUSTIC COFFEE SHOP
Perfect for cozy, artisanal coffee blogs
======================================== */
.typography-rustic {
--heading-font: 'Merriweather', serif;
--subheading-font: 'Crimson Text', serif;
--body-font: 'Nunito', sans-serif;
--accent-font: 'Kaushan Script', cursive;
--mono-font: 'PT Mono', monospace;
}
.typography-rustic h1 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: 1.5rem;
}
.typography-rustic h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-snug);
margin-bottom: 1.25rem;
}
.typography-rustic p {
font-family: var(--body-font);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.25rem;
}
.typography-rustic .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-normal);
}
/* ========================================
TYPOGRAPHY SYSTEM 4: MINIMAL CONTEMPORARY
Perfect for modern, clean coffee blogs
======================================== */
.typography-minimal {
--heading-font: 'Montserrat', sans-serif;
--subheading-font: 'Source Sans Pro', sans-serif;
--body-font: 'Lato', sans-serif;
--accent-font: 'Satisfy', cursive;
--mono-font: 'Inconsolata', monospace;
}
.typography-minimal h1 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wider);
margin-bottom: 1.5rem;
}
.typography-minimal h2 {
font-family: var(--heading-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: 1.25rem;
}
.typography-minimal p {
font-family: var(--body-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-light);
line-height: var(--line-height-loose);
margin-bottom: 1.5rem;
}
/* ========================================
TYPOGRAPHY SYSTEM 5: BOLD & EXPRESSIVE
Perfect for energetic, creative coffee blogs
======================================== */
.typography-bold {
--heading-font: 'Bebas Neue', cursive;
--subheading-font: 'Raleway', sans-serif;
--body-font: 'Mulish', sans-serif;
--accent-font: 'Amatic SC', cursive;
--mono-font: 'Space Mono', monospace;
}
.typography-bold h1 {
font-family: var(--heading-font);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.typography-bold h2 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.typography-bold .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
}
/* ========================================
TYPOGRAPHY SYSTEM 6: LUXURY COFFEE BRAND
Perfect for premium, sophisticated coffee blogs
======================================== */
.typography-luxury {
--heading-font: 'Cormorant Garamond', serif;
--subheading-font: 'EB Garamond', serif;
--body-font: 'Source Sans Pro', sans-serif;
--accent-font: 'Alex Brush', cursive;
--mono-font: 'Fira Code', monospace;
}
.typography-luxury h1 {
font-family: var(--heading-font);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
font-style: italic;
margin-bottom: 1.5rem;
}
.typography-luxury h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
margin-bottom: 1.25rem;
}
.typography-luxury .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-normal);
}
/* ========================================
RESPONSIVE TYPOGRAPHY
======================================== */
/* Mobile adjustments */
@media screen and (max-width: 768px) {
:root {
--font-size-5xl: 2.25rem; /* Reduce large headings */
--font-size-4xl: 1.875rem;
--font-size-3xl: 1.5rem;
}
.typography-classic h1,
.typography-modern h1,
.typography-rustic h1,
.typography-minimal h1,
.typography-bold h1,
.typography-luxury h1 {
font-size: var(--font-size-4xl);
}
.typography-classic h2,
.typography-modern h2,
.typography-rustic h2,
.typography-minimal h2,
.typography-bold h2,
.typography-luxury h2 {
font-size: var(--font-size-3xl);
}
}
/* Tablet adjustments */
@media screen and (max-width: 1024px) and (min-width: 769px) {
.typography-bold h1 {
font-size: var(--font-size-5xl);
}
.typography-luxury h1 {
font-size: var(--font-size-5xl);
}
}
/* ========================================
UTILITY CLASSES
======================================== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.font-thin { font-weight: var(--font-weight-thin); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }
/* ========================================
IMPLEMENTATION GUIDE
======================================== */
/*
To use these typography systems:
1. Add the appropriate Google Fonts link to your HTML
2. Add the typography class to your or element:
3. Your headings and text will automatically inherit the typography styles
4. Mix typography with color palettes:
5. Use utility classes for fine-tuning:
Custom Heading
Popular combinations:
- palette-classic + typography-classic = Traditional elegance
- palette-modern + typography-minimal = Clean contemporary
- palette-dark + typography-rustic = Cozy coffee shop
- palette-espresso + typography-luxury = Premium brand
- palette-light + typography-bold = Energetic and fresh
*//* Coffee Blog Theme - Typography System */
/* ========================================
GOOGLE FONTS IMPORTS
Add these to your HTML section
======================================== */
/*
*/
/* ========================================
TYPOGRAPHY SCALE & BASE SETTINGS
======================================== */
/* Base Typography Scale */
:root {
/* Font sizes using perfect fourth scale (1.333) */
--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 */
--font-size-6xl: 3.75rem; /* 60px */
/* Line heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Letter spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Font weights */
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
}
/* ========================================
TYPOGRAPHY SYSTEM 1: CLASSIC ELEGANT
Perfect for traditional coffee blogs
======================================== */
.typography-classic {
--heading-font: 'Playfair Display', serif;
--subheading-font: 'Lora', serif;
--body-font: 'Inter', sans-serif;
--accent-font: 'Dancing Script', cursive;
--mono-font: 'Source Code Pro', monospace;
}
.typography-classic h1 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: 1.5rem;
}
.typography-classic h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: 1.25rem;
}
.typography-classic h3 {
font-family: var(--subheading-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
margin-bottom: 1rem;
}
.typography-classic h4 {
font-family: var(--subheading-font);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
margin-bottom: 0.875rem;
}
.typography-classic h5 {
font-family: var(--body-font);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
margin-bottom: 0.75rem;
}
.typography-classic h6 {
font-family: var(--body-font);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.typography-classic p {
font-family: var(--body-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.25rem;
}
.typography-classic .lead {
font-family: var(--subheading-font);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.5rem;
}
.typography-classic .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
}
/* ========================================
TYPOGRAPHY SYSTEM 2: MODERN CLEAN
Perfect for contemporary coffee blogs
======================================== */
.typography-modern {
--heading-font: 'Oswald', sans-serif;
--subheading-font: 'Roboto', sans-serif;
--body-font: 'Open Sans', sans-serif;
--accent-font: 'Pacifico', cursive;
--mono-font: 'Roboto Mono', monospace;
}
.typography-modern h1 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.typography-modern h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.typography-modern h3 {
font-family: var(--subheading-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
margin-bottom: 1rem;
}
.typography-modern p {
font-family: var(--body-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.25rem;
}
/* ========================================
TYPOGRAPHY SYSTEM 3: RUSTIC COFFEE SHOP
Perfect for cozy, artisanal coffee blogs
======================================== */
.typography-rustic {
--heading-font: 'Merriweather', serif;
--subheading-font: 'Crimson Text', serif;
--body-font: 'Nunito', sans-serif;
--accent-font: 'Kaushan Script', cursive;
--mono-font: 'PT Mono', monospace;
}
.typography-rustic h1 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: 1.5rem;
}
.typography-rustic h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-snug);
margin-bottom: 1.25rem;
}
.typography-rustic p {
font-family: var(--body-font);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
margin-bottom: 1.25rem;
}
.typography-rustic .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-normal);
}
/* ========================================
TYPOGRAPHY SYSTEM 4: MINIMAL CONTEMPORARY
Perfect for modern, clean coffee blogs
======================================== */
.typography-minimal {
--heading-font: 'Montserrat', sans-serif;
--subheading-font: 'Source Sans Pro', sans-serif;
--body-font: 'Lato', sans-serif;
--accent-font: 'Satisfy', cursive;
--mono-font: 'Inconsolata', monospace;
}
.typography-minimal h1 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wider);
margin-bottom: 1.5rem;
}
.typography-minimal h2 {
font-family: var(--heading-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: 1.25rem;
}
.typography-minimal p {
font-family: var(--body-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-light);
line-height: var(--line-height-loose);
margin-bottom: 1.5rem;
}
/* ========================================
TYPOGRAPHY SYSTEM 5: BOLD & EXPRESSIVE
Perfect for energetic, creative coffee blogs
======================================== */
.typography-bold {
--heading-font: 'Bebas Neue', cursive;
--subheading-font: 'Raleway', sans-serif;
--body-font: 'Mulish', sans-serif;
--accent-font: 'Amatic SC', cursive;
--mono-font: 'Space Mono', monospace;
}
.typography-bold h1 {
font-family: var(--heading-font);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.typography-bold h2 {
font-family: var(--heading-font);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.typography-bold .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
}
/* ========================================
TYPOGRAPHY SYSTEM 6: LUXURY COFFEE BRAND
Perfect for premium, sophisticated coffee blogs
======================================== */
.typography-luxury {
--heading-font: 'Cormorant Garamond', serif;
--subheading-font: 'EB Garamond', serif;
--body-font: 'Source Sans Pro', sans-serif;
--accent-font: 'Alex Brush', cursive;
--mono-font: 'Fira Code', monospace;
}
.typography-luxury h1 {
font-family: var(--heading-font);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
font-style: italic;
margin-bottom: 1.5rem;
}
.typography-luxury h2 {
font-family: var(--heading-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
margin-bottom: 1.25rem;
}
.typography-luxury .accent-text {
font-family: var(--accent-font);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-normal);
}
/* ========================================
RESPONSIVE TYPOGRAPHY
======================================== */
/* Mobile adjustments */
@media screen and (max-width: 768px) {
:root {
--font-size-5xl: 2.25rem; /* Reduce large headings */
--font-size-4xl: 1.875rem;
--font-size-3xl: 1.5rem;
}
.typography-classic h1,
.typography-modern h1,
.typography-rustic h1,
.typography-minimal h1,
.typography-bold h1,
.typography-luxury h1 {
font-size: var(--font-size-4xl);
}
.typography-classic h2,
.typography-modern h2,
.typography-rustic h2,
.typography-minimal h2,
.typography-bold h2,
.typography-luxury h2 {
font-size: var(--font-size-3xl);
}
}
/* Tablet adjustments */
@media screen and (max-width: 1024px) and (min-width: 769px) {
.typography-bold h1 {
font-size: var(--font-size-5xl);
}
.typography-luxury h1 {
font-size: var(--font-size-5xl);
}
}
/* ========================================
UTILITY CLASSES
======================================== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.font-thin { font-weight: var(--font-weight-thin); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }
/* ========================================
IMPLEMENTATION GUIDE
======================================== */
/*
To use these typography systems:
1. Add the appropriate Google Fonts link to your HTML
2. Add the typography class to your or element:
3. Your headings and text will automatically inherit the typography styles
4. Mix typography with color palettes:
5. Use utility classes for fine-tuning:
Custom Heading
Popular combinations:
- palette-classic + typography-classic = Traditional elegance
- palette-modern + typography-minimal = Clean contemporary
- palette-dark + typography-rustic = Cozy coffee shop
- palette-espresso + typography-luxury = Premium brand
- palette-light + typography-bold = Energetic and fresh
*/