Get expert typography pairing recommendations with use cases and rationale

# Typography Pairing Recommendations ## Project: Editorial Magazine Website — Sophisticated yet Approachable --- ## Pairing 1: The Safe Classic ### Playfair Display + Source Sans 3 **Why it works:** This is the tried-and-true editorial pairing. Playfair Display is a transitional serif with high stroke contrast — those thick-thin variations immediately signal "quality publication." Source Sans 3 (Adobe's first open-source family) provides clean, neutral body text that never competes with the headline. The contrast principle here is **style contrast** (serif vs. sans) combined with **weight contrast** (Playfair's dramatic thicks vs. Source Sans's even stroke width). **Type Scale:** - Display (hero headlines): Playfair Display 700, 48px / 1.1 line-height - H1: Playfair Display 700, 36px / 1.2 - H2: Playfair Display 600, 28px / 1.25 - H3: Source Sans 3 600, 20px / 1.3 - Body: Source Sans 3 400, 16px / 1.65 - Caption: Source Sans 3 400, 13px / 1.5 - Overline: Source Sans 3 600, 11px / 1.4, letter-spacing 0.08em, uppercase **Source:** Both on Google Fonts (free). Playfair Display also available as Playfair Display SC for small caps. **Accessibility:** Source Sans 3 has an excellent x-height (tall lowercase letters relative to caps), making it highly legible at 14px and below. Playfair Display's thin strokes can become hard to read below 18px on low-DPI screens — never use it for body text. The 1.65 line-height for body text exceeds the WCAG recommendation of 1.5, giving comfortable reading for long articles. **Fallback stacks:** - Heading: `'Playfair Display', 'Georgia', 'Times New Roman', serif` - Body: `'Source Sans 3', 'Segoe UI', 'Helvetica Neue', sans-serif` --- ## Pairing 2: The Modern Editorial ### Fraunces + Inter **Why it works:** Fraunces is a "soft serif" — an optical-size variable font with a wonky, humanist character that feels contemporary without being trendy. Its "WONK" and "SOFT" axes let you dial the personality up or down. Paired with Inter (designed specifically for screens), you get a system that feels editorial but unmistakably digital. The contrast principle is **character contrast** — Fraunces's organic, slightly irregular forms against Inter's geometric precision. **Type Scale:** - Display: Fraunces 800, optical size 48, 48px / 1.08 - H1: Fraunces 700, 36px / 1.15 - H2: Fraunces 600, 26px / 1.2 - H3: Inter 600, 19px / 1.3 - Body: Inter 400, 15px / 1.7 - Caption: Inter 400, 12.5px / 1.5 - Overline: Inter 500, 11px / 1.4, letter-spacing 0.06em **Source:** Both on Google Fonts. Fraunces is a variable font with 4 axes (weight, optical size, WONK, SOFT). Inter is variable with weight axis. **Accessibility:** Inter was literally designed for screen legibility — it has a tall x-height, open apertures, and distinguishable letterforms (capital I vs lowercase l vs numeral 1 are all distinct). Fraunces at optical size 48+ has sufficient stroke contrast for readability; avoid using it below 20px. For users with dyslexia, Inter's open letterforms and generous counters make it one of the best sans-serif choices. **Fallback stacks:** - Heading: `'Fraunces', 'Georgia', 'Palatino', serif` - Body: `'Inter', 'SF Pro Text', 'Segoe UI', sans-serif` --- ## Pairing 3: The Refined Rebel ### Clash Display + Satoshi **Why it works:** Both from Indian Type Foundry's Fontshare platform. Clash Display is a geometric display sans with sharp terminals and strong character — it demands attention without shouting. Satoshi is a modern grotesque that shares Clash's geometric DNA but softens it for body text. The contrast principle here is **proportion contrast** — Clash's wide, display-optimized letterforms against Satoshi's compact, text-optimized proportions. Same family feeling, different jobs. **Type Scale:** - Display: Clash Display 600, 44px / 1.05, letter-spacing -0.02em - H1: Clash Display 600, 32px / 1.15, letter-spacing -0.015em - H2: Clash Display 500, 24px / 1.2 - H3: Satoshi 700, 18px / 1.3 - Body: Satoshi 400, 15px / 1.65 - Caption: Satoshi 400, 12.5px / 1.5 - Overline: Satoshi 500, 11px / 1.4, letter-spacing 0.1em **Source:** Fontshare (free for personal and commercial use). Not on Google Fonts. **Accessibility:** Satoshi has a moderate x-height — slightly lower than Inter, but its open counters and clear letterforms maintain good readability at 14px+. Clash Display's tight spacing requires negative letter-spacing at large sizes but should never be tracked tighter below 24px. Both fonts have distinct numeral designs that prevent confusion. **Fallback stacks:** - Heading: `'Clash Display', 'Arial Black', 'Helvetica Neue', sans-serif` - Body: `'Satoshi', 'Helvetica Neue', 'Arial', sans-serif` --- ## Pairing 4: The Adventurous Pick ### Editorial New + General Sans **Why it works:** Editorial New is a high-contrast didone serif with dramatic hairline strokes and ball terminals — it's pure fashion-magazine energy. General Sans is a geometric sans-serif with just enough humanist warmth to prevent the pairing from feeling cold. The contrast principle is **intensity contrast** — Editorial New is maximally dramatic (almost decorative), while General Sans is maximally restrained. This tension creates visual electricity that keeps readers engaged. **Type Scale:** - Display: Editorial New 400 Italic, 56px / 1.0 - H1: Editorial New 400, 40px / 1.1 - H2: Editorial New 300, 30px / 1.2 - H3: General Sans 500, 18px / 1.3 - Body: General Sans 400, 15px / 1.7 - Caption: General Sans 400, 13px / 1.5 - Overline: General Sans 500, 10.5px / 1.5, letter-spacing 0.12em **Source:** Both on Fontshare (free). **Accessibility Warning:** Editorial New's hairline strokes can disappear on low-DPI screens and become nearly invisible for users with low vision. Never use below 28px, and consider bumping to 500 weight on screens below 150 DPI. General Sans maintains good legibility throughout the scale. This pairing is stunning but requires the most careful implementation for accessibility. **Fallback stacks:** - Heading: `'Editorial New', 'Didot', 'Bodoni MT', serif` - Body: `'General Sans', 'Helvetica Neue', 'Arial', sans-serif` --- ## Comparison Table | Criteria | Playfair + Source Sans | Fraunces + Inter | Clash + Satoshi | Editorial New + General Sans | |---|---|---|---|---| | Personality | Classic editorial | Modern editorial | Tech-forward | High fashion | | Risk level | Safe | Low-medium | Medium | High | | Accessibility | Excellent | Excellent | Good | Moderate | | Variable font | No | Yes (both) | No | No | | Source | Google Fonts | Google Fonts | Fontshare | Fontshare | | Best for | News, longform | Product blogs, SaaS | Portfolios, startups | Fashion, art, luxury | | Mobile readability | 9/10 | 10/10 | 8/10 | 6/10 | | Brand distinctiveness | 5/10 | 7/10 | 8/10 | 10/10 | **My recommendation for your editorial magazine website:** Start with **Pairing 2 (Fraunces + Inter)** — it's the sweet spot between distinctive and practical, with the variable font axes giving you creative flexibility while Inter ensures bulletproof readability across all devices.