Initial commit: 79+ design patterns, LLM prompts, and assets
This commit is contained in:
Neo committed
commit
2b42a76d6d
112 files changed
+13652
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 |
|
||||
@@ -0,0 +1,232 @@
|
||||
---
|
||||
name: typography/gradient-text-reveal
|
||||
title: Gradient Text & Text Reveal Effects
|
||||
description: Eye-catching gradient text, animated text reveals, and kinetic typography effects.
|
||||
tags: [typography, gradient, animation, reveal, kinetic]
|
||||
source: linear.app, stripe.com, raycast.com, brad.co
|
||||
---
|
||||
|
||||
# Gradient Text & Text Reveal
|
||||
|
||||
## Что это
|
||||
Текст с градиентными цветами и анимированные текстовые эффекты. Создаёт визуальный акцент и "wow" момент.
|
||||
|
||||
## Типы градиентного текста
|
||||
|
||||
### 1. Linear Style (subtle diagonal gradient)
|
||||
```css
|
||||
.gradient-text-linear {
|
||||
background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.6) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Stripe Style (colorful animated gradient)
|
||||
```css
|
||||
.gradient-text-stripe {
|
||||
background: linear-gradient(90deg, #ff6b35, #f7931e, #ffd700, #ff6b35);
|
||||
background-size: 300% 100%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Accent Color (single-color gradient)
|
||||
```css
|
||||
.gradient-text-accent {
|
||||
background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Brand Gradient (consistent with design system)
|
||||
```css
|
||||
:root {
|
||||
--gradient-brand: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
--gradient-brand-green: linear-gradient(135deg, #10b981, #34d399);
|
||||
--gradient-brand-orange: linear-gradient(135deg, #f59e0b, #ef4444);
|
||||
}
|
||||
```
|
||||
|
||||
## Text Reveal Animations
|
||||
|
||||
### 1. Clip-path reveal
|
||||
```javascript
|
||||
gsap.from('.reveal-text', {
|
||||
clipPath: 'inset(0 100% 0 0)',
|
||||
duration: 1,
|
||||
ease: 'power3.inOut',
|
||||
delay: 0.3
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Word-by-word reveal
|
||||
```javascript
|
||||
// Разбиваем заголовок на слова
|
||||
const heading = document.querySelector('.hero h1');
|
||||
const text = heading.textContent;
|
||||
heading.innerHTML = text.split(' ')
|
||||
.map(word => `<span class="word">${word}</span>`)
|
||||
.join(' ');
|
||||
|
||||
// Анимация слов
|
||||
gsap.from('.word', {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
duration: 0.5,
|
||||
stagger: 0.06,
|
||||
ease: 'power2.out',
|
||||
delay: 0.3
|
||||
});
|
||||
```
|
||||
|
||||
### 3. Character-by-character (kinetic typography)
|
||||
```javascript
|
||||
// Разбиваем на буквы для максимальной детализации
|
||||
const text = 'Премиальный дизайн';
|
||||
const container = document.querySelector('.kinetic-text');
|
||||
container.innerHTML = '';
|
||||
|
||||
text.split('').forEach((char, i) => {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'char';
|
||||
span.textContent = char === ' ' ? '\u00A0' : char;
|
||||
container.appendChild(span);
|
||||
});
|
||||
|
||||
// Анимация букв
|
||||
gsap.from('.char', {
|
||||
opacity: 0,
|
||||
y: 60,
|
||||
rotateX: -90,
|
||||
rotate: () => Math.random() * 40 - 20,
|
||||
duration: 0.8,
|
||||
stagger: 0.02,
|
||||
ease: 'back.out(1.7)',
|
||||
delay: 0.2
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Scrolling text reveal (marquee-style)
|
||||
```css
|
||||
.marquee-container {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.marquee-text {
|
||||
display: inline-block;
|
||||
animation: marquee 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
```
|
||||
|
||||
## Scroll-based text effects
|
||||
|
||||
### 1. Parallax text
|
||||
```javascript
|
||||
gsap.to('.scroll-text', {
|
||||
y: -100,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: '.section',
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
scrub: 1
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Text color shift on scroll
|
||||
```javascript
|
||||
ScrollTrigger.create({
|
||||
trigger: '.section',
|
||||
start: 'top center',
|
||||
end: 'bottom center',
|
||||
onUpdate: (self) => {
|
||||
const progress = self.progress;
|
||||
const r = Math.round(255 - progress * 100);
|
||||
const g = Math.round(100 + progress * 155);
|
||||
const b = Math.round(50 + progress * 200);
|
||||
document.querySelector('.highlight-text').style.color = `rgb(${r},${g},${b})`;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 3. Scale text on scroll
|
||||
```javascript
|
||||
gsap.from('.scale-text', {
|
||||
scale: 0.8,
|
||||
opacity: 0.3,
|
||||
scrollTrigger: {
|
||||
trigger: '.section',
|
||||
start: 'top 80%',
|
||||
end: 'bottom 50%',
|
||||
scrub: true
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Font Pairing Rules
|
||||
|
||||
### Rule 1: Display + Sans
|
||||
```css
|
||||
--font-display: 'Clash Display', 'Inter', sans-serif;
|
||||
--font-body: 'Inter', -apple-system, sans-serif;
|
||||
```
|
||||
|
||||
### Rule 2: Monospace Accents
|
||||
```css
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
/* Использовать для: тиков, данных, технических деталей */
|
||||
```
|
||||
|
||||
### Rule 3: Single Font Scale
|
||||
```css
|
||||
/* Один шрифт, полная шкала весов */
|
||||
--font-primary: 'Inter';
|
||||
/* weights: 300, 400, 500, 600, 700, 800, 900 */
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| Градиент `red → blue → green` | 2–3 связанных цвета |
|
||||
| `h1 { font-size: 120px }` на мобильных | `clamp(2rem, 6vw, 4rem)` |
|
||||
| Без `-webkit-background-clip` | Всегда указывать и vendor-prefixed |
|
||||
| Моноширинный шрифт для основного текста | Моно для акцентов/технических данных |
|
||||
| Градиент на белом фоне | Градиент на тёмном фоне (контраст) |
|
||||
|
||||
## CV Service Validation
|
||||
|
||||
```bash
|
||||
# Проверить typography compliance
|
||||
curl -s -X POST http://localhost:8001/design/analyze-dom \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"html": "..."}' | python3 -c "
|
||||
import sys, json
|
||||
d = json.load(sys.stdin)
|
||||
typ = d['analyzers'].get('typography_compliance', {})
|
||||
print(f\"Typography: {typ.get('score', 'N/A')}/10\")
|
||||
print(f\" Scale ratio: {typ.get('scale_ratio', 'N/A')}\")
|
||||
print(f\" Min body: {typ.get('min_body_size', 'N/A')}\")
|
||||
print(f\" Font stack: {typ.get('font_stack', 'N/A')}\")
|
||||
"
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
name: typography/kinetic-text
|
||||
title: Kinetic Typography
|
||||
description: Animated text — scroll-triggered reveals, word-by-word animations, text masking.
|
||||
tags: [typography, kinetic, animation, reveal, text]
|
||||
source: brad.co, amppz.com, godly.website, linear.app
|
||||
---
|
||||
|
||||
# Kinetic Typography
|
||||
|
||||
## 1. Scroll Reveal Text
|
||||
|
||||
```html
|
||||
<h1 class="kinetic-text">
|
||||
<span class="word">Превосходство</span>
|
||||
<span class="word">в</span>
|
||||
<span class="word">деталях</span>
|
||||
</h1>
|
||||
```
|
||||
|
||||
```css
|
||||
.word {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.word.revealed {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
```
|
||||
|
||||
## 2. Typewriter Effect
|
||||
|
||||
```css
|
||||
.typewriter {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-right: 3px solid #6366f1;
|
||||
animation: typing 3s steps(40) forwards, blink 0.7s step-end infinite;
|
||||
}
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { border-color: transparent; }
|
||||
}
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| Без `prefers-reduced-motion` | Уважать настройки |
|
||||
| 500ms transition | 0.6–1s для читаемости |
|
||||
Reference in new issue
Block a user