wow-design-wiki/typography/font-pairing.md

---
name: typography/font-pairing
title: 57 Font Pairs
description: 57 Google Fonts font pairing sets with CSS imports, Tailwind configs, and use cases.
tags: [typography, font, pairing, hierarchy, readability]
source: ui-ux-pro-max-skill
---

# Font Pairing Rules

57 пар шрифтов, оптимизированных для Google Fonts. Каждая пара включает CSS import, Tailwind config и рекомендацию по применению.

---

## 1–20: General Purpose

### 1. Classic Elegant (Serif + Sans)

**Назначение:** Люксовые бренды, мода, бьюти, премиум e-commerce

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
```

```js
fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }
```

### 2. Modern Professional (Sans + Sans)

**Назначение:** SaaS, корпоративные сайты, бизнес-приложения

```css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
```

```js
fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }
```

### 3. Tech Startup (Sans + Sans)

**Назначение:** Tech компании, стартапы, SaaS, AI продукты

```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
```

```js
fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }
```

### 4. Editorial Classic (Serif + Serif)

**Назначение:** Публикации, блоги, новости, литературные журналы

```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
```

```js
fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }
```

### 5. Minimal Swiss (Single Font)

**Назначение:** Дашборды, админ-панели, документация, дизайн-системы

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { sans: ['Inter', 'sans-serif'] }
```

### 6. Playful Creative (Display + Sans)

**Назначение:** Дети, образование, игры, творческие инструменты

```css
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }
```

### 7. Bold Statement (Display + Sans)

**Назначение:** Маркетинг, портфолио, агентства, спортивные сайты

```css
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }
```

### 8. Wellness Calm (Serif + Sans)

**Назначение:** Здоровье, спа, медитация, йога, органические бренды

```css
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }
```

### 9. Developer Mono (Mono + Sans)

**Назначение:** Dev tools, документация, CLI приложения, tech-блоги

```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
```

```js
fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }
```

### 10. Retro Vintage (Display + Serif)

**Назначение:** Винтажные бренды, пабы, рестораны, креативные портфолио

```css
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');
```

```js
fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }
```

### 11. Geometric Modern (Sans + Sans)

**Назначение:** General purpose, портфолио, агентства, лендинги

```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }
```

### 12. Luxury Serif (Serif + Sans)

**Назначение:** Мода, люкс e-commerce, ювелирные бренды, премиум услуги

```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }
```

### 13. Friendly SaaS (Single Font)

**Назначение:** SaaS продукты, веб-приложения, дашборды, B2B

```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }
```

### 14. News Editorial (Serif + Sans)

**Назначение:** Новостные сайты, блоги, журналистика, контентные сайты

```css
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
```

```js
fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }
```

### 15. Handwritten Charm (Script + Sans)

**Назначение:** Персональные блоги, приглашения, лайфстайл бренды

```css
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }
```

### 16. Corporate Trust (Sans + Sans)

**Назначение:** Enterprise, government, healthcare, finance, accessibility

```css
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
```

```js
fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }
```

### 17. Brutalist Raw (Mono + Mono)

**Назначение:** Brutalist дизайн, dev портфолио, экспериментальный код

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
```

```js
fontFamily: { mono: ['Space Mono', 'monospace'] }
```

### 18. Fashion Forward (Sans + Sans)

**Назначение:** Модные бренды, креативные агентства, арт-галереи

```css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');
```

```js
fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }
```

### 19. Soft Rounded (Sans + Sans)

**Назначение:** Детские товары, pet-приложения, soft UI, wellness

```css
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');
```

```js
fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }
```

### 20. Premium Sans (Single Font)

**Назначение:** Премиум бренды, modern agencies, стартапы

```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
```

```js
fontFamily: { sans: ['DM Sans', 'sans-serif'] }
```

---

## 21–40: Regional & Multilingual

### 21. Vietnamese Friendly

```css
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }
```

### 22. Japanese Elegant

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
```
```js
fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }
```

### 23. Korean Modern

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }
```

### 24. Chinese Traditional

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');
```
```js
fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }
```

### 25. Chinese Simplified

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }
```

### 26. Arabic Elegant

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }
```

### 27. Thai Modern

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }
```

### 28. Hebrew Modern

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }
```

---

## 41–57: Niche & Specialized

### 29. Legal Professional

**Назначение:** Юридические фирмы, официальные документы, government

```css
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');
```
```js
fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }
```

### 30. Medical Clean

**Назначение:** Healthcare, медицинские клиники, фармацевтика

```css
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }
```

### 31. Financial Trust (Single Font)

**Назначение:** Банки, финансы, страхование, investment, fintech

```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }
```

### 32. Real Estate Luxury

**Назначение:** Недвижимость, luxury properties, архитектура

```css
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }
```

