diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css
index 0982ed6..3839e0e 100644
--- a/assets/css/theme-layer2-attributes.css
+++ b/assets/css/theme-layer2-attributes.css
@@ -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;
}
diff --git a/assets/css/theme-primitives.css b/assets/css/theme-primitives.css
index 4de27dd..0b4b618 100644
--- a/assets/css/theme-primitives.css
+++ b/assets/css/theme-primitives.css
@@ -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;
diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index 5547558..63f6d8e 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -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;
+}
diff --git a/lib/simpleshop_theme/theme/presets.ex b/lib/simpleshop_theme/theme/presets.ex
index 8e396de..e8e77bf 100644
--- a/lib/simpleshop_theme/theme/presets.ex
+++ b/lib/simpleshop_theme/theme/presets.ex
@@ -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)
diff --git a/lib/simpleshop_theme_web/components/layouts/root.html.heex b/lib/simpleshop_theme_web/components/layouts/root.html.heex
index 6811c47..b3c5947 100644
--- a/lib/simpleshop_theme_web/components/layouts/root.html.heex
+++ b/lib/simpleshop_theme_web/components/layouts/root.html.heex
@@ -10,7 +10,7 @@
-
+