Шрифтовые пары и сетка: типографика для новичков

Что такое типографика простыми словами

Шрифт - это голос текста. Одно и то же слово можно прошептать, крикнуть или сказать спокойно и веско. И вот новичок впервые дорвался до списка шрифтов - и ведёт себя как ребёнок в кондитерской. Хочется всё и сразу. А на выходе страница, где шесть шрифтов орут друг на друга, и читать это невозможно.

Секрет, кстати, до обидного простой. Хороший текстовый дизайн - это один-два шрифта, понятная лесенка размеров и единый шаг отступов. Ни таланта, ни десяти лет насмотренности. Просто пара правил, которые работают всегда.

Зачем новичку разбираться в шрифтах

Рисовать ты можешь не уметь. А вот текст ставишь постоянно: лендинг, презентация, пост, README, интерфейс приложения, которое вайбкодишь. И типографика выдаёт любителя первой - быстрее, чем цвет и картинки.

• Поймёшь, почему чужой сайт выглядит дорого, а твой - «на коленке», хотя текст ровно тот же.
• Перестанешь выбирать шрифт «по вайбу» и начнёшь собирать пары, которые гарантированно дружат.
• Любой экран будет читаться сразу: глаз сам найдёт, где главное, без твоих пояснений.
• Сетка и единый отступ уберут то самое «что-то не так, а что - не пойму». Обычно это блок, съехавший на пару пикселей.

Девять из десяти «дилетантских» макетов - это не плохой вкус. Это пять шрифтов, размеры на глаз и отступы, выставленные пробелами. Три правила ниже чинят почти всё.

Четыре кита хорошей типографики

Сколько шрифтов использовать на странице

Железное правило новичка: один шрифт - нормально, два - хорошо, три - потолок. Один хороший шрифт в разной жирности и размере закроет вообще всё. Это не бедность. Это дисциплина.

Зачем тогда второй? Чтобы развести роли: заголовочный Заголовочный (display) шрифт - крупный, с характером, для заголовков и акцентов. Часто слишком вычурный, чтобы читать им длинный текст, зато ловит внимание. ловит внимание, а текстовый Текстовый (body) шрифт - спокойный, без лишнего характера, заточен под длинное чтение мелким кеглем. Его задача - не мешать, а быть прозрачным. спокойно несёт смысл. Как фронтмен и басист: один светит, другой держит.

Как подобрать шрифтовую пару: контраст и родство

Хорошая пара держится на двух вещах сразу.

• Контраст. Шрифты должны явно отличаться, иначе зачем их два - будет выглядеть как ошибка. Классика жанра: серифный Серифный (с засечками) шрифт - у букв есть маленькие «лапки» на концах штрихов. Выглядит классически, по-книжному, солидно. плюс гротеск Гротеск (без засечек, sans-serif) - буквы с гладкими концами, без «лапок». Выглядит современно, чисто, по-интерфейсному. . Один с засечками, другой без - разницу видно мгновенно.
• Родство. При этом что-то общее у них быть обязано, иначе пара развалится. Главный признак - похожая высота строчных букв Высота строчных (x-height) - насколько высокие у шрифта маленькие буквы вроде «икс» по сравнению с большими. Если у двух шрифтов она разная, рядом они смотрятся как из разных эпох. . У одного буквы крупные и пузатые, у другого мелкие и поджатые? Рядом они будут смотреться как чужие.

Самый безопасный лайфхак: возьми одно семейство в разных начертаниях - тонкое, обычное, жирное. Контраст будет, а родство гарантировано: это буквально один шрифт. Осмелеешь - добавишь второй.

Иерархия заголовков: чтобы глаз сам нашёл главное

Иерархия Иерархия - визуальный порядок важности. Самое главное выделено сильнее всего, второстепенное - тише. Глаз считывает её за доли секунды, ещё до чтения. - это карта для глаза. Зашёл на страницу и за секунду понял: вот заголовок, вот подзаголовок, вот текст. Делается она тремя бесплатными инструментами, и шрифтов для этого нужно всё так же мало.

• Размер. Заголовок заметно крупнее текста. Не на пару процентов - так, чтобы разница читалась сразу.
• Жирность. Главное - жирным, остальное - обычным. Часто этого одного хватает.
• Воздух. Вокруг важного оставляй больше пустого места. Пустота - это не «не доделал», это подсветка.

