/** * ============================================================================ * SIMPLEWEBSITES TEMPLATE FACTORY — FONTS & TYPOGRAPHY * ============================================================================ * * 12 font pairs from Google Fonts + typography scale * * Usage: * — Apply font pair * — Combined with scheme * * Structure: * 1. Google Fonts imports * 2. Font pair definitions (.font-*) * 3. Typography scale (sizes, weights, line-heights) * 4. Typography utility classes * * ============================================================================ * TABLE OF CONTENTS * ============================================================================ * * 1. Classic Professional — Playfair Display + Source Sans 3 * 2. Modern Clean — Inter + Inter * 3. Friendly Rounded — Nunito + Nunito (PRIMARY for Cleaning) * 4. Bold Statement — Montserrat + Open Sans * 5. Editorial Elegant — Cormorant Garamond + Lato * 6. Tech Geometric — Poppins + Roboto * 7. Warm Humanist — Merriweather + Source Sans 3 * 8. Minimal Swiss — System fonts (Helvetica Neue / Arial) * 9. Craft Character — Libre Baskerville + Karla * 10. Dynamic Modern — DM Sans + DM Sans * 11. Serious Business — Raleway + Open Sans * 12. Playful Creative — Quicksand + Work Sans * * ============================================================================ */ /* ============================================================================ * SECTION 1: GOOGLE FONTS IMPORTS * ============================================================================ * Using display=swap for performance (shows fallback while loading) * Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) * ============================================================================ */ /* 1. Classic Professional: Playfair Display + Source Sans 3 */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap'); /* 2. Modern Clean: Inter */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* 3. Friendly Rounded: Nunito */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap'); /* 4. Bold Statement: Montserrat + Open Sans */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap'); /* 5. Editorial Elegant: Cormorant Garamond + Lato */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Lato:wght@400;700&display=swap'); /* 6. Tech Geometric: Poppins + Roboto */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap'); /* 7. Warm Humanist: Merriweather + Source Sans 3 (already imported above) */ @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap'); /* 8. Minimal Swiss: System fonts — no import needed */ /* 9. Craft Character: Libre Baskerville + Karla */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Karla:wght@400;500;600;700&display=swap'); /* 10. Dynamic Modern: DM Sans */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); /* 11. Serious Business: Raleway + Open Sans (Open Sans already imported) */ @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'); /* 12. Playful Creative: Quicksand + Work Sans */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap'); /* ============================================================================ * SECTION 2: TYPOGRAPHY SCALE (CSS Custom Properties) * ============================================================================ * Using modular scale ratio 1.25 (major third) * Base: 16px (1rem) * Scale: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72 * ============================================================================ */ :root { /* === Font Families (defaults — overridden by .font-* classes) === */ --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* === Font Sizes === */ --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 */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* === Font Weights === */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* === Line Heights === */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.75; /* === Letter Spacing === */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* === Heading Sizes (responsive — mobile first) === */ --h1-size: var(--text-4xl); --h2-size: var(--text-3xl); --h3-size: var(--text-2xl); --h4-size: var(--text-xl); --h5-size: var(--text-lg); --h6-size: var(--text-base); /* === Body Text === */ --body-size: var(--text-base); --body-line-height: var(--leading-relaxed); } /* Desktop sizes (min-width: 768px) */ @media (min-width: 768px) { :root { --h1-size: var(--text-5xl); --h2-size: var(--text-4xl); --h3-size: var(--text-2xl); --h4-size: var(--text-xl); --h5-size: var(--text-lg); --h6-size: var(--text-base); --body-size: var(--text-lg); } } /* Large desktop (min-width: 1280px) */ @media (min-width: 1280px) { :root { --h1-size: var(--text-6xl); --h2-size: var(--text-5xl); --h3-size: var(--text-3xl); --h4-size: var(--text-2xl); --h5-size: var(--text-xl); --h6-size: var(--text-lg); } } /* ============================================================================ * SECTION 3: FONT PAIR DEFINITIONS * ============================================================================ * Each pair sets --font-heading and --font-body * Applied via class on or * ============================================================================ */ /* ---------------------------------------------------------------------------- * 1. Classic Professional * Character: Elegant, reliable * Best for: Legal, Consulting, Luxury, Finance * ---------------------------------------------------------------------------- */ .font-classic { --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 2. Modern Clean * Character: Modern, neutral, universal * Best for: Tech, SaaS, Universal * ---------------------------------------------------------------------------- */ .font-modern { --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 3. Friendly Rounded * Character: Friendly, approachable * Best for: Cleaning, Tutors, Family Services * PRIMARY FONT FOR CLEANING NICHE * ---------------------------------------------------------------------------- */ .font-friendly { --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 4. Bold Statement * Character: Confident, modern * Best for: Construction, Fitness, Bold brands * ---------------------------------------------------------------------------- */ .font-bold { --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 5. Editorial Elegant * Character: Refined, magazine-style * Best for: Beauty, Fashion, Photography * ---------------------------------------------------------------------------- */ .font-editorial { --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 6. Tech Geometric * Character: Geometric, tech-forward * Best for: IT, Digital Agencies, Startups * ---------------------------------------------------------------------------- */ .font-tech { --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 7. Warm Humanist * Character: Warm, readable * Best for: Education, Healthcare, NGO * ---------------------------------------------------------------------------- */ .font-warm { --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 8. Minimal Swiss * Character: Minimalist, Swiss design * Best for: Architecture, Design Studios * ---------------------------------------------------------------------------- */ .font-swiss { --font-heading: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; } /* ---------------------------------------------------------------------------- * 9. Craft Character * Character: Artisanal, characterful * Best for: Cafes, Bakeries, Handmade * ---------------------------------------------------------------------------- */ .font-craft { --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 10. Dynamic Modern * Character: Dynamic, fresh * Best for: Startups, Apps, Modern Services * ---------------------------------------------------------------------------- */ .font-dynamic { --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 11. Serious Business * Character: Serious but not boring * Best for: Finance, B2B, Professional Services * ---------------------------------------------------------------------------- */ .font-business { --font-heading: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * 12. Playful Creative * Character: Playful, creative * Best for: Kids, Events, Creative Agencies * ---------------------------------------------------------------------------- */ .font-playful { --font-heading: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================================================ * SECTION 4: BASE TYPOGRAPHY STYLES * ============================================================================ * Applied globally, use CSS variables for customization * ============================================================================ */ /* Body text */ body { font-family: var(--font-body); font-size: var(--body-size); font-weight: var(--font-normal); line-height: var(--body-line-height); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-heading); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--text-primary); text-wrap: balance; } h1, .h1 { font-size: var(--h1-size); letter-spacing: var(--tracking-tight); } h2, .h2 { font-size: var(--h2-size); letter-spacing: var(--tracking-tight); } h3, .h3 { font-size: var(--h3-size); } h4, .h4 { font-size: var(--h4-size); } h5, .h5 { font-size: var(--h5-size); } h6, .h6 { font-size: var(--h6-size); } /* Paragraph */ p { text-wrap: pretty; } /* Lead paragraph */ .lead { font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--text-secondary); } @media (min-width: 768px) { .lead { font-size: var(--text-2xl); } } /* Small text */ small, .small { font-size: var(--text-sm); } /* Strong / Bold */ strong, b, .font-bold { font-weight: var(--font-bold); } /* Emphasis / Italic */ em, i { font-style: italic; } /* Links in body text */ p a, li a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.2s ease; } p a:hover, li a:hover { color: var(--primary-hover); } /* Lists */ ul, ol { padding-left: 1.5em; } li { margin-bottom: 0.5em; } li:last-child { margin-bottom: 0; } /* Blockquote */ blockquote { font-family: var(--font-heading); font-size: var(--text-xl); font-style: italic; line-height: var(--leading-relaxed); color: var(--text-secondary); padding-left: 1.5rem; border-left: 4px solid var(--primary); } @media (min-width: 768px) { blockquote { font-size: var(--text-2xl); } } /* Code */ code { font-family: var(--font-mono); font-size: 0.875em; padding: 0.125em 0.375em; background-color: var(--bg-surface-alt); border-radius: 0.25rem; } pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal); padding: 1rem; background-color: var(--bg-surface-alt); border-radius: 0.5rem; overflow-x: auto; } pre code { padding: 0; background-color: transparent; } /* ============================================================================ * SECTION 5: TYPOGRAPHY UTILITY CLASSES * ============================================================================ * For fine-tuned control in components * ============================================================================ */ /* --- Font Family --- */ .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } /* --- Font Size --- */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } .text-5xl { font-size: var(--text-5xl); } .text-6xl { font-size: var(--text-6xl); } .text-7xl { font-size: var(--text-7xl); } /* --- Font Weight --- */ .font-normal { font-weight: var(--font-normal); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } /* --- Line Height --- */ .leading-none { line-height: var(--leading-none); } .leading-tight { line-height: var(--leading-tight); } .leading-snug { line-height: var(--leading-snug); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed { line-height: var(--leading-relaxed); } .leading-loose { line-height: var(--leading-loose); } /* --- Letter Spacing --- */ .tracking-tighter { letter-spacing: var(--tracking-tighter); } .tracking-tight { letter-spacing: var(--tracking-tight); } .tracking-normal { letter-spacing: var(--tracking-normal); } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-wider { letter-spacing: var(--tracking-wider); } .tracking-widest { letter-spacing: var(--tracking-widest); } /* --- Text Alignment --- */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } /* --- Text Transform --- */ .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* --- Text Decoration --- */ .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .no-underline { text-decoration: none; } /* --- Text Color (semantic) --- */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-inverted { color: var(--text-inverted); } .text-accent { color: var(--primary); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-error { color: var(--error); } /* --- Text Wrapping --- */ .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .text-nowrap { white-space: nowrap; } /* --- Truncation --- */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ * SECTION 6: RESPONSIVE TYPOGRAPHY UTILITIES * ============================================================================ * Breakpoint prefixes: sm (640px), md (768px), lg (1024px), xl (1280px) * ============================================================================ */ /* Medium screens (768px+) */ @media (min-width: 768px) { .md\:text-xs { font-size: var(--text-xs); } .md\:text-sm { font-size: var(--text-sm); } .md\:text-base { font-size: var(--text-base); } .md\:text-lg { font-size: var(--text-lg); } .md\:text-xl { font-size: var(--text-xl); } .md\:text-2xl { font-size: var(--text-2xl); } .md\:text-3xl { font-size: var(--text-3xl); } .md\:text-4xl { font-size: var(--text-4xl); } .md\:text-5xl { font-size: var(--text-5xl); } .md\:text-6xl { font-size: var(--text-6xl); } .md\:text-7xl { font-size: var(--text-7xl); } .md\:text-left { text-align: left; } .md\:text-center { text-align: center; } .md\:text-right { text-align: right; } } /* Large screens (1024px+) */ @media (min-width: 1024px) { .lg\:text-xs { font-size: var(--text-xs); } .lg\:text-sm { font-size: var(--text-sm); } .lg\:text-base { font-size: var(--text-base); } .lg\:text-lg { font-size: var(--text-lg); } .lg\:text-xl { font-size: var(--text-xl); } .lg\:text-2xl { font-size: var(--text-2xl); } .lg\:text-3xl { font-size: var(--text-3xl); } .lg\:text-4xl { font-size: var(--text-4xl); } .lg\:text-5xl { font-size: var(--text-5xl); } .lg\:text-6xl { font-size: var(--text-6xl); } .lg\:text-7xl { font-size: var(--text-7xl); } .lg\:text-left { text-align: left; } .lg\:text-center { text-align: center; } .lg\:text-right { text-align: right; } } /* Extra large screens (1280px+) */ @media (min-width: 1280px) { .xl\:text-xs { font-size: var(--text-xs); } .xl\:text-sm { font-size: var(--text-sm); } .xl\:text-base { font-size: var(--text-base); } .xl\:text-lg { font-size: var(--text-lg); } .xl\:text-xl { font-size: var(--text-xl); } .xl\:text-2xl { font-size: var(--text-2xl); } .xl\:text-3xl { font-size: var(--text-3xl); } .xl\:text-4xl { font-size: var(--text-4xl); } .xl\:text-5xl { font-size: var(--text-5xl); } .xl\:text-6xl { font-size: var(--text-6xl); } .xl\:text-7xl { font-size: var(--text-7xl); } .xl\:text-left { text-align: left; } .xl\:text-center { text-align: center; } .xl\:text-right { text-align: right; } } /* ============================================================================ * END OF FONTS * ============================================================================ */