Веб-типографика
Что это такое
Веб-типографика — это практика выбора и набора шрифта в браузере: какие гарнитуры, каких размеров, сколько места между строками, буквами и абзацами и как всё это меняется вместе с окном и настройками читателя. В вебе она неотделима от доставки: пока файл гарнитуры не скачан, текст показать нечем, поэтому набор и загрузку приходится решать вместе.
Почему это важно
Текст составляет большую часть большинства интерфейсов, и от его настроек зависит, станут страницу читать или бросят. Слишком длинная строка теряет место читателя при каждом возвратном движении глаза, при слишком маленьком интерлиньяже абзац кажется плотным, а поздно загруженный шрифт делает текст невидимым, а потом текст прыгает. Это маленькие числа с большими последствиями. Правильно задать их дёшево: шкала, мера строки, правило интерлиньяжа и одна цепочка запасных шрифтов закрывают большинство страниц. Дорого обходится другое — сделать это поздно, когда макет уже построен на случайных значениях.
Что в этом треке
- Типографическая шкала и ритм (02-frontend/18-web-typography/01-type-scales-and-rhythm) — выбор шкалы размеров и вертикального пространства, которое держит её вместе.
- Веб-шрифты и производительность (02-frontend/18-web-typography/02-web-fonts-and-performance) — загрузка гарнитур так, чтобы читатель не ждал и не видел, как текст прыгает.
Предварительные требования
- Каскадные таблицы стилей (CSS) (02-frontend/05-css)
Что читать дальше
- Адаптивный веб-дизайн (02-frontend/10-responsive-web-design) — при плавном изменении размеров типографическая шкала держится на любой ширине.
- Дизайн-токены (03-design-ux/41-design-tokens) — место типографической шкалы, когда её разделяют с дизайном.
- Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — загрузка шрифтов чаще всего и портит оценку сдвига макета.