Типографика
Что это такое
Типографика — это выбор и набор шрифта для экрана: шкала размеров, мера, которая остаётся читаемой, высота строки, достаточная для того чтобы глаз находил следующую, и ритм, разделяющий разделы без лишнего украшения. Это дизайнерская половина шрифта, а загрузка, разбиение на подмножества и поведение при масштабировании относятся к веб-типографике.
Почему это важно
Почти всё, что читает пользователь, набрано шрифтом, поэтому типографика несёт большую часть иерархии и большую часть комфорта чтения. Экран с тремя размерами и разумной мерой выглядит спокойно и профессионально, однако тот же макет с девятью размерами и строкой в девяносто символов — уже документ: на экране ограничения жёстче, чем в печати, расстояние чтения и вьюпорт меняются, а читателя часто прерывают на середине фразы, и своё место ему приходится искать заново.
Что в этом треке
- Шкала размеров шрифта (03-design-ux/28-typography/01-setting-a-type-scale) — выбрать немного размеров с ясными шагами и назначить каждому свою работу.
- Длина строки и ритм (03-design-ux/28-typography/02-line-length-and-rhythm) — мера, высота строки и вертикальные промежутки, которые держат страницу вместе.
Предварительные требования
- Визуальный дизайн (03-design-ux/10-visual-design)
Что читать дальше
- Визуальный дизайн (03-design-ux/10-visual-design) — прочитайте это первым; шрифт — главный носитель иерархии, которую он описывает.
- Веб-типографика (02-frontend/18-web-typography) — сторона реализации: загрузка шрифтов, разбиение на подмножества и масштабирование вместе с вьюпортом.
- Макетирование и сеточные системы (03-design-ux/30-layout-grid-systems) — колонки, задающие меру.
- Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — размер текста, зум и пределы фиксированных единиц.