### 33. Restaurant Menu

**Назначение:** Рестораны, кафе, food-блоги, кулинария

```css
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');
```
```js
fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }
```

### 34. Art Deco

**Назначение:** Art Deco темы, luxury отели, классические мероприятия

```css
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');
```
```js
fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }
```

### 35. Magazine Style

**Назначение:** Журналы, онлайн-публикации, editorial контент

```css
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }
```

### 36. Crypto/Web3

**Назначение:** Крипто платформы, NFT, блокчейн, futuristic tech

```css
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');
```
```js
fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }
```

### 37. Gaming Bold

**Назначение:** Гейминг, esports, action games, competitive sports

```css
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');
```
```js
fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }
```

### 38. Indie/Craft

**Назначение:** Indie бренды, крафт, handmade, artisan

```css
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');
```
```js
fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }
```

### 39. Startup Bold

**Назначение:** Стартапы, pitch decks, product launches, bold бренды

```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }
```

### 40. E-commerce Clean

**Назначение:** E-commerce, онлайн-магазины, product pages, retail

```css
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }
```

### 41. Academic/Research

**Назначение:** Университеты, научные статьи, образование

```css
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');
```
```js
fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }
```

### 42. Dashboard Data

**Назначение:** Дашборды, аналитика, data visualization, admin panels

```css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] }
```

### 43. Music/Entertainment

**Назначение:** Музыкальные платформы, развлечения, фестивали

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');
```
```js
fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }
```

### 44. Minimalist Portfolio

**Назначение:** Дизайнерские портфолио, креативные профессионалы

```css
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }
```

### 45. Kids/Education

**Назначение:** Детские приложения, образовательные игры

```css
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');
```
```js
fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }
```

### 46. Wedding/Romance

**Назначение:** Свадебные сайты, приглашения, romantic бренды

```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');
```
```js
fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }
```

### 47. Science/Tech

**Назначение:** Science, research, tech documentation, data-heavy

```css
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');
```
```js
fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }
```

### 48. Accessibility First (Single Font)

**Назначение:** Accessibility-critical, government, healthcare, inclusive design

```css
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
```
```js
fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }
```

### 49. Sports/Fitness

**Назначение:** Спорт, фитнес, athletic бренды

```css
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }
```

### 50. Luxury Minimalist

**Назначение:** Luxury minimalist бренды, high-end fashion

```css
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');
```
```js
fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }
```

### 51. Tech/HUD Mono (Mono + Mono)

**Назначение:** Sci-fi interfaces, developer tools, cybersecurity

```css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');
```
```js
fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }
```

### 52. Pixel Retro

**Назначение:** Pixel art игры, retro сайты, 8-bit

```css
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
```
```js
fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }
```

### 53. Neubrutalist Bold

**Назначение:** Neubrutalist дизайн, Gen Z бренды, bold marketing

```css
@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');
```
```js
fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }
```

### 54. Academic/Archival

**Назначение:** Университеты, архивы, research papers, история

```css
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');
```
```js
fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }
```

### 55. Spatial Clear (Single Font)

**Назначение:** Spatial computing, AR/VR, glassmorphism

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
```
```js
fontFamily: { sans: ['Inter', 'sans-serif'] }
```

### 56. Kinetic Motion

**Назначение:** Музыкальные фестивали, automotive, high-energy бренды

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');
```
```js
fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }
```

### 57. Gen Z Brutal

**Назначение:** Gen Z marketing, streetwear, viral campaigns

```css
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');
```
```js
fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] }
```

---

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| 3+ шрифта | 2 шрифта максимум |
| Serif + Serif | Serif + Sans-serif |
| Similar weights | Contrasting weights (900 + 400) |
| body < 16px | body ≥ 16px |
| line-height 1.2 | line-height 1.6+ |
| Matching categories | Contrasting categories |
| 300+ weights | 4–6 weights total |
| Custom web font only | Include system fallback |

## Quick Reference by Category

| Category | Pairs | Top Recommendation |
|----------|-------|-------------------|
| **SaaS / B2B** | 3, 13, 16 | Space Grotesk + DM Sans |
| **Luxury / Fashion** | 1, 12, 50 | Playfair Display + Inter |
| **Tech / Dev** | 9, 36, 51 | JetBrains Mono + Exo 2 |
| **Creative** | 6, 18, 37 | Fredoka + Nunito |
| **Editorial** | 4, 14, 35 | Cormorant Garamond + Libre Baskerville |
| **Enterprise** | 2, 31 | Open Sans + Poppins |
| **Kids** | 6, 45 | Fredoka + Nunito |
| **Regional** | 21–28 | Noto family variants |
| **Accessible** | 48 | Atkinson Hyperlegible only |
| **Gaming** | 37, 52 | Russo One + Chakra Petch |