Почему типографика — первое, в чём ошибаются дизайнеры
Большинство людей думает, что типографика — это выбор шрифтов. Это не так. Типографика — это интервалы, ритм и иерархия: невидимая структура, которая направляет взгляд читателя раньше, чем он осознанно решит, куда смотреть. Красивый шрифт, испорченный плохим интерлиньяжем, неправильным трекингом или отсутствием иерархии, передаёт информацию хуже, чем правильно использованный Times New Roman. Эти 8 концепций объясняют почему.
8 основ
Трекинг
Межбуквенный интервал, применённый ко всему слову или блоку текста. Увеличивайте его для подписей прописными буквами; уменьшайте для крупных заголовков.
Тексту прописными нужно +10–20 % трекинга, чтобы он «дышал». Строчному основному тексту — почти никогда.
Кернинг
Интервал между двумя конкретными парами символов. «AV», «To», «WA» по умолчанию стоят слишком далеко друг от друга — хороший кернинг устраняет эти невидимые зазоры.
Автоматический кернинг хорошо справляется с большинством случаев. Отключите его в демо, чтобы почувствовать, что именно он исправляет.
Интерлиньяж
Вертикальное расстояние между строками текста. Слишком тесно — текст задыхается. Слишком свободно — глаз теряет нить между строками.
Оптимум для основного текста: 1,4–1,6 размера шрифта. Крупные заголовки можно делать теснее, примерно 1,0–1,2×.
Насыщенность шрифта
Толщина штриха — от тонкого (100) до чёрного (900). Насыщенность создаёт иерархию ещё до того, как читатель осознанно прочтёт хоть одно слово.
Ограничьтесь 2 начертаниями в дизайне: одно для основного текста, одно для заголовков. Больше 2 — это хаос.
Шрифты с засечками и без
У шрифтов с засечками на буквах есть небольшие завершающие штрихи. У рубленых их нет. Засечки облегчают чтение длинных текстов на бумаге; рубленые выигрывают на экранах при малых размерах.
Для основного веб-текста мельче 18 px рубленый шрифт почти всегда выигрывает в читаемости.
Выравнивание текста
Как строки располагаются в своём контейнере — по левому краю, по центру, по правому краю, по ширине. Выравнивание по левому краю подходит почти для любого основного текста.
Никогда не выравнивайте основной текст в вебе по ширине. Это создаёт неровные промежутки между словами, называемые «реками», которые ломают плавность чтения.
Типографская шкала
Соотношение размеров между уровнями заголовков. Постоянный множитель (1,25×, 1,414×, 1,618×) создаёт визуальный ритм и гармонию по всей странице.
Выберите одно соотношение и применяйте его последовательно. Произвольные размеры заголовков — главный источник визуального хаоса в любительских дизайнах.
Контраст
Визуальное различие между элементами — размер, насыщенность, цвет, стиль. Без контраста нет иерархии. Без иерархии ничего не читают.
Если два элемента выглядят примерно похоже, сделайте их одинаковыми или сделайте контраст резким. Золотая середина выглядит как случайность.
Не просто читайте — почувствуйте
У каждой из этих концепций есть живое интерактивное демо на нашей странице «Учиться». Двигайте ползунки трекинга и интерлиньяжа, переключайтесь между засечками и рублеными шрифтами, меняйте насыщенность в реальном времени. Типографика «щёлкает», когда вы с ней работаете, а не когда читаете о ней.
AaОткрыть интерактивный урок →Нужен дизайнер, который применит эти принципы на вашем сайте?
Давайте поговорим →About
Патрик Чен — независимый разработчик и веб-дизайнер, создатель Sublimearts.io. Урок «Основы типографики» появился потому, что любой курс по дизайну тратит 2 часа на теорию цвета и 10 минут на шрифты. Это казалось перевёрнутым с ног на голову.