simpleshop_theme/docs/research/typography.md

# Professional typography systems for Tailwind e-commerce themes

A well-designed typography system using modular scales, vertical rhythm, and constrained customization can transform an e-commerce shop from generic to polished. The key insight: **typography accounts for 95% of web design**, yet most theme builders expose the wrong controls—offering granular font size pickers when users actually need curated presets with automatic scaling. The most successful approach combines a **Major Third (1.25) type scale**, **8px baseline grid**, and **2-3 carefully paired Google Fonts** with preset-based theme customization that prevents design chaos while enabling brand expression.

This report covers the complete technical foundation: mathematical type scales with CSS implementations, curated Google Font pairings across seven style categories, production-ready Tailwind configurations, DaisyUI integration patterns, and research-backed guidelines for building theme editors that balance freedom with quality outcomes.

---

## Type scales create mathematical harmony across all text sizes

Modular type scales use consistent mathematical ratios to generate font sizes, ensuring visual harmony without arbitrary decisions. Starting with a **16px base** (browser default), each size step multiplies by the chosen ratio.

| Ratio | Name | Best use case |
|-------|------|--------------|
| 1.125 | Major Second | Dense UIs, dashboards, documentation |
| **1.25** | **Major Third** | **Recommended default for e-commerce** |
| 1.333 | Perfect Fourth | Editorial, content-heavy sites |
| 1.414 | Augmented Fourth | Landing pages, marketing |
| 1.5 | Perfect Fifth | High-contrast headlines |
| 1.618 | Golden Ratio | Luxury brands, creative projects |

The **Major Third (1.25)** strikes the ideal balance for e-commerce: sufficient hierarchy without oversized mobile headings. A full scale at this ratio: 12.8px → 16px → 20px → 25px → 31.25px → 39px → 48.8px.

**Implementation principle**: Use larger ratios (1.333–1.5) on desktop and smaller ratios (1.125–1.25) on mobile. Fluid typography with `clamp()` handles this automatically:

```css
--fs-heading: clamp(1.5rem, 1rem + 2vw, 2.5rem);
```

---

## Vertical rhythm and baseline grids enforce consistent spacing

The **8-point grid system** (used by Material Design, iOS, and most design systems) creates visual consistency by constraining all spacing to multiples of 8px. Typography integrates with this grid through line-height alignment.

**Why 8px works**: Most screen sizes divide evenly by 8, scaling cleanly to @1x, @2x, and @3x resolutions. It reduces decision-making to a finite set of options: 8, 16, 24, 32, 40, 48px.

**Typography integration**: Base font of 16px with line-height 1.5 yields **24px line-height** (3 × 8), keeping text on the baseline grid. All margins and padding use 8px increments.

```css
:root {
  --rhythm: 0.5rem; /* 8px */
  --line-height-body: 1.5rem; /* 24px = 3 × rhythm */
}

body { font-size: 1rem; line-height: 1.5; }
p { margin-bottom: 1rem; } /* 16px = 2 × rhythm */
h2 { margin-bottom: 1.5rem; } /* 24px = 3 × rhythm */
```

**Practical approach**: Accept line-height-based rhythm rather than true baseline alignment—CSS centers text vertically within line-height, making pixel-perfect baseline grids impractical without complex padding offsets.

---

## Line-height, measure, and letter-spacing have precise optimal values

These three parameters have research-backed optimal ranges that should rarely need customization in a theme editor.

**Line-height follows an inverse relationship with font size**—larger text needs tighter leading:

| Context | Line-height | Example at 16px base |
|---------|-------------|---------------------|
| Large headings (32px+) | 1.1–1.2 | 35–38px |
| Subheadings (20–28px) | 1.2–1.3 | 24–36px |
| **Body text** | **1.5–1.6** | **24–26px** |
| Small text (<14px) | 1.4–1.5 | 20–21px |

WCAG accessibility requires **minimum 1.5 line-height** for body text. Always use unitless values (`line-height: 1.5`) so they scale proportionally.

**Measure (line length)** should stay within **45–75 characters** for optimal readability, with 66 being ideal. Implementation:

```css
.prose { max-width: 65ch; }
/* Or responsive: */
.content { width: clamp(45ch, 90%, 75ch); }
```

**Letter-spacing guidelines**:
- **Body text**: Leave default (font is optimized)
- **ALL CAPS**: Add 5–12% spacing (`letter-spacing: 0.08em`)
- **Large headings (32px+)**: Tighten slightly (`letter-spacing: -0.02em`)
- **Small text (<14px)**: Widen slightly (`letter-spacing: 0.02em`)