А чтобы не выставлять размеры на глаз, дизайнеры берут лесенку - шкалу размеров Шкала размеров (модульная шкала) - заранее заданный набор кеглей, где каждый следующий получается умножением предыдущего на один и тот же коэффициент. Размеры выглядят согласованно, потому что связаны общим шагом. . Берёшь базовый размер текста, умножаешь на постоянный коэффициент - и получаешь ряд: текст, подзаголовок, заголовок, огромный заголовок. Размеры выглядят родными, потому что выросли из одного шага.

Сетка и отступы: единый ритм страницы

Сетка Сетка (grid) - невидимая система направляющих, по которой выравниваются блоки на странице: колонки, отступы, края. Сама не видна, но её отсутствие чувствуется сразу. - это невидимые рельсы. По ним выравниваются края текста, колонки, картинки. Всё стоит на одних рельсах - страница выглядит собранной. Каждый блок живёт сам по себе - получается то самое «съезжает».

Но самое мощное и простое правило - единый шаг отступов. Выбери базовую единицу и собирай все промежутки из её кратных. В индустрии чаще всего берут шаг, кратный 8: ряд 8, 16, 24, 32, 40 и дальше. Так устроены крупные дизайн-системы вроде Material Design от Google. Для мелочей можно дробить кратно 4. Главное - не плодить случайные 7, 13, 19 пикселей.

Как собрать типографику экрана за 6 шагов

Допустим, верстаешь простой лендинг или экран приложения. Не угадываешь - действуешь по шагам.

Выбери два шрифта: один с характером для заголовков, один спокойный для текста. Сомневаешься - возьми один шрифт в двух начертаниях, обычном и жирном. Это уже рабочая пара.
Проверь родство: поставь оба рядом и глянь на высоту маленьких букв. Сильно разная - меняй один, они не подружатся.
Задай базовый размер текста, удобный для чтения. От него построй лесенку: умножай примерно в 1,25-1,5 раза и получи подзаголовок, заголовок, крупный заголовок.
Расставь иерархию: главное - крупнее и жирнее, второстепенное - меньше и спокойнее. Не больше трёх-четырёх уровней, иначе снова каша.
Выбери единый шаг отступов, кратный 8. Все промежутки между блоками бери только из этого набора: 8, 16, 24, 32. Никаких случайных чисел.
Выровняй края всех блоков по одной линии слева. Это и есть твоя простейшая сетка. Отойди, посмотри издалека - всё должно стоять ровно и дышать.

Если вайбкодишь и хочешь, чтобы ассистент собрал типографику сам, не пиши «сделай красивые шрифты». Дай ему те же правила словами - и результат будет предсказуемым.

Собери типографику для этого экрана по правилам, не на глаз.

Используй максимум два шрифта: один заголовочный с характером, один спокойный текстовый. Если сомневаешься - один гротеск в начертаниях regular и bold.
Размеры строй модульной шкалой от базового кегля текста с коэффициентом около 1,3: текст, подзаголовок, заголовок, крупный заголовок.
Иерархию делай размером, жирностью и воздухом, не новыми шрифтами. Не больше четырёх уровней.
Все отступы бери только кратными 8 (8, 16, 24, 32, 40). Никаких произвольных значений.
Выровняй все блоки по единой левой линии. Покажи итоговую шкалу размеров и набор отступов отдельным списком.

Частые ошибки новичков в типографике

• Пять шрифтов «для красоты». Каждый новый шрифт делает хуже, а не лучше. Сократи до одного-двух, разнообразие добирай жирностью и размером.
• Пара без контраста. Два похожих шрифта выглядят как ошибка, а не как пара. Разводи роли: с засечками плюс без засечек.
• Размеры на глаз. «Тут чуть побольше, тут чуть поменьше» даёт мутную иерархию. Построй лесенку из одного коэффициента.
• Заголовок почти как текст. Разница в размере еле видна - значит, иерархии нет. Делай контраст явным, не стесняйся.
• Случайные отступы. 7 пикселей тут, 13 там - и страница «съезжает». Один шаг, кратный 8, на все промежутки.
• Тесно, без воздуха. Всё впритык - читать тяжело и выглядит дёшево. Пустота вокруг важного не пробел, а акцент.
• Выравнивание вразнобой. Один блок по левому краю, другой по центру, третий уехал. Посади всё на одну левую линию - и сразу станет аккуратно.