/* ============================================================ UnderstandSEO — Typography Pairings ------------------------------------------------------------ PURPOSE Fixes the "every site uses the same font" problem. tokens.css binds palette-warm -> Fraunces, and since most prospects map to palette-warm, every site looked identical. This file DECOUPLES fonts from palette: load this AFTER tokens.css and add ONE `type-*` class to . The pairing's font vars win via the cascade (class selector beats the :root/element defaults), so tokens.css is never modified. USAGE 1. In , after tokens.css, add the matching Google Fonts for the pairing you chose (see each block's @font note). 2. On , set TWO classes: the palette and the pairing, e.g. 3. Pick the pairing from the brand brief's PERSONALITY line, and obey the NO-REPEAT rule: never reuse the previous prospect's pairing (logged in prospects.csv `type_pairing`). NO-REPEAT is what creates variety. The library is sized so you can run ~10 prospects before any pairing must repeat. Every pairing also tunes weight + tracking + hero scale, because variety in *weight and scale* sells the difference as much as the family does. Anton at Fraunces' tracking looks broken; each block sets what that family actually needs. ============================================================ */ /* Shared knobs every pairing may override. Defaults here mirror tokens.css so a site with no type-* class is unchanged. */ :root { --display-weight: 500; --display-tracking: -0.02em; --display-line: 1.05; --body-weight: 400; } /* Apply the display knobs globally so headings pick them up regardless of which palette/pairing is active. */ h1, h2, h3, h4 { font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } /* ------------------------------------------------------------ 1. EDITORIAL WARM — refined, family-owned, heritage This is today's default look, named so the no-repeat logic can track it. Suits: trattorias, bakeries, classic American. @font: Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600 + DM Sans:400,500 ------------------------------------------------------------ */ .type-editorial-warm { --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.02em; } /* ------------------------------------------------------------ 2. GRAND SERIF — upscale, fine dining, special occasion High-contrast didone display. Suits: steakhouses, tasting menus, wine bars, hotels. @font: Playfair+Display:400,500,600,700 + Source+Sans+3:400,500,600 ------------------------------------------------------------ */ .type-grand-serif { --font-display: 'Playfair Display', 'Times New Roman', serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.01em; --hero-display-size: clamp(3rem, 8.5vw, 6.5rem); } /* ------------------------------------------------------------ 3. CONDENSED BOLD — loud, casual, high-energy Tall condensed display, set BIG. Suits: pizza, sports bar, burgers, taco shop, breweries. @font: Anton:400 + Inter:400,500,600 ------------------------------------------------------------ */ .type-condensed-bold { --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 400; /* Anton has one weight */ --display-tracking: 0.005em; /* condensed needs a touch of air */ --display-line: 0.95; --hero-display-size: clamp(3.25rem, 11vw, 8rem); } .type-condensed-bold h1, .type-condensed-bold h2 { text-transform: uppercase; } /* ------------------------------------------------------------ 4. RETRO DINER — playful, breakfast, neighborhood Quirky variable grotesque display. Suits: diners, brunch spots, bakeries, ice cream, family cafes. @font: Bricolage+Grotesque:400,500,700 + Work+Sans:400,500 ------------------------------------------------------------ */ .type-retro-diner { --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; --font-body: 'Work Sans', system-ui, sans-serif; --display-weight: 700; --display-tracking: -0.03em; } /* ------------------------------------------------------------ 5. MODERN CLEAN — contemporary, chef-driven, minimal Light serif display + neo-grotesque body. Suits: modern American, new-school cafes, design-forward concepts. @font: Instrument+Serif:400 (+italic) + Geist (self-host) / Inter ------------------------------------------------------------ */ .type-modern-clean { --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Geist', 'Inter', system-ui, sans-serif; --display-weight: 400; --display-tracking: -0.015em; --hero-display-size: clamp(3rem, 8vw, 6.75rem); } /* ------------------------------------------------------------ 6. HANDCRAFT — artisan, craft, maker Chunky display + humanist body. Suits: coffee roasters, craft bakeries, butcher shops, breweries, makers. @font: Gloock:400 + Hanken+Grotesk:400,500,600 ------------------------------------------------------------ */ .type-handcraft { --font-display: 'Gloock', 'Rockwell', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --display-weight: 400; --display-tracking: -0.01em; } /* ------------------------------------------------------------ 7. CIVIC TRUST — institutional, calm, credible Mirrors palette-civic's intent. Suits: healthcare, churches, schools, civic, professional services that want gravitas. @font: Source+Serif+4:400,500,600 + Source+Sans+3:400,500,600 ------------------------------------------------------------ */ .type-civic-trust { --font-display: 'Source Serif 4', 'Charter', Georgia, serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.01em; } /* ------------------------------------------------------------ 8. TECH SERVICE — modern B2B, trades-with-polish Grotesk display + grotesk body. Suits: HVAC/plumbing done modern, agencies, SaaS-adjacent local service. @font: Space+Grotesk:400,500,700 + Inter:400,500,600 ------------------------------------------------------------ */ .type-tech-service { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.025em; } /* ------------------------------------------------------------ 9. WELLNESS — calm, airy, premium-soft Classical roman caps display + soft body. Suits: spa, yoga, beauty, med-spa, florists. @font: Marcellus:400 + Mulish:400,500,600 ------------------------------------------------------------ */ .type-wellness { --font-display: 'Marcellus', 'Optima', Georgia, serif; --font-body: 'Mulish', system-ui, sans-serif; --display-weight: 400; --display-tracking: 0.01em; /* roman caps breathe a little */ } /* ------------------------------------------------------------ 10. NEO BRUTAL — bold, unfussy, statement Heavy grotesk display + clean body. Suits: confident concepts, street food, natural wine, concepts that want edge. @font: Archivo:600,700,800 (+Expanded if self-hosting) + Inter:400,500 ------------------------------------------------------------ */ .type-neo-brutal { --font-display: 'Archivo', 'Helvetica Neue', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.03em; --display-line: 0.98; } /* ============================================================ EXPANDED PALETTE-SPECIFIC PAIRINGS Added so sites in the same vertical don't all look identical. Warm gets W2/W3, Modern gets M2/M3, Civic gets C2/C3. ============================================================ */ /* ------------------------------------------------------------ W2. CLASSIC ELEGANCE — Playfair Display + Inter High-contrast didone display with a contemporary Swiss body. Suits: boutiques, home goods, gift shops, wine shops, upscale brunch, anything wanting refined femininity. @font: Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600 ------------------------------------------------------------ */ .type-warm-2 { --font-display: 'Playfair Display', 'Times New Roman', serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.015em; --hero-display-size: clamp(2.75rem, 7.5vw, 5.75rem); } /* ------------------------------------------------------------ W3. SOFTER APPROACHABLE — Lora + Nunito Sans Warmly readable transitional serif with a rounded geometric body. Suits: family bakeries, children's boutiques, garden shops, indie bookstores, cozy cafes. @font: Lora:ital,wght@0,400;0,500;0,600;1,400&family=Nunito+Sans:wght@400;500;600 ------------------------------------------------------------ */ .type-warm-3 { --font-display: 'Lora', 'Palatino', Georgia, serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.01em; --body-weight: 400; } /* ------------------------------------------------------------ M2. TECHY BUT WARM — Space Grotesk + IBM Plex Sans Geometric grotesque display paired with IBM's humanist sans. Suits: tech-forward service businesses, co-working spaces, creative agencies, digital consultancies, modern studios. @font: Space+Grotesk:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600 ------------------------------------------------------------ */ .type-modern-2 { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.02em; } /* ------------------------------------------------------------ M3. GEOMETRIC CONTEMPORARY — Sora + Outfit Rounded geometric display + matching geometric body. Both are variable fonts. Suits: fitness studios, modern wellness, contemporary yoga, pilates, cycling studios, design studios. @font: Sora:wght@400;500;600;700&family=Outfit:wght@400;500;600 ------------------------------------------------------------ */ .type-modern-3 { --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Outfit', system-ui, sans-serif; --display-weight: 700; --display-tracking: -0.025em; --display-line: 1.0; --hero-display-size: clamp(3rem, 8vw, 6.25rem); } /* ------------------------------------------------------------ C2. TRADITIONAL READABILITY — Merriweather + Open Sans Workhorse slab-influenced serif with the most-deployed sans. Rock-solid legibility. Suits: city departments, school districts, public libraries, community health centers, church denominations. @font: Merriweather:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@400;500;600 ------------------------------------------------------------ */ .type-civic-2 { --font-display: 'Merriweather', 'Georgia', serif; --font-body: 'Open Sans', system-ui, sans-serif; --display-weight: 700; --display-tracking: -0.01em; --body-size: 1.125rem; } /* ------------------------------------------------------------ C3. ACCESSIBILITY-FIRST — Literata + Atkinson Hyperlegible Literata is a variable-axis serif designed for extended reading. Atkinson Hyperlegible was created by the Braille Institute specifically for low-vision readers. Together they are the most accessible pairing in the library. Suits: disability services, senior centers, public health, social services, any entity prioritizing maximum readability. @font: Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=Atkinson+Hyperlegible:wght@400;700 ------------------------------------------------------------ */ .type-civic-3 { --font-display: 'Literata', 'Charter', Georgia, serif; --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.005em; --body-size: 1.1875rem; /* slightly larger for accessibility */ --body-weight: 400; } /* ------------------------------------------------------------ PERFORMANCE NOTES - Cap each site at TWO families (one display, one body). The mono var can stay as tokens.css set it. - Always load with &display=swap. - Preload ONLY the hero/display font: - Self-host Geist (not on Google Fonts) or fall back to Inter, which every pairing already lists. - Variable fonts (Fraunces, Bricolage, Source Serif 4, Space Grotesk, Archivo, Hanken) keep the request count low. ------------------------------------------------------------ */