Типографика: что это, где применяется и как освоить

Самое частое заблуждение новичка — считать, что типографика начинается и заканчивается выбором красивого шрифта. На деле хорошая гарнитура не спасёт страницу, где строка тянется через весь экран, строки слиплись, а заголовок второго уровня почти не отличается от основного текста. Поэтому учиться удобнее не с коллекции шрифтов, а с одного абзаца, который вы раз за разом перенабираете с разными параметрами и сравниваете.

Кому нужна типографика и когда нужен другой подход

Графическому дизайнеру и верстальщику типографика нужна каждый день: книга, журнал, отчёт, упаковка, интерфейс — везде основная часть площади занята текстом. Маркетолог с этим навыком сам собирает письмо рассылки или страницу акции так, что их дочитывают, и может внятно объяснить подрядчику, что не так с макетом. Автору презентаций типографика помогает держать на слайде одну мысль и делать текст читаемым с последнего ряда.

Границы у навыка тоже есть. Рисовать собственные буквы для вывески или обложки — это леттеринг, а создавать полноценный шрифт со всеми знаками и кернингом — отдельная профессия шрифтового дизайнера. Композиции, логотипу и шрифтовым лицензиям посвящены отдельные статьи сайта о графическом дизайне и айдентике, а здесь речь о тексте.

Кегль, интерлиньяж и длина строки

Три параметра основного текста связаны между собой, и менять их по одному бессмысленно. Чем длиннее строка, тем больше нужен интерлиньяж: глазу труднее найти начало следующей строки. На практике межстрочное расстояние для основного текста обычно берут в 1,2–1,5 раза больше кегля, а для крупных заголовков — плотнее. Классический ориентир для ширины колонки из книги Роберта Брингхерста «Основы стиля в типографике» — от 45 до 75 знаков в строке.

С экранным чтением всё интереснее, чем кажется. Мэри Дайсон в обзоре исследований чтения с экрана (Dyson, Behaviour & Information Technology, 2004, 23(6): 377–393) разбирает серию экспериментов, где строки длиной от 25 до 100 знаков сравнивали между собой. Самые длинные строки читались быстрее самых коротких — отчасти потому, что меньше приходилось прокручивать страницу. Однако легче всего читать, по оценкам самих участников, было строку средней длины, около 55 знаков, хотя она и не давала максимальной скорости. А в работе Дайсон и Хейзелгроува 2001 года при 55 знаках читатели лучше поняли прочитанное, чем при 100, и выигрыш нельзя было объяснить тем, что они просто читали медленнее.

Из этого следует практический вывод: длина строки — выбор между скоростью просмотра и пониманием, и делать его нужно под задачу. Для лонгрида, инструкции или статьи, которую должны понять, разумно держать строку в районе 55–75 знаков. Для ленты коротких новостей, которую пробегают глазами, более длинная строка не станет ошибкой. И ещё урок: ощущение «так приятнее» не всегда совпадает с измеренной скоростью, поэтому спорные решения проверяют на людях.

Иерархия и сетка

Иерархия показывает читателю порядок: что главное, что второстепенное, где начинается новый раздел. Строят её небольшим набором средств — размером, начертанием, цветом и отбивками (пустым местом до и после элемента). Хорошее правило для начала — не больше трёх-четырёх уровней текста на странице и не больше двух гарнитур. Отбивка над заголовком должна быть больше, чем под ним, чтобы он «прилипал» к своему тексту.

Сетка задаёт колонки, поля и шаг, по которому выравниваются элементы. В книге это модульная сетка разворота, в вебе — повторяющиеся колонки и отступы. Она делает страницу предсказуемой: читатель быстро привыкает, где искать подпись, врез или кнопку.

Русский набор: кавычки, тире, неразрывные пробелы

У русского текста свои правила, и их нарушение сразу выдаёт небрежную вёрстку. Основные кавычки — «ёлочки», вложенные — „лапки“. Тире в предложении длинное и отбивается пробелами, а между числами в значении «от — до» ставят короткое тире без пробелов: 1941–1945, 10–15 минут. Дефис остаётся внутри слов: «кто-то», «онлайн-курс».

Неразрывный пробел не даёт строке разорваться там, где разрыв мешает чтению: между числом и единицей измерения, между инициалами и фамилией, после знака «№», перед тире. В книжной и журнальной вёрстке принято также не оставлять в конце строки короткие предлоги и союзы — так называемые висячие предлоги; это договорённость ремесла, а не орфографическое правило. В HTML неразрывный пробел задают сущностью  , а автоматические переносы по правилам русского языка браузер расставит свойством CSS hyphens: auto, если у страницы указан язык lang="ru". Ширину колонки в вебе удобно задавать в единицах ch (ширина цифры «0»): 60–70ch дают примерно нужное число знаков.

Учебный пример: памятка для клиентов

Ситуация учебная. Маркетологу стоматологической клиники нужно превратить текст из документа в одностраничную памятку «Что делать после удаления зуба» для печати на А4 и для сайта. Сейчас в ней сплошной текст одним кеглем, кавычки прямые, а важное выделено то жирным, то капсом, то красным.