---

## Curated Google Font pairings for seven e-commerce styles

Each pairing includes heading and body fonts with specific weights to load. These combinations feel distinctive while maintaining professional readability.

### Minimal and modern (tech, sustainable goods, contemporary homeware)

**Manrope (500, 600) + Inter (400, 500)** — Geometric precision meets exceptional screen readability. Both feature clean lines without quirks.

**Plus Jakarta Sans (500, 600) + Literata (400, 400i)** — Newer, distinctive sans-serif with variable font support paired with a screen-optimized serif. Fresh but professional.

**DM Sans (500, 700) + Source Serif Pro (400, 400i)** — Low-contrast geometric sans contrasts elegantly with refined serif. Ideal for design tools, premium stationery.

### Warm and artisan (handmade goods, craft products, specialty food)

**Cormorant Garamond (500, 600) + Proza Libre (400, 400i)** — Lavish Garamond revival with strong calligraphic feel pairs with humanist sans optimized for screens. Perfect for artisan ceramics, specialty coffee.

**Calistoga (400) + IBM Plex Sans (400, 500)** — Rounded serifs with friendly sophistication. Excellent for bakeries, organic goods, candle shops.

**Josefin Sans Light (300, 400) + Crimson Text (400, 400i, 600)** — Thin letterforms create an airy feel; classic serif adds professional warmth. Suits makeup, jewelry, wellness.

### Bold and editorial (fashion, lifestyle brands)

**Playfair Display (500, 700) + Raleway Light (300, 400)** — High-contrast delicate hairlines of Playfair with thin Raleway strokes. Classic fashion magazine aesthetic.

**Instrument Serif + Instrument Sans (400, 500)** — Same-designer family creates cohesive editorial look with perfect built-in contrast. Art-forward brands, creative agencies.

**DM Serif Display (400) + Poppins (300, 400)** — Beautiful calligraphic strokes with thin modern geometric sans. Fashion accessories, beauty products.

### Playful and quirky (creative products, novelty gifts)

**Fraunces (variable, 400–900) + Work Sans (400, 500)** — Four axes including "wonk" create vintage-inspired whimsy while maintaining professionalism. Variable font with softness, weight, and optical size controls.

**Syne Bold (700) + Syne Regular (400)** — Footprint expands as weight increases for quirky but readable stand-out headlines. Music merchandise, creative agencies.

**Dynapuff (variable) + Nunito (400, 600)** — Bold, playful, round font with soft rounded sans. Children's products, candy shops.

### Luxury and elegant (high-end goods, premium products)

**Cinzel (400, 500) + Fauna One (400)** — High-contrast Roman inscription inspiration conveys timeless authority. Fine jewelry, luxury watches.

**Cormorant Garamond (400, 500) + Montserrat Light (300, 400)** — Elegant Garamond with clean urban sans creates sophisticated contrast. High-end cosmetics, luxury home decor.

**Prata (400) + Manrope Light (300, 400)** — Contrasting thick/thin strokes convey elegance; light Manrope maintains delicacy. Premium skincare, designer accessories.

### Vintage and retro (heritage brands, nostalgic products)

**Libre Franklin (500, 600) + Libre Baskerville (400, 400i)** — American Gothic + Transitional pairing used for 100+ years. Evokes established, traditional authenticity.

**Oswald (500, 600) + EB Garamond (400, 400i)** — Bold condensed sans (Franklin Gothic–inspired) with elegant Garamond. Vintage clothing, retro posters.

**Rokkitt (400, 700) + Raleway (400, 500)** — Geometric slab serif (Egyptian style) with elegant sans. Heritage stationery, letterpress products.

### Tech and futuristic (sci-fi prints, gadget accessories)

**Space Grotesk (500, 700) + IBM Plex Mono (400, 500)** — Distinctive geometric sans with monospace body creates coding/tech aesthetic.

---

## Variable fonts offer performance and flexibility advantages

Variable fonts contain multiple styles in a single file, reducing HTTP requests and enabling precise weight control (e.g., font-weight: 450).

