neo
76c4c5b4fe
- 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
29 lines
1.1 KiB
Markdown
29 lines
1.1 KiB
Markdown
---
|
||
title: Web Typography
|
||
created: 2026-06-02
|
||
updated: 2026-06-02
|
||
type: concept
|
||
tags: [web-design, typography]
|
||
sources:
|
||
- raw/articles/web-design-research.md
|
||
confidence: high
|
||
---
|
||
|
||
# Web Typography — Веб-типографика
|
||
|
||
## Иерархия
|
||
H1 → H2 → H3 → body → caption. Без иерархии пользователи не могут сканировать.
|
||
|
||
## Размеры
|
||
- **Body**: минимум 16px
|
||
- **Hero**: 300–400px в full-screen hero, 48–72px в обычном контенте
|
||
- **Межстрочный интервал**: 1.4–1.6 для body, 1.1–1.3 для заголовков
|
||
- **Длина строки**: 50–75 символов (65 — оптимум)
|
||
|
||
## Правила
|
||
- Не более 2–3 шрифтов на страницу
|
||
- Парные шрифты: Serif + Sans-serif или разные веса одной гарнитуры
|
||
- CSS Custom Properties для всех типографских значений
|
||
- Контраст: 4.5:1 для текста (WCAG AA), 3:1 для заголовков
|
||
- Кастомные иконки лучше generic — Crawford: micro details build trust
|