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

name, title, description, tags, source

name	title	description	tags	source
typography/font-pairing	57 Font Pairs	57 Google Fonts font pairing sets with CSS imports, Tailwind configs, and use cases.	typography font pairing hierarchy readability	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

@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');

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

2. Modern Professional (Sans + Sans)

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

@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');

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

3. Tech Startup (Sans + Sans)

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

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

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

4. Editorial Classic (Serif + Serif)

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

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

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

5. Minimal Swiss (Single Font)

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

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

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

6. Playful Creative (Display + Sans)

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

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

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

7. Bold Statement (Display + Sans)

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

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

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

8. Wellness Calm (Serif + Sans)

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

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

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

9. Developer Mono (Mono + Sans)

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

@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');

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

10. Retro Vintage (Display + Serif)

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

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

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

11. Geometric Modern (Sans + Sans)

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

@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');

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

12. Luxury Serif (Serif + Sans)

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

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

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

13. Friendly SaaS (Single Font)

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

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

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

14. News Editorial (Serif + Sans)

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

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

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

15. Handwritten Charm (Script + Sans)

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

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

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

16. Corporate Trust (Sans + Sans)

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

@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');

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

17. Brutalist Raw (Mono + Mono)

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

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

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

18. Fashion Forward (Sans + Sans)

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

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

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

19. Soft Rounded (Sans + Sans)

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

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

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

20. Premium Sans (Single Font)

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

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

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

---

21–40: Regional & Multilingual

21. Vietnamese Friendly

@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');

fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }

22. Japanese Elegant

@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');

fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }

23. Korean Modern

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

fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }

24. Chinese Traditional

@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');

fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }

25. Chinese Simplified

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

fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }

26. Arabic Elegant

@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');

fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }

27. Thai Modern

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

fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }

28. Hebrew Modern

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

fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }

---

41–57: Niche & Specialized

29. Legal Professional

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

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }

30. Medical Clean

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

@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');

fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }

31. Financial Trust (Single Font)

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

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

fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }

32. Real Estate Luxury

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

@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');

fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }

33. Restaurant Menu

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

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

fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }

34. Art Deco

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

@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');

fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }

35. Magazine Style

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

@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');

fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }

36. Crypto/Web3

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

@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');

fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }

37. Gaming Bold

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

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');

fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }

38. Indie/Craft

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

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');

fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }

39. Startup Bold

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

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

fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }

40. E-commerce Clean

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

@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');

fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }

41. Academic/Research

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

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');

fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }

42. Dashboard Data

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

@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');

fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] }

43. Music/Entertainment

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

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

fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }

44. Minimalist Portfolio

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

@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');

fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }

45. Kids/Education

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

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');

fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }

46. Wedding/Romance

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

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

fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }

47. Science/Tech

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

@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');

fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }

48. Accessibility First (Single Font)

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

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

fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }

49. Sports/Fitness

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

@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');

fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }

50. Luxury Minimalist

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

@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');

fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }

51. Tech/HUD Mono (Mono + Mono)

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

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }

52. Pixel Retro

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

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }

53. Neubrutalist Bold

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

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');

fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }

54. Academic/Archival

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

@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');

fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }

55. Spatial Clear (Single Font)

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

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

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

56. Kinetic Motion

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

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

fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }

57. Gen Z Brutal

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

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

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