| Font | Weight range | Other axes | Best for |
|------|-------------|-----------|----------|
| **Inter** | 100–900 | Optical size 14–32 | All-purpose workhorse |
| **Roboto Flex** | 100–1000 | Width, grade, optical size | Maximum flexibility |
| **Fraunces** | 100–900 | Soft, wonk, optical size | Playful brands |
| **Outfit** | 100–900 | — | Modern headlines |
| **DM Sans** | 100–1000 | Optical size 9–40 | Clean interfaces |

**Request syntax** for Google Fonts variable fonts:
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap">
```

---

## Font loading strategies that protect performance

**Recommended approach**: Use `font-display: swap` for headings (fastest text visibility) and `font-display: optional` for body text (prevents layout shifts if font fails to load).

**Self-hosting now outperforms Google Fonts CDN** due to Chrome and Safari's cache partitioning (since 2020)—cross-site caching no longer works. Self-hosting reported PageSpeed improvements of 66 → 94 on mobile scores.

**Performance checklist**:
- Load only weights actually used (e.g., 400, 600 instead of full range)
- Preconnect to font origins: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
- Use WOFF2 format only (30% smaller than WOFF)
- Limit to 2–3 font families maximum
- Preload critical above-fold fonts:
```html
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
```

---

## Tailwind configuration for production typography systems

Tailwind's fontSize config supports a tuple syntax for complete typographic definitions:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      'xs': ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.025em' }],
      'sm': ['0.875rem', { lineHeight: '1.25rem' }],
      'base': ['1rem', { lineHeight: '1.5rem' }],
      'lg': ['1.125rem', { lineHeight: '1.75rem' }],
      'xl': ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.01em' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.02em' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.02em' }],
    },
    spacing: {
      // 8px baseline grid
      '1': '0.5rem',   // 8px
      '2': '1rem',     // 16px
      '3': '1.5rem',   // 24px
      '4': '2rem',     // 32px
      '6': '3rem',     // 48px
    },
    fontFamily: {
      sans: ['Inter', 'ui-sans-serif', 'system-ui'],
      display: ['Playfair Display', 'ui-serif', 'Georgia'],
    },
  },
}
```

**Fluid typography in Tailwind** uses arbitrary values or custom config:

```html
<h1 class="text-[clamp(1.75rem,3vw,3rem)]">Fluid headline</h1>
```

Or extend the config:
```javascript
fontSize: {
  'fluid-xl': 'clamp(1.5rem, 1rem + 2vw, 2.5rem)',
  'fluid-display': 'clamp(2.5rem, 1.5rem + 4vw, 5rem)',
}
```

**@tailwindcss/typography plugin** handles prose content with sensible defaults:

```html
<article class="prose prose-lg dark:prose-invert prose-headings:font-display">
  {{ markdown }}
</article>
```

Override defaults in config:
```javascript
typography: {
  DEFAULT: {
    css: {
      maxWidth: '65ch',
      'h1, h2, h3': { fontFamily: 'var(--font-display)' },
      a: { color: '#3182ce', '&:hover': { color: '#2c5282' } },
    },
  },
},
```

---

## DaisyUI themes control colors while typography stays at Tailwind level

**Critical distinction**: DaisyUI themes only control colors, border-radius, and effects—not typography. Font families, sizes, and spacing are configured in Tailwind, applying consistently across all DaisyUI themes.

```css
/* DaisyUI plugin configuration */
@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

/* Typography at Tailwind level (applies to all themes) */
@theme {
  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}
```

**Semantic color usage for text**: DaisyUI provides `base-content` for default text, `primary-content` for text on primary backgrounds, etc. Components auto-apply correct text colors (`btn-primary` uses `primary-content`).

**Overriding component typography**:
```css
@layer components {
  .btn {
    text-transform: none; /* Remove default uppercase */
    font-weight: 500;
    letter-spacing: 0.01em;
  }
}
```

---

## Theme editors should offer presets, not granular controls

Research across Shopify, Squarespace, and Webflow reveals a clear pattern: the most successful theme systems use **constrained customization** that prevents design chaos.

### Parameters to make user-configurable

| Setting | Implementation | Why expose |
|---------|---------------|-----------|
| **Font pairing preset** | 5–10 curated combinations | Enables brand expression without typography expertise |
| **Heading font family** | Dropdown of paired fonts | Primary brand identity signal |
| **Body font family** | Dropdown of paired fonts | Readability preference |
| **Font size scale** | Slider 90%–120% | Accessibility accommodation |
| **Accent colors** | Color picker with presets | Brand customization |

### Parameters to lock down (prevent user adjustment)