Порядок работы такой. Сначала маркетолог выделяет смысловую структуру: заголовок, короткое вступление, три блока — «в первые сутки», «первые три дня», «когда срочно звонить врачу». Затем выбирает одну гарнитуру с кириллицей и тремя начертаниями, задаёт основной текст 11 пунктов с интерлиньяжем 15 для печати, делит лист на две колонки, чтобы строка не вышла длиннее 70 знаков. Блок о тревожных симптомах выделяет одним способом — полужирным заголовком и отбивкой, без цвета и капса. Последний шаг — чистка набора: ёлочки, тире, неразрывные пробелы в «38 °C» и «через 2 часа». Для сайта ту же структуру переносят в одну колонку с шириной около 65ch.

С чего начать и в каком порядке осваивать

Порядок ниже идёт от того, что сильнее всего влияет на чтение, к тонкой настройке. Пока не настроен основной текст, бессмысленно подбирать шрифтовые пары, а правила русского набора проще закрепить, когда уже есть собственный макет, на котором их можно применить.

1. Возьмите один абзац текста на 800–1 000 знаков и наберите его в пяти вариантах: разный кегль, интерлиньяж и ширина колонки. Распечатайте и сравните.
2. Освойте иерархию: заголовок, подзаголовок, основной текст, подпись — только размером, начертанием и отбивками.
3. Выучите правила кавычек, тире и неразрывных пробелов и почистите по ним два-три своих старых документа.
4. Постройте простую сетку на две-три колонки и сверстайте в ней страницу с заголовком, текстом и иллюстрацией.
5. Подбирайте шрифтовые пары: гарнитура для заголовков и для основного текста, обе с полноценной кириллицей.
6. Перенесите макет в веб или на слайд и проверьте, как он ведёт себя на телефоне и на проекторе.

Если хочется пройти основы по видеоурокам и недорого, посмотрите «Основы графического дизайна» XYZ School: по данным обзора, программа начинается именно со шрифта в Illustrator, в ней пять уроков и двенадцать упражнений. Работы при этом не проверяют, так что оценивать результат придётся самостоятельно или просить об этом коллег.

Упражнения, ошибки и проверка результата

Лучшие упражнения — копирование и перенабор. Возьмите страницу хорошо свёрстанной книги или журнала и попробуйте повторить её: подберите кегль, интерлиньяж и поля так, чтобы строки совпали. Потом наберите тот же текст хуже намеренно и объясните себе, что именно сломалось.

Новички чаще всего ошибаются одинаково. Ставят пять шрифтов на одну страницу. Выделяют всё подряд, и в итоге не выделено ничего. Выравнивают по ширине узкую колонку без переносов, и в тексте появляются дыры. Берут модный шрифт без кириллицы и получают русские буквы из другой гарнитуры.

Прищурьтесь или уменьшите макет: иерархия должна читаться даже тогда, когда слов уже не разобрать. Попросите человека, который не видел текст, найти на странице конкретную информацию и засеките время. Распечатайте макет в реальном размере: на экране кегль часто кажется крупнее, чем окажется на бумаге.

Когда основы освоены, следующий шаг — осознанный выбор шрифта под задачу: оценить качество гарнитуры, полноту набора знаков, лицензию и цену. Этому посвящён курс «Шрифт в дизайне» Skillbox и Paratype: два месяца, десять модулей о классификации, параметрах, качестве, лицензиях и микротипографике, работы с проверкой. Создавать шрифт с нуля там не учат, а для обучения нужны базовые навыки вёрстки.

Как навык влияет на доход

Сопоставимой статистики о надбавке за типографику нет: в вакансиях она почти всегда входит в требования к графическому дизайнеру, верстальщику или дизайнеру интерфейсов, а не оплачивается отдельно. Влияние на доход косвенное и проявляется в том, какие задачи человек может взять на себя.

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

Как выбрать обучение

Сначала определите, чего не хватает. Если вы маркетолог или автор презентаций, достаточно короткой программы с упражнениями на иерархию, сетку и правила набора. Если вы дизайнер и хотите брать вёрстку книг и изданий, нужна программа с InDesign, книжными разворотами и проверкой работ преподавателем.

Для тех, кто уже работает в дизайне, подойдёт курс Bang Bang Education «Типографика и вёрстка: внимание к тексту». По данным обзора, это три месяца, 26 уроков, семь обязательных и шесть дополнительных заданий, пять работ в портфолио; разбирают модульные сетки, книжные развороты и историю типографики, работают в Illustrator и InDesign. Полным новичкам программа не подходит, а сроки проверки заданий в обзоре не указаны — уточните их у школы.

Прежде чем платить, проверьте три вещи: сколько заданий проверяет живой человек, есть ли среди них многостраничная вёрстка и учат ли набору по-русски, а не только по англоязычным пособиям. Хороший тест до выбора — тот самый абзац в пяти вариантах: если сравнивать их интересно, навык стоит развивать дальше.

Сравнить программы разных школ по формату, длительности и цене поможет рейтинг онлайн-школ графического дизайна — это широкий рейтинг по направлению, отдельного рейтинга по типографике на сайте нет.