feat: implement professional typography system with curated font pairings
Typography Presets (research-backed pairings): - clean: Manrope + Inter (minimal, modern) - editorial: Playfair Display + Raleway (fashion, lifestyle) - modern: Space Grotesk + Inter (tech, futuristic) - classic: Cormorant Garamond + Source Serif 4 (luxury, elegant) - friendly: Fraunces + Work Sans (playful, quirky) - minimal: DM Sans + Source Serif 4 (design-forward) - impulse: Raleway + Inter (wellness, beauty) Type Scale & Line Heights: - Major Third (1.25) ratio for mathematical harmony - H1: line-height 1.1, letter-spacing -0.025em - H2: line-height 1.15, letter-spacing -0.02em - H3: line-height 1.2, letter-spacing -0.015em - Body: line-height 1.5 (WCAG compliant) - Small text: letter-spacing +0.01em for readability Fluid Typography: - Headings use clamp() for smooth mobile→desktop scaling - Display: 36px→48px, XL: 30px→40px, LG: 24px→32px Performance: - Variable font loading where available (Inter, Manrope, etc.) - Removed unused fonts (Libre Baskerville, Nunito, Source Sans) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
aa469ffb50
commit
974d91ce33
@ -52,52 +52,66 @@
|
||||
--p-shadow-strength: 0.25;
|
||||
}
|
||||
|
||||
/* Typography - Default (Clean/Inter) */
|
||||
/* Typography Presets - Curated font pairings based on e-commerce research */
|
||||
|
||||
/* Default (Clean) - Minimal & Modern: Manrope + Inter */
|
||||
.preview-frame {
|
||||
--t-font-heading: var(--p-font-inter);
|
||||
--t-font-heading: var(--p-font-manrope);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 600;
|
||||
--t-heading-tracking: -0.025em;
|
||||
}
|
||||
|
||||
.preview-frame[data-typography="editorial"] {
|
||||
--t-font-heading: var(--p-font-fraunces);
|
||||
--t-font-body: var(--p-font-source);
|
||||
--t-heading-weight: 700;
|
||||
--t-heading-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* Editorial - Bold & Editorial: Playfair Display + Raleway */
|
||||
/* Best for: fashion, lifestyle brands */
|
||||
.preview-frame[data-typography="editorial"] {
|
||||
--t-font-heading: var(--p-font-playfair);
|
||||
--t-font-body: var(--p-font-raleway);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* Modern - Tech & Futuristic: Space Grotesk + Inter */
|
||||
/* Best for: tech products, gadget accessories */
|
||||
.preview-frame[data-typography="modern"] {
|
||||
--t-font-heading: var(--p-font-space);
|
||||
--t-font-body: var(--p-font-space);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: -0.03em;
|
||||
}
|
||||
|
||||
/* Classic - Luxury & Elegant: Cormorant Garamond + Source Serif 4 */
|
||||
/* Best for: high-end goods, premium products */
|
||||
.preview-frame[data-typography="classic"] {
|
||||
--t-font-heading: var(--p-font-baskerville);
|
||||
--t-font-body: var(--p-font-source);
|
||||
--t-heading-weight: 400;
|
||||
--t-font-heading: var(--p-font-cormorant);
|
||||
--t-font-body: var(--p-font-source-serif);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: 0;
|
||||
}
|
||||
|
||||
/* Friendly - Playful & Quirky: Fraunces + Work Sans */
|
||||
/* Best for: creative products, novelty gifts */
|
||||
.preview-frame[data-typography="friendly"] {
|
||||
--t-font-heading: var(--p-font-nunito);
|
||||
--t-font-body: var(--p-font-nunito);
|
||||
--t-heading-weight: 700;
|
||||
--t-font-heading: var(--p-font-fraunces);
|
||||
--t-font-body: var(--p-font-work-sans);
|
||||
--t-heading-weight: 600;
|
||||
--t-heading-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* Minimal - Modern Sans-Serif: DM Sans + Source Serif 4 */
|
||||
/* Best for: design-forward, contemporary homeware */
|
||||
.preview-frame[data-typography="minimal"] {
|
||||
--t-font-heading: var(--p-font-outfit);
|
||||
--t-font-body: var(--p-font-outfit);
|
||||
--t-heading-weight: 300;
|
||||
--t-font-heading: var(--p-font-dm-sans);
|
||||
--t-font-body: var(--p-font-source-serif);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: 0;
|
||||
}
|
||||
|
||||
/* Impulse - Light & Airy: Raleway + Inter */
|
||||
/* Best for: wellness, beauty, sustainable goods */
|
||||
.preview-frame[data-typography="impulse"] {
|
||||
--t-font-heading: var(--p-font-avenir);
|
||||
--t-font-body: var(--p-font-avenir);
|
||||
--t-font-heading: var(--p-font-raleway);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 300;
|
||||
--t-heading-tracking: 0.02em;
|
||||
}
|
||||
|
||||
@ -23,25 +23,61 @@
|
||||
--p-radius-xl: 1rem;
|
||||
--p-radius-full: 9999px;
|
||||
|
||||
/* Font families */
|
||||
/* Font families - Curated pairings based on research */
|
||||
/* Sans-serif */
|
||||
--p-font-inter: 'Inter', system-ui, sans-serif;
|
||||
--p-font-fraunces: 'Fraunces', serif;
|
||||
--p-font-source: 'Source Sans 3', system-ui, sans-serif;
|
||||
--p-font-manrope: 'Manrope', system-ui, sans-serif;
|
||||
--p-font-work-sans: 'Work Sans', system-ui, sans-serif;
|
||||
--p-font-dm-sans: 'DM Sans', system-ui, sans-serif;
|
||||
--p-font-raleway: 'Raleway', system-ui, sans-serif;
|
||||
--p-font-space: 'Space Grotesk', system-ui, sans-serif;
|
||||
--p-font-baskerville: 'Libre Baskerville', Georgia, serif;
|
||||
--p-font-nunito: 'Nunito', system-ui, sans-serif;
|
||||
--p-font-outfit: 'Outfit', system-ui, sans-serif;
|
||||
--p-font-avenir: 'Nunito Sans', 'Avenir Next', 'Avenir', system-ui, sans-serif;
|
||||
|
||||
/* Font size scale */
|
||||
--p-text-xs: 0.75rem;
|
||||
--p-text-sm: 0.875rem;
|
||||
--p-text-base: 1rem;
|
||||
--p-text-lg: 1.125rem;
|
||||
--p-text-xl: 1.25rem;
|
||||
--p-text-2xl: 1.5rem;
|
||||
--p-text-3xl: 1.875rem;
|
||||
--p-text-4xl: 2.25rem;
|
||||
/* Serif */
|
||||
--p-font-fraunces: 'Fraunces', Georgia, serif;
|
||||
--p-font-cormorant: 'Cormorant Garamond', Georgia, serif;
|
||||
--p-font-playfair: 'Playfair Display', Georgia, serif;
|
||||
--p-font-source-serif: 'Source Serif 4', Georgia, serif;
|
||||
|
||||
/* Major Third (1.25) Type Scale with line-heights and letter-spacing */
|
||||
/* Body text: 1.5 line-height (WCAG compliant) */
|
||||
--p-text-xs: 0.75rem; /* 12px */
|
||||
--p-lh-xs: 1.5;
|
||||
--p-ls-xs: 0.02em; /* Wider for small text */
|
||||
|
||||
--p-text-sm: 0.875rem; /* 14px */
|
||||
--p-lh-sm: 1.5;
|
||||
--p-ls-sm: 0.01em;
|
||||
|
||||
--p-text-base: 1rem; /* 16px - browser default, accessible minimum */
|
||||
--p-lh-base: 1.5;
|
||||
--p-ls-base: 0;
|
||||
|
||||
--p-text-lg: 1.125rem; /* 18px */
|
||||
--p-lh-lg: 1.5;
|
||||
--p-ls-lg: 0;
|
||||
|
||||
/* Subheadings: 1.2-1.3 line-height */
|
||||
--p-text-xl: 1.25rem; /* 20px = 16 × 1.25 */
|
||||
--p-lh-xl: 1.35;
|
||||
--p-ls-xl: -0.01em;
|
||||
|
||||
--p-text-2xl: 1.5rem; /* 24px = 20 × 1.25 */
|
||||
--p-lh-2xl: 1.3;
|
||||
--p-ls-2xl: -0.01em;
|
||||
|
||||
/* Headings: 1.1-1.2 line-height, tighter tracking */
|
||||
--p-text-3xl: 1.875rem; /* 30px = 24 × 1.25 */
|
||||
--p-lh-3xl: 1.2;
|
||||
--p-ls-3xl: -0.02em;
|
||||
|
||||
--p-text-4xl: 2.25rem; /* 36px */
|
||||
--p-lh-4xl: 1.15;
|
||||
--p-ls-4xl: -0.02em;
|
||||
|
||||
--p-text-5xl: 3rem; /* 48px */
|
||||
--p-lh-5xl: 1.1;
|
||||
--p-ls-5xl: -0.025em;
|
||||
|
||||
/* Animation durations */
|
||||
--p-duration-fast: 0.1s;
|
||||
|
||||
@ -35,12 +35,12 @@
|
||||
--t-text-xl: 1.25em; /* ~20px at 16px base, ~22px at 18px base */
|
||||
--t-text-2xl: 1.5em; /* ~24px at 16px base, ~27px at 18px base */
|
||||
|
||||
/* Heading sizes - separate scale for headings */
|
||||
--t-heading-sm: 1.25em; /* h4, h5, h6 */
|
||||
--t-heading-md: 1.5em; /* h3 */
|
||||
--t-heading-lg: 2em; /* h2 */
|
||||
--t-heading-xl: 2.5em; /* h1 */
|
||||
--t-heading-display: 3em; /* hero/display text */
|
||||
/* Fluid heading sizes - scale smoothly between mobile and desktop */
|
||||
--t-heading-sm: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18-20px */
|
||||
--t-heading-md: clamp(1.25rem, 1rem + 1vw, 1.5rem); /* 20-24px */
|
||||
--t-heading-lg: clamp(1.5rem, 1rem + 2vw, 2rem); /* 24-32px */
|
||||
--t-heading-xl: clamp(1.875rem, 1.25rem + 2.5vw, 2.5rem); /* 30-40px */
|
||||
--t-heading-display: clamp(2.25rem, 1.5rem + 3vw, 3rem); /* 36-48px */
|
||||
|
||||
/* Layout */
|
||||
--t-layout-max-width: 1400px;
|
||||
@ -179,3 +179,61 @@
|
||||
color: var(--t-text-primary);
|
||||
border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TYPOGRAPHY - Line Heights & Letter Spacing
|
||||
Research-backed values for optimal readability
|
||||
======================================== */
|
||||
|
||||
/* Body text line-height - WCAG 1.5 minimum */
|
||||
.shop-container {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Heading line-heights - tighter for large text (inverse relationship) */
|
||||
.shop-container h1 {
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.shop-container h2 {
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.shop-container h3 {
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.shop-container h4,
|
||||
.shop-container h5,
|
||||
.shop-container h6 {
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Small text - slightly wider tracking for readability */
|
||||
.shop-container .text-xs,
|
||||
.shop-container .text-sm,
|
||||
.shop-container .t-caption,
|
||||
.shop-container .t-small {
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TYPOGRAPHY - Measure (Line Length)
|
||||
Optimal readability: 45-75 characters
|
||||
======================================== */
|
||||
|
||||
/* Prose content - ideal 65ch for comfortable reading */
|
||||
.shop-container .prose,
|
||||
.shop-container .product-description,
|
||||
.shop-container .about-content {
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
/* Slightly wider for collection/category descriptions */
|
||||
.shop-container .collection-description {
|
||||
max-width: 75ch;
|
||||
}
|
||||
|
||||
@ -103,14 +103,14 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
}
|
||||
|
||||
@descriptions %{
|
||||
gallery: "Elegant & editorial",
|
||||
studio: "Clean & professional",
|
||||
boutique: "Warm & sophisticated",
|
||||
bold: "High contrast, strong",
|
||||
playful: "Fun & approachable",
|
||||
minimal: "Light & airy",
|
||||
night: "Dark & dramatic",
|
||||
classic: "Traditional & refined"
|
||||
gallery: "Editorial serif headlines",
|
||||
studio: "Clean modern sans-serif",
|
||||
boutique: "Elegant classic serif",
|
||||
bold: "Tech-forward geometric",
|
||||
playful: "Quirky variable font",
|
||||
minimal: "Light refined pairing",
|
||||
night: "Dark tech aesthetic",
|
||||
classic: "Traditional luxury serif"
|
||||
}
|
||||
|
||||
# Core keys used to match presets (excludes branding-specific settings)
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Nunito:wght@400;600;700&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600&family=Outfit:wght@300;400;500;600&family=Source+Sans+3:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:opsz,wght@9..40,400..700&family=Fraunces:opsz,wght@9..144,400..700&family=Inter:wght@300..700&family=Manrope:wght@400..700&family=Outfit:wght@300..600&family=Playfair+Display:wght@400;500;700&family=Raleway:wght@300;400;500&family=Source+Serif+4:wght@400;600&family=Space+Grotesk:wght@400..600&family=Work+Sans:wght@300..600&display=swap" rel="stylesheet">
|
||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
|
||||
</script>
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user