| Setting | Locked value | Why restrict |
|---------|-------------|-------------|
| **Line-height ratios** | 1.5 body, 1.2 headings | Users break readability |
| **Letter-spacing** | Preset per size | Technical, easy to ruin |
| **Measure/line length** | 45–75ch | Readability science |
| **Type scale ratio** | 1.25 | Mathematical harmony |
| **Mobile scaling** | Automatic | Complex responsive logic |

### The Shopify model (maximum constraints)

Shopify exposes only **two font categories** (headings and body), a **single size slider** (100–150%), and no line-height or letter-spacing controls. Users select from a curated library of ~1,000 fonts. Result: hard to break, accessible to non-designers.

### The Squarespace model (balanced approach)

Squarespace offers **60+ Font Packs**—professionally curated heading/body pairs that guarantee aesthetic coherence. Users can also access individual controls (family, weight, size, line-height, letter-spacing) but the preset system handles most needs.

### Recommended implementation for e-commerce themes

1. **Offer 5–10 curated font pairing presets** covering different brand aesthetics
2. **Allow 2 font category overrides** (heading + body) from a filtered quality list
3. **Use range sliders with sensible limits** (size 90–120%, never expose line-height)
4. **Provide real-time preview** before saving changes
5. **Include accessibility validation** (contrast ratio warnings)
6. **Group elements semantically** (all headings share one setting)

---

## E-commerce typography patterns that increase conversions

Research from Baymard Institute (200,000+ hours of UX testing) reveals specific typography patterns that improve shopping experiences.

### Product page hierarchy

- **Product title**: Largest text (20–28px), semi-bold to bold (600–700), first in visual hierarchy
- **Price**: High prominence near Add to Cart, **4.5:1 minimum contrast**, consider showing price-per-unit (**74% of sites miss this**)
- **CTA buttons**: Clean sans-serif, 14–16px, action verbs ("Add to Cart" outperforms "Submit")
- **Body descriptions**: 16–18px, 1.5 line-height, structured with subheadings (**78% of sites don't use highlights format**)

### Trust signals through typography

Monotype/Neurons research found serif fonts increase **perceived quality by 13%** and **reliability by 9%**. For premium positioning:
- Use serif fonts for headlines (Playfair Display, Cormorant Garamond)
- Generous white space around text elements
- Restrained design—avoid decorative excess
- Limit to 2–3 fonts maximum (**4+ creates "cheap" perception**)

### Mobile e-commerce requirements

- **Touch targets**: 44×44px minimum for text links (WCAG AAA), 8px minimum spacing between targets
- **Body text**: 16px minimum (prevents iOS input zoom)
- **Avoid horizontal tabs on mobile**—27% of users overlook them entirely
- Position price and CTA in natural thumb zone (bottom 2/3 of screen)

### Scanning patterns inform layout

**F-pattern** (product pages with descriptions): Users scan horizontally across top, then shorter horizontal line below, then vertically down left side. Place critical information (product name, price, CTAs) along these paths.

**Z-pattern** (landing pages, minimal text): Top left → top right → diagonal to bottom left → bottom right. Position logo top-left, navigation top-right, primary CTA bottom-right.

---

## Conclusion: A complete typography system for Tailwind e-commerce themes

The optimal system combines:

1. **Major Third (1.25) type scale** as the default, with automatic mobile scaling using `clamp()`
2. **8px baseline grid** for all spacing, with line-heights aligned to 24px (1.5rem) for body text
3. **2–3 Google Fonts** loaded as variable fonts with `font-display: swap`, self-hosted for performance
4. **Tailwind configuration** with fontSize tuples including line-height and letter-spacing
5. **DaisyUI for color theming** while typography remains at Tailwind level
6. **Preset-based theme customization** offering curated font pairings rather than granular controls

The research consensus is clear: typography parameters like line-height (1.5 body, 1.2 headings), measure (65ch), and letter-spacing should be **locked to optimal values**. User customization should focus on font pairing presets and size scaling within safe ranges—enabling brand expression without the risk of breaking readability or professional appearance.

For print-on-demand shops specifically, the **Minimal/Modern** (Manrope + Inter) and **Playful/Quirky** (Fraunces + Work Sans) pairings offer the most versatility across product categories, while **Warm/Artisan** (Cormorant Garamond + Proza Libre) suits handmade goods and **Bold/Editorial** (Playfair Display + Raleway) elevates fashion-forward brands.