design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
neo committed
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,684 @@
|
||||
---
|
||||
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 |
|
||||
Reference in new issue
Block a user