Здравствуйте, друзья! В сегодняшней статье мы разберем основы типографики – искусства оформления текста – в формате вопросов и ответов. Мы обсудим, что такое типографика и почему она важна, какие существуют виды шрифтов и правила их использования, как сделать текст читаемым и привлекательным. Статья структурирована как FAQ с более чем 25 популярными вопросами от начинающих. Наша цель – дать вам уверенное понимание базовых принципов типографики, показать типичные ошибки и пути их исправления, а также поделиться ресурсами для дальнейшего обучения.

«Веб-дизайн – это на 95% типографика», – заметил однажды Оливер Райхенштейн, основатель Information Architects¹. Оптимизация типографики напрямую связана с улучшением читабельности, доступности и удобства интерфейса. Другими словами, качественная работа со шрифтами – залог того, что ваш текстовый контент будет эффективно донесен до читателя. Будь то веб-сайт, презентация или печатная книга – грамотная типографика помогает удержать внимание аудитории и передать нужный посыл. Ниже мы ответим на ряд ключевых вопросов о типографике, с которыми сталкиваются новички. Поехали!

Часто задаваемые вопросы по Типографике для начинающих

1. Что такое типографика?

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

Главная задача типографики – сделать чтение легким и приятным, а также акцентировать главное в тексте. Правильно оформленный текст быстрее воспринимается и лучше запоминается. Типографика сочетает творческий подход с техническими тонкостями верстки. С одной стороны, это часть графического дизайна (визуальное оформление текста), с другой – набор строгих правил набора, регулирующих применение шрифтов². Грамотная типографика улучшает читабельность материала и формирует его стиль. Например, оформление статьи крупными разборчивыми заголовками, оптимальная длина строк и достаточные интервалы между ними позволяют читателю легко следовать за мыслью автора. В то же время, хаотично набранный текст – слишком мелкий шрифт, тесные строки или пестрый фон – отпугивает и утомляет.

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

(Примечание: термин “типографика” не следует путать с “типографией” – последняя означает печатное предприятие, полиграфическое производство.)

2. Как зародилась и развивалась типографика?

История типографики начинается с изобретения книгопечатания. Хотя попытки воспроизводить тексты предпринимались и до этого (например, ксилография – печать с резных деревянных досок), настоящим переворотом стало внедрение подвижных литер. В середине XV века немецкий изобретатель Иоганн Гутенберг разработал печатный станок с наборными литерами из металла (около 1440 г.) – это событие считают рождением европейской типографики². Уже в 1455 году Гутенберг напечатал первую большую книгу – знаменитую 42-строчную Библию готическим шрифтом, который напоминал привычный тогда рукописный почерк. Изобретение Гутенберга резко ускорило и удешевило распространение книг: тексты перестали переписывать вручную, их можно было быстро печатать в больших количествах.

Первые печатники подражали внешнему виду рукописей: использовали сокращения, декоративные литеры, отсутствовала нумерация страниц, шрифты походили на каллиграфию². Однако довольно быстро возникла потребность в новых, более удобочитаемых формах шрифта. Уже в 1460–1470-х годах во Франции гравер Николя Жансон создал первый образец антиквы – шрифта с засечками, основанного на римском письме². В 1501 году итальянский издатель Альд Мануций ввел в употребление курсивный шрифт (italic)², а во второй половине XVI века окончательно сформировалось правило использования прописных (заглавных) и строчных букв в тексте. Книги стали постепенно меньше по формату и удобнее для массового читателя.

В XVIII веке типографика получила научную основу. Французский мастер Пьер Симонон Фурнье в 1737 году предложил первую систему измерения кеглей шрифта – пункты (points)², которая затем была доработана Фирмином Дидо и легла в основу современной системы типографических единиц (1 пункт ≈ 0,376 мм). Стандартизация размеров литер облегчила набор и унификацию шрифтов.

На рубеже XIX–XX веков развитие полиграфии и художественных стилей привело к появлению множества новых шрифтовых гарнитур. Каждый крупный исторический период рождал свои характерные шрифты: от изящных контрастных антикв эпохи классицизма (Дидо, Бодони) до строгих гротесков (без засечек) начала XX века, отражавших дух модернизма. В начале ХХ века в Германии возникло движение “Новая типографика” во главе с Яном Чихольдом, провозгласившее принципы функциональности и простоты в оформлении печатных изданий.

В середине XX века, с развитием рекламы и массовой печати, появились чёткие разделения на текстовые шрифты (для основного текста) и акцидентные шрифты (для заголовков и афиш). Дизайнеры вроде Адриана Фрутигера и Герба Любалина создавали гарнитуры, сочетавшие читабельность с яркой визуальной формой.

Конец XX – начало XXI века ознаменовались переходом от аналогового набора к цифровому. Компьютеры и настольные издательские системы принесли новую эру типографики: шрифты стали цифровыми файлами (форматы TrueType, PostScript, OpenType), появился веб-дизайн. Возникли задачи экранной типографики – например, чтобы текст хорошо смотрелся на экранах разных устройств. На заре веба приходилось учитывать низкое разрешение мониторов, из-за чего для длинного чтения предпочитали простые гротески (шрифты без засечек) – на экране маленькие детали засечек отображались плохо³. Одновременно встал вопрос о корректном отображении символов: так, пришлось заменить прямые машинописные кавычки " на типографские «ёлочки», ставить длинное тире вместо дефиса для пауз, неразрывные пробелы перед короткими словами и т.д. – появились даже специальные онлайн-сервисы «типографы», автоматически исправляющие подобные нюансы текста².

Сегодня типографика продолжает развиваться. С одной стороны, мы видим возврат к классическим ценностям – высокочитабельные шрифты для больших текстов, уважение к белому пространству, выверенная верстка. С другой – цифровая среда позволяет экспериментировать: появляются вариативные шрифты (Variable Fonts) с настраиваемыми параметрами, анимация текста, новые форматы вроде SVG-шрифтов. Но базовые принципы, заложенные еще Гутенбергом и его последователями, остаются неизменны: типографика служит тому, чтобы письменное слово было удобно прочитать и красиво воспринимать визуально.

3. Чем отличается шрифт от гарнитуры?

В обыденной речи слова “шрифт” и “гарнитура” часто употребляют как синонимы, но в типографической терминологии есть различие. Шрифтовая гарнитура – это полный набор шрифтов одного дизайна (рисунка), включающий разные начертания (например, прямое, курсив) и размеры³. Проще говоря, гарнитура определяет общий стиль семьи шрифтов, имеющих одно название. Например, Times New Roman – это гарнитура.

Шрифт же в узком смысле – конкретное начертание и размер внутри гарнитуры. Исторически “шрифтом” называли набор литер определенного кегля и начертания. Например, Times New Roman Bold 12 pt – это отдельный шрифт (полужирный Таймс 12 пунктов) внутри гарнитуры Times New Roman. В современном цифровом понимании шрифт можно представить как файл, содержащий глифы определенного стиля.

Иными словами, гарнитура (она же typeface по-английски) – это дизайн букв, а шрифт (font) – техническое воплощение этого дизайна. Гарнитура имеет название (например, Arial) и включает различные шрифты: Regular, Bold, Italic и т.д. Отличие: гарнитура задает единый стилистический облик семейства букв, тогда как шрифт – конкретный член этого семейства со своими свойствами (толщиной, наклоном, размером)³.

На практике в разговорной речи слово “шрифт” употребляют широко, имея в виду и гарнитуру в целом. Например, говорят “шрифт Helvetica”, подразумевая гарнитуру (набор стилей Helvetica). Для начинающего дизайнера важно понимать суть: гарнитура – общий дизайн букв, шрифт – конкретное начертание. Различие особенно заметно, когда вам необходимо подобрать шрифтовую семью: вы выбираете гарнитуру (например, Roboto), а затем используете внутри нее нужные шрифты (Regular, Bold, Light и т.п.) для разных элементов дизайна.

4. Какие существуют основные виды шрифтов?

Шрифтов великое множество, но их можно разделить на несколько основных категорий по стилевым признакам:

• Шрифты с засечками (антиква) – у букв есть небольшие “ножки” или черточки на концах линий. Примеры: Times New Roman, Georgia, Garamond. Засечки визуально связывают буквы в строке, и традиционно считается, что в больших объемах текста (например, в книгах) они улучшают удобочитаемость. Большинство печатных изданий набирают антиквой. Классическая антиква делится на подтипы – старостильные, переходные, современные – но для начала достаточно понимать общую группу.

• Шрифты без засечек (гротески) – буквы без дополнительных черточек на концах, с более простым геометричным рисунком. Примеры: Arial, Helvetica, Calibri, Open Sans. Гротески выглядят современно и лаконично. Они часто используются в веб-дизайне и интерфейсах, так как на экранах (особенно с невысоким разрешением) отсутствие засечек даёт более четкое изображение символов³. В длинном текстовом наборе (например, на сайте) шрифты без засечек также хорошо работают, особенно при достаточном межстрочном интервале.

• Наборные (текстовые) шрифты – так называют гарнитуры, предназначенные для основного, многабзацного текста. Они, как правило, сбалансированы по пропорциям: умеренная контрастность штрихов, средняя высота строчных букв, широкие просветы внутри букв. Их главная черта – высокая читабельность в мелком кегле. Примеры: PT Serif, Charter (антиквы); Myriad, Verdana (гротески). Хороший текстовый шрифт не привлекает к себе лишнего внимания, “не орнамент, а прозрачное стекло”, через которое виден текст.

• Акцидентные (декоративные) шрифты – напротив, созданы для коротких надписей, заголовков, акцентов. Их еще называют заголовочными. Они могут быть весьма выразительными: необычная форма букв, большие контрасты, декоративные элементы. Цель акцидентного шрифта – привлечь внимание, придать надписи характер. Примеры: Impact (блоковый тяжелый гротеск для заголовков), Lobster (витиеватый скриптовый шрифт), шрифты-«рубленые» для плакатов и афиш. В основном тексте читать акцидентные шрифты тяжело – они утомляют глаз, поэтому их применяют дозированно (логотип, заголовок, баннер).

• Рукописные и декоративные – отдельная подгруппа акцидентных шрифтов, имитирующих почерк, каллиграфию или стилизованные буквы. Например, Script-шрифты похожи на изящный почерк (как будто написано от руки пером), Display-шрифты могут напоминать исторические буквицы, техно-стиль, граффити и т.д. Их используют для специальных случаев: открытки, логотипы, афиши, где нужен определенный эмоциональный тон. В повседневном чтении они непрактичны.

• Моноширинные шрифты – все символы имеют одинаковую ширину (каждая буква занимает одинаковое пространство). Примеры: Courier, Consolas. Такие шрифты произошли от машинописных и широко применяются в программировании, таблицах, где важна выравнивание символов по вертикали. Читабельность сплошного текста моноширинным шрифтом ниже, чем пропорциональным, но для кода или технических текстов это приемлемо.

Существуют и другие классификации. В профессиональной типографике, например, используют систему VOX-ATypI или отечественный ГОСТ 3489–П, разделяющие шрифты на гротески, рубленные, гуманистические, брусковые и т.д. – это тонкости для продвинутых. Новичку достаточно уверенно отличать serif vs sans-serif (с засечками или без), понимать термин “декоративный шрифт”, “рубленый” и т.п.

Важно отметить: ни один вид шрифта не “лучше” других сам по себе – у каждого свое применение. Хорошая типографика базируется на осознанном выборе: например, с засечками – для длинного романа на бумаге, без засечек – для меню сайта или мобильного приложения, декоративный скрипт – для свадебной открытки, моноширинный – для кода или имитации ретро-машинописи. Зная основные категории, вы сможете уже на старте отсечь неподходящие варианты и выбрать гарнитуру по задаче.

5. Как правильно выбрать шрифт для проекта?

Выбор шрифта – ответственная задача, от которой зависит как эстетика, так и удобство чтения вашего проекта. Вот ключевые моменты, которые стоит учесть при подборе шрифта:

1. Назначение и контекст. Определите, где и как будет использоваться текст. Это печатная книга или веб-сайт? Длинная статья или рекламный постер? Для объёмных блоков текста лучше выбирать нейтральные текстовые шрифты с высокой читабельностью. Для кратких акцентов (логотип, заголовок на плакате) можно взять что-то более выразительное или акцидентное. Учебник, например, традиционно набирают гарнитурой с засечками, а мобильное приложение – гротеском, но это не жесткое правило, а вопрос удобства для аудитории.

2. Целевая аудитория и стиль. Шрифт транслирует определённое настроение. Подумайте, для кого ваш дизайн. Консервативная аудитория оценит классический, респектабельный шрифт; молодежная среда – более современный и неформальный. Например, для детской книги подойдет мягкий, дружелюбный шрифт, а для юридического отчета – строгий и нейтральный. Шрифт должен соответствовать теме и бренду. Сравните: надпись в готическом шрифте вызовет ассоциации со старинными книгами или рок-атрибутикой, а округлый sans-serif – с современностью и технологичностью.

3. Читабельность прежде всего. Красивый, но трудночитаемый шрифт – плохой выбор для основного текста. Перед утверждением гарнитуры протестируйте ее: наберите пару абзацев и прочтите. Хороший шрифт имеет узнаваемые отличия между похожими символами (например, строчная “l” и заглавная “I”, ноль и буква “О” должны различаться). Обратите внимание на разборчивость: удобно ли различать буквы в слове? При малом размере буквы не должны сливаться. Если шрифт требует напрягать зрение, ищите более простую альтернативу.

4. Поддержка нужных символов. Если вы работаете с русским языком, убедитесь, что выбранный шрифт содержит кириллицу и все необходимые знаки (буквы ё, й, кавычки «», длинное тире и т.д.). Многие импортные бесплатные шрифты красиво смотрятся на латинице, но кириллические символы в них могут быть плохо прорисованы или вовсе отсутствовать. Надежные гарнитуры от известных производителей обычно имеют полный набор. Также учтите, нужны ли цифры, спецсимволы, символы разных языков – выбранный шрифт должен покрывать эти требования.

5. Набор начертаний и размеров. Для проекта важно, чтобы гарнитура имела достаточно начертаний (regular, bold, italic, etc.). В дизайне часто нужны разные веса для заголовков, подзаголовков, основного текста. Если у шрифта всего одна-две версии (скажем, только Regular и Bold), это может ограничить вас. Кроме того, хороший шрифт должен “держаться” в разных размерах: например, тот же шрифт используется и в мелких подписях, и в крупных заголовках без потери качества. Некоторые гарнитуры специально оптимизированы под малые кегли (например, имеют слегка шире буквы и крупнее внутренние просветы). Универсальные семейства (наподобие Roboto, Open Sans, PT Sans) обычно рассчитаны на гибкое применение и потому выигрышны для начинающих.

6. Сравнение вариантов. Никогда не выбирайте шрифт “вслепую”. Попробуйте 2–3 кандидата, набрав ими фрагмент реального текста вашего проекта. Сравните визуально: какой выглядит понятнее, приятнее глазу и соответствует настроению? Отбросьте эмоции к самому шрифту – оценивайте удобство чтения. Часто дизайнер влюбляется в необычный шрифт, но в тексте он “рябит”. Пусть решает читабельность: формат должен служить содержанию. Если сомневаетесь, склоняйтесь к более нейтральному решению, особенно для основного текста.

7. Соответствие техническим требованиям. Учитывайте платформу: для печати важно, есть ли шрифт в формате CMYK/PDF, нет ли проблем с лицензией на печать; для веб – доступен ли шрифт в формате WOFF/WOFF2, насколько он “тяжелый” (большой файл шрифта может замедлять загрузку страницы). В веб-дизайне часто выбирают шрифты из каталогов вроде Google Fonts (которые оптимизированы для браузеров). Также проверьте, как шрифт выглядит на разных экранах – иногда экранная рендеринг-способность различается.

Пример: предположим, вы делаете сайт кулинарных рецептов. Анализируем: много текста (описание рецептов) – значит, нужен читабельный текстовый шрифт. Тематика домашняя, уютная – возможно, подойдет гарнитура с “человечным” характером, не слишком строгая (например, Georgia или PT Serif для текста). Для заголовков рецептов можно взять чуть более выделяющийся шрифт без засечек, сочетающийся по настроению (например, Paratype Sans или Montserrat). В итоге получим гармоничную пару: тёплый антиквенный текст и аккуратный гротеск для заголовков. Проверяем кириллицу, размеры – если все хорошо читается, выбор сделан.

Таким образом, выбор шрифта – баланс практичности и эстетики. Всегда задавайте себе вопросы: “Удобно ли читать?”, “Соответствует ли образ?” и “Подходит ли для среды использования?”. И не забывайте, что при необходимости лучше использовать не более 2–3 шрифтов в одном проекте (об этом подробнее далее) – избыток разнообразия только навредит восприятию.

6. Что такое кегль шрифта и как подобрать размер текста?

Кегль – это размер шрифта по высоте, традиционно измеряемый в пунктах. Один пункт (pt) равен 1/72 дюйма (примерно 0,353 мм). Кегль включает в себя высоту буквы вместе с небольшими запасами сверху и снизу (от линии верхних выносных элементов до линии нижних выносных). Говоря проще, кегль – это условная высота строки текста. В цифровых редакторах обычно просто указывают размер шрифта в пунктах (например, 12 pt) или пикселях (в вебе).

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

• Печатные издания (книги, журналы): оптимальный кегль основного текста обычно находится в диапазоне ~10–12 пунктов. В книгах стандартом стала величина около 10–11 pt (в зависимости от гарнитуры; некоторые шрифты оптически выглядят крупнее или мельче при одном размере). В журналах и газетах иногда используют чуть меньший кегль (9–10 pt) ради экономии места, но компенсируют это хорошим межстрочным интервалом и колонками узкой ширины. Главное – баланс: текст должен быть комфортен для длительного чтения, не заставлять всматриваться. Заголовки в печати делают крупнее основного шрифта – на несколько пунктов или значительно больше, в зависимости от иерархии.

• Документы, учебные работы: часто применяют требования стандартов (например, в курсовых и дипломах традиционно 14 pt для основного текста по ГОСТ). Но в целом, 12 pt считается универсальным читаемым размером для печатного текста при нормальном просмотре (с расстояния ~30-40 см). Для сносок, примечаний допустим меньший кегль – 8–9 pt, но тогда желательно другой шрифт или начертание, чтобы компенсировать (например, использовать гротеск, который в малых размерах читается лучше).

• Веб-сайты и цифровые устройства: здесь единицы измерения часто пиксели (px) или относительные единицы (em, rem). Экранная типографика имеет свой ориентир: 1em обычно равен базовому размеру 16 px в браузерах, что примерно соответствует 12 pt на бумаге (в зависимости от DPI экрана). На современных мониторах и телефонах комфортным считается размер 14–18 px для основного текста веб-страницы⁴. Например, многие сайты используют ~16px для контента (это эквивалентно ~11-12 pt). Меньше 14px делать основной текст не рекомендуется – мелкие буквы на экране быстро утомляют глаза. Для заголовков веб-страниц обычно применяют более крупные размеры: от 18–24 px для подзаголовков до 32 px и выше для главных заголовков, в зависимости от дизайна.

• Презентации: если вы готовите слайды, учтите, что аудитория будет смотреть текст с расстояния. Общая рекомендация – не мельчить: текст на слайде должен быть не менее 18–20 pt, заголовки – 24 pt и выше, чтобы даже задние ряды могли прочесть. Важно также выбирать простой шрифт. В презентациях “лучше крупнее, чем мельче”.

Как подобрать размер? Попробуйте правило: напечатайте или отобразите тестовый образец текста предполагаемым шрифтом и размером. Представьте условия чтения – бумага в руках, монитор на столе, телефон в руке – и посмотрите, удобно ли. Если приходится щуриться – увеличьте кегль. Если текст кажется чересчур крупным (читается по буквам, а не по словам) – можно уменьшить. Обычно для сплошного текста глаза комфортно охватывают 8-12 слов на строку при правильном размере и длине строки. Если слов явно меньше, возможно, шрифт слишком крупный или строка слишком короткая; если больше – может, шрифт мелковат либо строка слишком длинная (о длине строки поговорим далее).

Еще один ориентир: в печатной продукции считается, что капитальная высота (высота заглавной буквы) не должна быть меньше ~1 мм для приемлемого восприятия. 10 pt гарнитура обычно имеет заглавную букву около 2 мм высотой, что вполне нормально. В вебе опирайтесь на стандарт 16 px как базу и отталкивайтесь от него.

Также важно учитывать тип шрифта: некоторые гарнитуры при одинаковом кегле выглядят крупнее (например, Verdana славится тем, что 10 pt Verdana выглядит больше, чем 10 pt Times). Это связано с разной x-высотой и пропорциями. Поэтому не бойтесь слегка корректировать размер под конкретный шрифт. Например, если сменили Arial на Open Sans, может оказаться, что для того же визуального восприятия Open Sans надо поставить на 1 px меньше, или наоборот.

Наконец, последовательность в иерархии: установите гармоничное соотношение размеров для разных уровней текста. Часто используют масштабные коэффициенты: заголовок может быть в 1.5–2 раза крупнее основного текста, подпись – на 20% меньше и т.п. В итоге пользователь легко отличает, что главное, а что вторично.

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

7. Что такое межстрочный интервал (интерлиньяж) и почему он важен?

Межстрочный интервал (иначе интерлиньяж) – это вертикальное расстояние между строками текста. Формально измеряется от базовой линии одной строки до базовой линии следующей. В текстовых редакторах интервал часто задают в процентах от кегля или кратно – например, “одинарный” (1.0), “полуторный” (1.5) или конкретным значением в пунктах/пикселях.

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

Оптимальный межстрочный интервал для сплошного текста, по общему правилу, должен немного превышать размер шрифта. Обычно рекомендуют интерлиньяж около 120–150% от кегля (1.2–1.5 “кегля”)⁵. Например, для шрифта размером 12 pt разумный интервал – примерно 14–18 pt. Это обеспечивает комфортное восприятие: строки не слипаются, но и не оказываются чрезмерно разреженными. Многие редакторы по умолчанию ставят около 1.15–1.2 (115–120%) как базовый интервал.

Конечно, точное значение зависит от гарнитуры и контекста. Шрифты с большими выносными элементами или высоким x-height могут требовать чуть больше интерлиньяж, чтобы элементы соседних строк (например, нижние части “у, р” и верхние “д, б”) не визуально мешали друг другу. Напротив, узкие шрифты или тексты в колонках иногда допускают немного меньший интервал.

Влияние оказывают и ширина строки, и размер шрифта:

• Для узких колонок (например, газетная верстка в несколько колонок по 5-7 слов) можно брать интервал ближе к нижней границе (около 1.2). Это помогает визуально держать абзац единым блоком.

• Для очень длинных строк (широкая страница или монитор) часто увеличивают интервал, чтобы глаз легче переходил к началу следующей строки, иначе можно сбиваться. В веб-дизайне, если ширина текста растягивается, лучше поставить line-height 1.5 (150%).

• Мелкий шрифт (8–9 pt) – разумно поставить чуть больший интервал в абсолютных величинах, иначе текст будет слишком плотным и тяжело читаемым для пожилых людей или при плохом освещении.

• Крупный шрифт (заголовки) – напротив, интервал может быть относительно меньше (иногда 1.1–1.2), чтобы большие буквы “держались вместе” компактно.

Например, стандарт “полуторный” интервал (1.5) часто используют в учебных текстах, так как он создает комфортное пространство для чтения и заметок. А вот для газетных статей может применяться интервал около 1.2, чтобы сохранить плотность текста на странице. В вебе типичное значение для параграфов – 1.4 (140%).

Почему это важно? Межстрочный интервал – один из столпов хорошей типографики. Правильно подобранный интерлиньяж:

• Повышает скорость чтения и понимание. Глаз без усилий перескакивает на нужную следующую строку, текст “дышит”.

• Улучшает внешний вид блока текста. Достаточные промежутки делают страницу более легкой визуально, текст не выглядит чёрным “монолитом”.

• Способствует восприятию текста как единого связного блока (при условии отличия интервала между абзацами и между строками, см. далее об отступах абзацев).

Например, сравните два абзаца: с интервалом 1.0 (строчки плотно набраны) и с интервалом 1.5. Второй вариант наверняка покажется более читабельным – даже если в первом случае шрифт был хорошим, теснота снижает удобство.

Практический совет: начинающему дизайнеру можно пользоваться готовыми рекомендациями: для печатного 11 pt текста – интерлиньяж ~13–14 pt; для веб-текста 16 px – line-height ~1.5 (24 px). Далее, смотрите на глаз – иногда пара лишних пунктов интервала резко улучшает картину. И никогда не делайте межстрочный интервал меньше 100% кегля (кроме случаев нарочитого декоративного эффекта, скажем, в логотипе) – читаемость сразу провалится.

Также обратите внимание на разницу между интервалом внутри абзаца и между абзацами. Хорошее правило: расстояние между абзацами (если вы не используете красную строку) должно быть больше, чем межстрочный интервал внутри абзаца⁶. Иначе абзацы могут сливаться. Если же используете красную строку, то дополнительный отступ между абзацами не нужен – интервал везде единый.

Итог: относитесь к межстрочному интервалу не менее внимательно, чем к выбору шрифта или размера. Подружитесь с параметром line-height. Порой достаточно слегка “распушить” строки, и текст сразу становится дружелюбнее к читателю.

(Примечание: Термин “интерлиньяж” произошел от полосок свинца (lead) – “leading” в англ., которыми в эпоху ручного набора прокладывали строки текста для увеличения расстояния между ними. Сейчас это цифровой параметр, но суть та же.)

8. Что такое межбуквенный интервал (кернинг и трекинг)?

Межбуквенный интервал – это расстояние между соседними символами в тексте. Управление этим расстоянием происходит двумя способами:

• Кернинг (kerning) – выборочная (индивидуальная) подгонка интервала между определенными парами символов. Исторически, в литерном наборе, некоторые буквы из-за своей формы при стандартном расстоянии выглядели излишне разреженно или тесно. Классический пример – буквы “A” и “V”: из-за наклонных форм между ними сверху остается большой просвет, и без коррекции слово вроде “AVTO” выглядело бы с дыркой. Кернинг решает это: для комбинации “AV” задано смещение, сближающее буквы. Современные шрифты содержат таблицы кернинговых пар – заранее рассчитанные дизайнерами корректировки для проблемных сочетаний (Ty, Va, WA, Te и т.д.). Таким образом, кернинг применяется точечно между определенными буквами⁸.

• Трекинг (tracking), он же спейсинг или разрядка, – это равномерное изменение межбуквенного интервала на всем отрезке текста. Проще говоря, “раздвинуть или сжать весь текст по горизонтали”. В графических редакторах трекинг указывают в тысячных эм (тысячные части ширины квадрата) или в процентах. Например, +10 трекинг слегка увеличит расстояния между всеми буквами, а -5 немного уплотнит текст.

Кернинг и трекинг влияют на разборчивость и эстетичность текста:

• Правильный кернинг делает так, что буквы визуально расположены равномерно. Хорошо откерненный шрифт не имеет “провалов” или “столкновений” между конкретными символами. Пользователь обычно не замечает кернинг – и это хорошо, значит, все гармонично. Плохой кернинг сразу бросается в глаза: скажем, в слове “РАЗРЯД” буквы “РЯ” могут казаться слипшимися, если их формы конфликтуют, и это отвлекает. В шрифтах высокого класса дизайнеры скрупулезно выверяют тысячи пар, чтобы текст смотрелся ровно. Новичкам не требуется вручную кернить обычный текст – положитесь на заложенные параметры шрифта. Но иногда для логотипа или заголовка крупного размера бывает нужно вручную подправить пару букв, если композиция того требует.

• Трекинг обычно используют умеренно. В сплошном тексте его стараются не применять без необходимости, так как стандартная разреженность символов оптимизирована для чтения. Слишком плотный трекинг (отрицательный, буквы слишком близко) ухудшает разборчивость – буквы могут сливаться. Слишком разреженный текст тоже читается хуже – слова распадаются, глаз медленнее схватывает образы слов. Тем не менее, трекинг бывает полезен:

  • Легкая разрядка (+5…+10) иногда применяется к заглавным буквам, особенно если они идут подряд (акронимы, лозунги). Для надписи ВЫСТАВКА, набранной капслоком, часто добавляют немного расстояния, чтобы слово не выглядело громоздким “куском”. В некоторых шрифтах прописные буквы изначально имеют встроенный трекинг пошире.

  • Разрядка используется и как дизайнерский прием: например, чтобы придать заголовку ощущение “легкости” или футуристичности, можно сильно раздвинуть буквы (“S P A C E”). Но функционально это уже декоративный эффект, а не про читабельность.

  • Отрицательный трекинг (уплотнение) встречается редко – разве что вы хотите чуть уплотнить заголовок, чтобы он уместился в строчку, но нужно действовать осторожно.

Стоит помнить, что кернинг – вещь, заложенная в шрифте. Хорошие гарнитуры имеют аккуратный кернинг “из коробки”. А вот трекингом вы управляете сами при верстке. Новички иногда увлекаются и пытаются “ужать” текст, чтобы он занял меньше места – лучше так не делать, изменяя трекинг более чем на 2-3%. Гораздо правильнее подобрать другой шрифт или размер, чем радикально менять естественное расстояние между буквами.

Пример наглядности: слово “ВОСХОД”. Между “В” и “О” в некоторых шрифтах пространство кажется чуть большим, чем между другими буквами – это может потребовать кернинговой коррекции, если вы делаете, например, логотип “ВО”. В обычном тексте этого не заметят, а вот в логотипе на крупном плане – да. Другой пример: заголовок “WELCOME” в веб-дизайне – все буквы заглавные, дизайнер может слегка увеличить трекинг, чтобы надпись выглядела элегантнее и легче воспринималась.

Вывод: кернинг – “тонкая настройка” между отдельными буквами (чаще предоставляемая самим шрифтом), а трекинг – инструмент контролируемого изменения общего межбуквенного пространства. Начинающим можно посоветовать не злоупотреблять ни тем, ни другим. Доверьтесь шрифту, который вы выбрали: если он качественный, то в обычном тексте все интервалы будут уже оптимальными. Учитесь замечать случаи, где кернинг бросается в глаза – это сигнал либо о проблемах шрифта, либо о том, что слишком крупный размер выявил особенности. В таких случаях можно подправить вручную или сменить гарнитуру.

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

9. Как создавать иерархию текста с помощью типографики?

Иерархия текста – это организация текста по уровням важности, при которой визуально различаются заголовки, подзаголовки, основной текст, цитаты, подписи и т.д. Грамотно выстроенная типографическая иерархия позволяет читателю сразу понять структуру материала: что главное, что второстепенное, где начало раздела, а где комментарий.

Создание иерархии достигается разными типографическими средствами:

• Размер шрифта. Самый очевидный прием – заголовки делают крупнее, чем основной текст. Например, заголовок раздела может быть 18–24 pt, тогда как тело текста – 12 pt. Подзаголовки – промежуточного размера. Разница в кегле сразу сигнализирует глазу, где крупная тема, а где подробности. Как правило, уровень 1 (главный заголовок) – самый крупный, уровень 2 (подраздел) – чуть меньше, основной текст – еще меньше. Внутри основного текста могут быть еще более мелкие элементы, типа сносок.

• Начертание (стиль шрифта). Использование полужирного или курсива для выделения тоже создает акценты. Например, заголовки часто делают Bold (жирными), чтобы они еще сильнее отличались от обычного текста. Подзаголовки могут быть прописными (все буквы заглавные) – это тоже придает им отдельный статус. Внутри параграфа курсивом или полужирным шрифтом выделяют важные термины – тем самым создается микроиерархия: читатель, пробегая текст, зацепится за выделенное слово.

• Шрифт или гарнитура. Можно комбинировать разные гарнитуры для разных уровней. Например, распространенная практика – заголовки в одном шрифте, текст в другом. Часто используют контрастные пары: заголовок без засечек (гротеск, чтобы привлечь внимание), а основной текст с засечками, или наоборот. Главное, чтобы сочетание выглядело гармонично. Избегайте слишком большого количества разных шрифтов – обычно достаточно 2 гарнитур (подробнее об этом далее). Но различие гарнитур придает визуальный контраст: сразу видно, где какой элемент.

• Цвет и другие эффекты. Заголовок можно сделать цветным или тем же цветом, но более насыщенным (например, черный текст, а заголовок темно-серый). Цвет – сильный дифференциатор. Также можно применять капитель, VERSAL (all caps), разрядку букв, фон заливки, рамки и пр. элементы к разным уровням, но это уже дизайнерские тонкости. Основные иерархические признаки – все же размеры, жирность, гарнитура.

Как построить иерархию на практике?

1. Посмотрите на структуру вашего материала. Предположим, это статья с заголовком, несколькими подзаголовками и обычными абзацами. Выделите визуально заголовок: увеличьте кегль относительно текста, сделайте его жирным или используйте другую гарнитуру, добавьте отступы сверху/снизу. Он должен “доминировать” на странице.

2. Подзаголовки (если есть) сделайте заметными, но менее, чем главный. Например, если текст 12 pt, заголовок статьи 24 pt жирный, то подзаголовки могут быть 16 pt полужирные. Можно дать им иной цвет (например, фирменный цвет из палитры).

3. Основной текст – базовый стиль (скажем, 12 pt Regular).

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

5. Подписи к изображениям – более мелкий шрифт, возможно, курсив или светлый (light) начертание, чтобы понятно: это подпись, а не обычный текст.

6. Сноски, ссылки, мелкие примечания – еще на ступень ниже (например, 10 pt, если текст 12 pt, и иной цвет, скажем, серый).

Принцип пирамиды: заголовок 1-го уровня самый заметный, 2-го – поменьше, и т. д. Разница должна быть достаточно явной, чтобы “бросаться в глаза”. Если вы сделаете заголовок лишь на 1-2 пункта больше основного текста, читатель может не уловить структурного различия. Поэтому обычно заголовки отличаются существенно (например, 12 pt текст vs 18 pt заголовок, т.е. в 1.5 раза).

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

Пример: откройте любую книгу или длинную статью. Вы сразу заметите: название главы крупно и жирно (иногда вообще другая гарнитура, например, рубленая), подзаголовки внутри главы – чуть крупнее текста и, скажем, прописными буквами. Абзацы имеют красную строку или интервал между собой – тоже элемент структуры, показывающий, где мысль закончилась. Все это позволяет читателю сначала сканировать структуру, а потом уже читать детали.

Веб-страницы используют заголовки <h1>, <h2>, <h3> и т.д., которые браузеры по умолчанию стилизуют разными размерами – это встроенная реализация иерархии. В качественных дизайнах это еще и вручную дорабатывают: например, могут все <h2> сделать определенным цветом, чтобы пользователь легко пробегал глазами по странице и видел разделы.

Итого: используйте типографические контрасты – размер, вес, стиль, шрифт, цвет – чтобы разные уровни текста отличались. Но сохраняйте единообразие на одном уровне: например, все подзаголовки одного уровня должны выглядеть одинаково (не так, что один подзаголовок вдруг крупнее другого без причины). Консистентность – ключ к понятной навигации по тексту.

Хорошо организованная иерархия позволяет читателю, пролистав страницу, понять: “Вот заглавие статьи, вот разделы, вот у них подглавки, а это цитата или важная мысль выделена.” И уже исходя из этого, человек может решать, что читать внимательно. Типографика направляет взгляд – используйте ее, чтобы провести читателя по своему тексту.

10. Какие существуют основные правила хорошей типографики?

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

• Разбивайте текст на абзацы. Длинное непрерывное полотно текста читать тяжело. Оптимальная длина абзаца – 3–5 предложений. Каждый новый абзац – новая микротема или мысль. Визуально между абзацами должен быть либо отступ (интервал) больше, чем межстрочный, либо первая строка с отступом (красная строка). Это помогает глазом схватывать структуру и дает передышку при чтении⁶.

• Ограничивайте длину строки. Очень важно контролировать число символов в строке. Считается, что идеальная длина одной строки для комфортного чтения – около 60–90 знаков (включая пробелы)⁹. Если строка слишком длинная (например, 120–150 знаков на широкой странице), читателю трудно переводить взгляд в начало следующей строки и не сбиваться. Слишком короткие строки (менее 30–40 символов) делают текст “рваным” и тоже мешают плавному чтению. Поэтому при верстке печатных текстов используют колонки. В веб-дизайне тоже часто ограничивают ширину блока текста (например, max-width: 600-800px), чтобы на больших экранах строки не растягивались чрезмерно. Правило: примерно 8–12 слов на строку – комфортный диапазон. Если больше – рассмотрите разбивку на несколько колонок или увеличение кегля/интервала.

• Выравнивание в основном по левому краю. Наиболее естественное для чтения выравнивание – по левому краю (с рваным правым краем). Так текст равномерно распределяется, междусловные пробелы одинаковые, глазу легко переходить на новую строку. Полная выключка в ширину (justify) смотрится аккуратно, но для новичков может быть коварной: без грамотной настройки переносов слов она приводит к появлению “речных” разрядок (очень большие пробелы между словами в некоторых строках). В узких колонках или при малом тексте лучше вообще избегать выравнивания в ширину. Правый край рваный – это нормально для большинства текстов. Выравнивание по центру допустимо только для коротких строк (например, названия статьи, цитаты-эпиграфы). Длинные абзацы, выровненные по центру, читаются намного хуже – каждый раз начало строки в разном месте, глаз теряется⁶. Выравнивание по правому краю применяют крайне редко (например, подписи к автору в конце статьи) – читать справа-налево строку непривычно. Итак: основной текст – левый край.

• Контраст текста и фона. Типографика бесполезна, если читатель не видит текст из-за недостаточного контраста. Черный текст на белом фоне – эталон (или очень темный на очень светлом)⁹. Цветной текст тоже должен иметь достаточный контраст с фоном (не пишите желтым по белому, светло-серым по светло-серому и т.д.). Для экранов существуют рекомендации WCAG: коэффициент контрастности текста к фону не ниже ~4.5:1 для мелкого текста¹⁰. Практически: светлый текст на светлом фоне затрудняет чтение, как и темно-серый на черном. Чем меньше размер шрифта, тем выше требуется контраст, иначе буквы “растворятся”. Так что лучше не экспериментировать: черный (#000000) или очень темно-серый текст на белом/бежевом фоне – безошибочный выбор. Если фон цветной, текст либо белый, либо черный, в зависимости от фона (например, на темно-синем фоне – белые буквы, на пастельно-желтом фоне – почти черные буквы). Проверить контраст можно с помощью онлайн-инструментов (например, введя два цвета в “контраст checker”).

• Не злоупотребляйте прописными буквами. Текст, набранный ВСЕМИ ЗАГЛАВНЫМИ буквами (capslock), воспринимается хуже: у заглавных нет разнообразия высот, каждая буква – прямоугольный блок, слова теряют привычные очертания. Короткие фрагменты в капсе допустимы (логотипы, акронимы, заголовки не более нескольких слов). Но большие предложения или абзацы капслоком читать тяжело – скорость чтения снижается. Также капс в интернете эквивалентен крику, имейте в виду 🙂. Поэтому для основного текста используйте обычное сочетание строчных и прописных по правилам языка. Кстати, вместо капса лучше использовать капитель (small caps) – уменьшенные прописные буквы, если нужно стилистически выделить текст заглавными, но более изящно.

• Ограничьте количество шрифтов. Частая ошибка новичков – использовать слишком много разных гарнитур в одном проекте. Это создает визуальный хаос и непрофессиональный вид. Обычно достаточно двух, максимум трех шрифтовых гарнитур на весь документ/дизайн. Например, одна – для заголовков, другая – для основного текста (можно вообще одной обойтись, используя ее разные начертания). Если нужно выделить цитаты или крошечный текст, можно третью, но очень аккуратно. Логика: единообразие шрифтовых решений делает дизайн цельным. Разные шрифты должны быть обоснованы функционально (иерархия, акцент) и сочетаться между собой. Правило: 2 шрифта – безопасно; 3 – уже надо уметь подбирать; больше 3 – почти всегда лишнее для новичка⁶. К тому же, используя меньше гарнитур, вы избегаете проблем с их совместным отображением (не надо грузить много файлов на сайт, например).

• *Следите за “висячими” элементами. Это детали профессиональной типографики, но важные: не оставляйте на конце строки висячие предлоги и союзы (в русском языке «в, на, по, и» и т.п. из одной буквы не должны висеть в конце строки). Они переносятся на следующую строку с помощью неразрывного пробела. Например, вместо “в конце строки” (если “в” оказалось в конце), ставьте “в конце строки” (между “в” и “конце” – неразрывный пробел). То же касается инициалов с фамилией (И.И.Иванов – между И. и И. неразрывный пробел, чтобы не разорвать). Второй момент: тире вместо дефиса в нужных местах. В русском наборе тире (—) ставится в предложениях для пауз и между частями фразы (с пробелами вокруг) – “мы пришли — они уже ушли”, а дефис (-) употребляется внутри слов без пробелов (“наборно-версальный”). К сожалению, на клавиатуре прямая клавиша есть только для дефиса, но не для тире – однако старайтесь заменить дефис на длинное тире, где требуется (в Word есть авто-замена, или используйте Alt+0151 / Ctrl+Minus на NumPad). То же с кавычками: используйте «ёлочки» для русского текста, а не "машинописные" двойные. Старайтесь применять правильные символы – это мелочь, но именно такие детали отличают хороший набор от любительского. Кстати, многие из этих исправлений можно сделать сервисом типографирования автоматически², но полезно и вручную знать.

• Используйте специальные символы там, где нужно. Например, знак параграфа §, специальный знак градуса (°), правильный символ умножения × вместо латинской икс, единый стиль кавычек (русские «…» или английские “…” в зависимости от языка текста). Также: троеточие лучше ставить как единый символ … (U+2026), а не три отдельных точки – тогда при переносе строк это останется цельным знаком. Апостроф – отдельный символ (’), отличающийся от одинарной кавычки. В общем, внимание к подобным нюансам делает текст аккуратным.

• Не набирайте вручную пробелами и табуляцией, что можно сделать средствами верстки. Имеется в виду: не центруйте текст вставкой пробелов перед каждой строкой – для этого есть выравнивание по центру. Не делайте “красную строку” несколькими пробелами – используйте либо отступ первой строки абзаца, либо стиль абзаца. Не разрывайте строку кучей пустых строк – применяйте правильные отступы через стили параграфа. Такой “грязный” набор не только затрудняет правки, но и визуально может поехать при других размерах экрана или шрифта. Учитесь пользоваться инструментами форматирования, а не простыми костылями. Это, скорее, техническое правило, но очень важное.

Подытожим: хорошая типографика – это когда текст читается легко, структура понятна, ничто не мозолит глаз (ни странные разрывы, ни кривые отступы). Следуя перечисленным правилам, вы уже на 80% обезопасите себя от грубых ошибок. Как сказано в одной из типографских памяток: “Типографика – это мелочи. Но из мелочей складывается профессионализм.” Соблюдайте эти принципы, и ваши тексты будут выглядеть опрятно и привлекательно^{9 6}.

11. Что такое читабельность и разборчивость текста и в чем их разница?

Термины читабельность (иногда говорят “удобочитаемость” или “readability”) и разборчивость (“legibility”) связаны с тем, насколько легко воспринимается напечатанный текст, но обозначают разные аспекты:

• Разборчивость (легибильность) – это свойство шрифта, определяющее, насколько легко различаются отдельные символы. Иными словами, разборчивость зависит от дизайна букв: ясность их форм, отсутствие двусмысленности. Если шрифт разборчивый, то каждая буква узнаваема, не похожа на другую. Например, шрифт, в котором прописная “I” (ай) отличается от строчной “l” (эль) и от цифры “1” – обладает хорошей разборчивостью. Разборчивость закладывается шрифтовым дизайнером при создании гарнитуры: это и достаточная высота внутренних просветов (чтобы “о” не сливалось в черное пятно), и уникальные детали символов (перекрещивание у нуля, хвостик у строчной “л” и т.п.). Даже декоративный шрифт может быть разборчивым – если, несмотря на украшения, буквы легко узнаются.

• Читабельность (удобочитаемость) – это характеристика набора текста, определяющая, насколько легко читается целый текстовый блок. Она зависит от сочетания многих факторов: размера шрифта, длины строк, межстрочного интервала, цвета и контраста, выравнивания – то есть типографического оформления. Даже самый разборчивый шрифт можно набрать так, что читабельность будет плохая (например, 6-м кеглем, сплошным текстом на ширину А4 – результат: разобрать буквы-то можно, но читать абзацы крайне неудобно). Читабельность – это про то, насколько легко глаз скользит по строчкам, насколько быстро читаются слова и предложения. В читабельном тексте – оптимальные интервалы, комфортная длина строки, контраст достаточный и никакие визуальные дефекты не мешают (нет больших дыр из-за выравнивания, нет слипшихся строк и т.д.).

Если суммировать словами специалистов: разборчивость связана с формой букв (шрифтом), а читабельность – с расположением букв (набором)¹¹. Разборчивость – свойство гарнитуры, читабельность – свойство верстки.

Примеры, чтобы закрепить:

• Представьте декоративный шрифт, где буквы сильно изукрашены, завитушки, буквы “И” и “Й” почти не отличаются, строчные “о” и “a” похожи. Такой шрифт имеет низкую разборчивость – отдельные символы трудно распознать, особенно если текст набран сплошным маслом. Даже при хорошем оформлении (правильные интервалы) чтение будет буксовать, потому что сам шрифт трудный.

• Теперь возьмем супер-разборчивый шрифт, например, Verdana или Tahoma – они проектировались для экранов, там буквы максимально различимы. Но если мы наберем текст Verdana размером 8 px, да еще и в узкой колонке без интерлиньяжа, да светло-серым по белому – буквы сами по себе разборчивы, но читабельность текста будет низкой. Глазам придется напрягаться, чтобы прочитать. То есть шрифт хороший, но набор плохой – итог: трудно читать.

• Идеал – высокая разборчивость + высокая читабельность. Например, классический шрифт типа Georgia набран 11 pt с интервалом 1.3 на бумаге хорошего качества, строки по ~60 символов, черный на белом – буквы четкие, различимы, и сам текст идет плавно. Читатель не задумывается ни о буквах, ни о строках – он просто читает, погружен в содержание. Это признак хорошей типографики.

Какие факторы повышают разборчивость? Четкие формы, открытые апертуры (отверстия в буквах e, c), достаточный контраст штрихов (но не чрезмерный: ультра-тонкие линии могут напрягать), большие внутренние просветы (counterforms) – чтобы, например, буква “а” не выглядела как клякса в мелком кегле, разница между схожими символами (нуль и О, единица и I, г и q, т и m, Ш и Щ в кириллице и т.д.). Часто гротески считаются более разборчивыми на экране, а антиквы – в печати (из-за особенностей отображения).

Что влияет на читабельность? Мы частично это разобрали в правилах: длина строки, интервалы, выравнивание, абзацы, и даже содержание (слишком сложный, витиевато сформулированный текст и при идеальной типографике останется “тяжелым” для чтения – но это уже не наша тема). Также размер шрифта – очевидно, 5pt любой шрифт даст нулевую читабельность из-за элементарного физического ограничения.

Важно: читабельность и разборчивость работают вместе, но можно представить их как масштаб: разборчивость – на уровне букв и слов, читабельность – на уровне строк и абзацев. Например, дизайнер может сказать: “Надо увеличить читабельность текста” – скорее всего, речь о том, чтобы поправить форматирование (размер, интервалы, разбивку). А говоря “шрифт разборчивый/неразборчивый”, имеют в виду его буквенные формы.

Для начинающих эти понятия нужны, чтобы точнее понимать проблему: если вы видите, что текст тяжело идет, спросите себя, в чем причина:

• “Шрифт слишком вычурный или мелкий, путаются буквы?” – это проблема разборчивости. Решение: сменить шрифт или увеличить размер, выбрать гарнитуру проще.

• “Шрифт норм, но почему-то глазам тяжко, строки сливаются” – вероятно, межстрочного интервала мало, или длина строки велика (проблема читабельности набора). Решение: поправить верстку – увеличить интерлиньяж, сделать колонки, и т.д.

В идеале, конечно, устранять нужно все препятствия. Ведь главная цель типографики – обеспечить оптимальное восприятие текста. Разборчивость и читабельность – два кита, на которых эта цель держится¹¹. Достигаем их сочетанием хорошего шрифта и правильного набора.

12. Как сочетать разные шрифты в одном проекте?

Использование нескольких шрифтовых гарнитур в дизайне позволяет сделать визуальный образ интереснее и четче разделить текст по функциям (например, заголовок vs основной текст). Однако неправильное сочетание может привести к дисгармонии. Вот рекомендации, как подбирать шрифтовые пары и сочетать шрифты грамотно:

1. Соблюдайте контраст и баланс. Основное правило сочетания: шрифты должны различаться, но не конфликтовать. Часто лучшим сочетанием бывает дуэт “антиква + гротеск”, то есть шрифт с засечками для одного элемента и без засечек для другого¹². Например, сочетание классической антиквы (типа Baskerville) с нейтральным гротеском (типа Helvetica) – проверенная пара. Они контрастны по форме (наличие/отсутствие засечек), но оба достаточно нейтральны, чтобы не спорить друг с другом. Напротив, два очень похожих шрифта сочетать не имеет смысла – создастся ощущение, будто это одна гарнитура, набранная криво. Если шрифты слишком разные (например, декоративный готический и рукописный скрипт) – они тоже не будут сочетаться, у каждого свой сильный характер, будут “тянуть одеяло”. Нужен разумный контраст: либо различие по стилю (геометрический гротеск vs гуманистическая антиква), либо по насыщенности и настроению.

2. Иерархия ролей шрифтов. Обычно в паре один шрифт – основной, другой – вспомогательный. Например, основной для заголовков, второй для текста (или наоборот). Либо один – для акцентов и небольших вставок, другой – для всего остального. Разделите обязанности: не используйте два разных шрифта в одинаковой роли (скажем, часть абзаца одним, часть другим без причины) – это выглядит как случайность или ошибка. Пусть гарнитуры работают каждая на своем уровне: так создастся логичная система. Например, во многих журналах заголовки – рубленым шрифтом, а статьи – антиквой. Или на сайте: меню и навигация – одним шрифтом, контент – другим.

3. Общие черты. Несмотря на контраст, хорошо, если у шрифтов есть что-то объединяющее – общий дух или эпоха. Например, современные минималистичные шрифты (Proxima Nova и Open Sans) можно сочетать, хотя они оба без засечек – но один можно взять light для заголовков, другой regular для текста; у них схожая модульность и вместе они смотрятся гармонично. Или, если взять пару Didot (изящная антиква с тонкими засечками) и Futura (строгий геометрический без засечек) – контраст огромный, но оба – отражение модерна начала 20 века, и при правильном подходе такая пар может выглядеть эффектно: Didot – элегантность, Futura – современная простота, вместе образуют стиль высокой моды. Важно чувствовать, чтобы шрифты не “ссорились” настроением. Например, не самая удачная пара: комичный рукописный Comic Sans с техническим кондовым Courier – они из разных опер. А вот нейтральный шрифт обычно подружится почти с любым другим.

4. Контраст размером и весом. Помимо различий дизайна, ваши два шрифта можно дополнительно развести использованием размеров и насыщенностей. Часто случается: один шрифт более жирный и тёмный визуально, другой – легче. Это тоже работает на различие. Например, заголовок декоративным шрифтом всегда ставят заметно крупнее, чем текст простым – чтобы было ясно, что декоративность – для кратких элементов. Если такой шрифт поставить мелко, он будет хуже читаться. Принцип: чем необычнее шрифт, тем экономнее и крупнее он используется. Второй, простой шрифт – тянет основную массу текста.

5. Суперграфика: сочетание внутри одной гарнитуры. Кстати, иногда лучшее сочетание – это один шрифт, но разные его начертания. Строго говоря, это не разные гарнитуры, но прием схожий. Многие качественные семейства имеют несколько стилистических наборов (например, superfamily – где есть и гротеск, и антиква, созданные как родственники). Пример: гарнитура FF Meta и FF Meta Serif – задуманы как парные. Или PT Sans и PT Serif (проект Паратайп) – они сделаны для совместного использования, у них пропорции схожие, дух общий, но один с засечками, другой без. Использовать такую пару – безпроигрышно, потому что создатели за вас уже подумали о гармонии. Так что можно присмотреться к семействам шрифтов, которые специально выпущены комплектом.

6. Не забывайте про кириллицу. При подборе пары с кириллическим текстом убедитесь, что оба шрифта хорошо реализованы на кириллице. Бывает, что на латинице сочетание смотрится супер, а кириллические буквы одной из гарнитур выглядят плохо – тогда весь тандем рушится. Поэтому всегда проверяйте на примере конкретного языка (русского). В идеале, брать гарнитуры от одного производителя или обе с качественной кириллицей. Сейчас много таких: Google Fonts, отечественные студии типа ParaType, Лебедев, Абрикос, TypeType – выпускают семейства с хорошей кириллицей, можно среди них выбирать сочетания.

7. Практические комбинации. Вот несколько проверенных подходов:

• Классическая “старый стиль + современный гротеск”: например, Garamond + Helvetica. Гарнитуры контрастируют (классические засечки vs функциональный sans), но оба нейтрально-дружелюбные. Подходит для журнала, где заголовки Гельветикой, текст Гарамондом.

• “Элегантная антиква + простой геометрический санс”: Bodoni (или Didot) + Univers (или Avenir). Контраст высокий: Bodoni очень контрастный (тонкие/толстые линии), Univers однородный и чистый. Часто используется в модных журналах, постерах.

• “Моноширинный + обычный”: иногда берут моно-шрифт для кодовых вставок, таблиц или технических мелочей, а основной текст – обычным шрифтом. Например, Arial + Consolas или PT Sans + PT Mono (кстати, семейство PT содержит моно).

• “Декоративный + нейтральный”: если очень хочется декоративный шрифт применить – пусть он будет один на всю работу и только на акцентах. Все остальное – очень простой нейтральный гарнитур. Например, рукописный Pacifico для заголовков + Open Sans для текста. Или винтажный Playfair Display в больших заголовках + современный Source Sans для текстов.

• “Разные эпохи, но схожий характер”: бывает, сочетают, скажем, винтажную антикву и рукописный шрифт, если тема дизайн-ретро. Или цифровой pixel-font с футуристичным sans для hi-tech стиля. Здесь уже сложнее, требует чувства стиля.

8. Тест на совместимость. Практический совет: когда выбрали два шрифта, сделайте пробную страничку дизайна, где есть и заголовок одним шрифтом, и параграф другим, может быть подзаголовок еще. Посмотрите целиком. Хорошая пара выглядит как дополнение друг друга, плохая – как случайный набор. Если чувствуете диссонанс, попробуйте сменить одну из гарнитур. Иногда приходится перебрать несколько вариантов. Полезно изучать примеры: в интернете много ресурсов о “font pairing” – готовые пары, их можно брать за основу.

9. Количество: как уже говорилось, не более 2 (редко 3) шрифтов на проект – включая все. Лучше сделать одну хорошую пару, чем три-четыре неувязных гарнитуры. Многообразие ухудшает цельность дизайна. Если нужен третий шрифт, пусть это будет что-то очень узко применимое (например, декоративный логотип – как отдельный элемент, а остальные тексты внутри уже двумя гарнитурами).

Итак, сочетание шрифтов – это как подбор вина к блюду: один дополняет вкус другого, но не перебивает его. Добивайтесь того, чтобы при взгляде на оформленную страницу у читателя возникало ощущение порядка: “Вот здесь один стиль шрифта, вот здесь другой, и я понимаю зачем”. Тогда сочетание будет работать на пользу дизайна, усиливая коммуникацию, а не отвлекая от нее.

13. Какие распространенные ошибки допускают начинающие при работе с типографикой?

Новички в дизайне нередко совершают типичные ошибки при оформлении текста. Рассмотрим наиболее распространенные из них – чтобы вы могли их избежать:

• Использование слишком большого количества шрифтов. Как уже отмечалось, начинающий может по неопытности применить 5–6 разных гарнитур в одном макете – результат выглядит хаотично и дилетантски. Одна из самых частых ошибок – множество шрифтов в одном проекте⁶. Оптимально ограничиться 1–2 шрифтами. Если у вас каждый заголовок разным шрифтом, а основной текст третьим – читателю тяжело уловить единый стиль, глаза “разбегаются”. Лучше придерживаться выбранной пары и не добавлять лишнего.

• Выбор неудобочитаемых (экзотических) шрифтов для большого объема текста. Иногда в желании придать оригинальности дизайнер берет декоративный или «прикольный» шрифт и набирает им целую статью. В итоге текст выглядит красиво пару строк, но целую страницу читать невозможно – буквы с завитушками, глаз устает. Помните: экзотические шрифты – для заголовков, а не для абзацев⁶. Будьте проще в выборе основного шрифта. Не пытайтесь все сделать “особенным” ценой удобства чтения.

• Набор основного текста ПРОПИСНЫМИ буквами. Целый абзац или даже несколько предложений, набранные ВСЕМИ ЗАГЛАВНЫМИ – грубая ошибка. Такие блоки плохо воспринимаются: у заглавных букв нет привычных “вверх-вниз” выносных элементов, строка становится равномерной полосой, чтение замедляется на ~10-20%. Это допускается только для очень кратких фраз (и то редко). Большое количество капслока – табу⁶. Часто новичок думает: “сделаю все буквы заглавными – будет важно и броско”. А надо помнить, что капс = акцент, его нельзя превращать в норму текста. Если нужно выделить слово – окей, но не целый текст.

• Плохая иерархия или ее отсутствие. Ошибка – когда в тексте не видно, что важно, а что второстепенно. Например, все одним размером, заголовки не отличаются от обычного текста или отличаются недостаточно. Читатель с первого взгляда не может понять структуру – это раздражает. Другая сторона медали – нарушенная иерархия: например, подзаголовок случайно оформлен крупнее, чем заголовок, или разные подзаголовки выглядят по-разному. Новички иногда оформляют заголовки “от случая к случаю”, без системы. Правильно: задать четкие стили – Заголовок 1, Заголовок 2, Тело текста и придерживаться их. Иначе получается визуальный беспорядок, затрудняющий чтение.

• Неправильное выравнивание текста. Часто встречается ошибка: длинные тексты, выровненные по центру или по правому краю. Это серьезно бьет по удобству: текст по центру, если больше пары строк, читается очень плохо – каждый раз начало строки нужно “искать” глазами заново⁶. По правому краю – и того хуже для латиницы/кириллицы. Иногда новички так “стилизуют”, не понимая последствий. Лучше использовать левое выравнивание для параграфов. Также ошибка – полная ширина без переносов: когда justify применяется, но автоматические переноси слов не включены, появляются огромные пробелы между словами, “дыры” в тексте. Выглядит ужасно и ломает ритм чтения. Решение: либо выключить выравнивание в ширину, либо настроить переносы (в русском языке они обязательны при justify).

• Слишком длинные или слишком короткие строки. Новички могут не обратить на это внимания, но читателю бросится в глаза, если строка тянется от левого края монитора до правого на большом экране – чтение превращается в беготню глаз по экрану. С другой стороны, некоторые умудряются делать крайне узкие столбцы текста (по 2-3 слова в строке) без нужды – текст выглядит “столбиком” и теряет смысловую связанность. Оба случая – ошибки баланса длины строки. Правило оптимума (около 50-70 знаков) игнорировать не стоит, иначе ваш читатель устанет раньше времени⁶.

• Недостаточный межстрочный интервал (слишком плотный текст). Часто новичок, стремясь “впихнуть” побольше на страницу, ужимает интерлиньяж до минимума. Строки буквально лежат друг на друге. В итоге текст превращается в трудночитаемое месиво – глаза быстро теряют строку. Слишком маленький интервал между строками – распространенная ошибка, делающая текст неаккуратным и утомительным⁷. Лучше уж пусть будет чуть более разреженный, чем слитный. Оптимум ~1.2–1.5, а у многих новичков встретишь 1.0 или даже отрицательный leading (когда части букв одной строки физически накладываются на другую!).

• Слишком мелкий шрифт. Желание вместить больше текста или “эстетика мелкого текста” иногда склоняет неопытных дизайнеров делать кегль минимально допустимым. Например, на визитке или буклете набрать контакты 6-м кеглем: выглядит стильно микроскопически, но ведь никто не сможет прочесть без лупы. Нужно помнить об аудитории: шрифт должен быть достаточно крупным для комфортного чтения, особенно если аудитория широкая (всегда найдутся люди с неидеальным зрением). Мелкий текст допускается для сносок, примечаний, второстепенных данных, но не для основного контента. Рекомендуется не опускаться ниже ~9 pt в печати и ниже ~12 px на экране для основного текста – иначе, это уже не контент, а орнамент.

• Отсутствие отступов и воздуха. Новички иногда размещают текстовый блок вплотную к краям страницы или элемента, не дают полей, абзацы лепят друг к другу без интервалов и без абзацных отступов. Это создает ощущение тесноты и затрудняет восприятие структуры. Маленькие поля и слипшиеся абзацы – ошибка. Всегда полезно иметь поля (внутренние отступы) вокруг текста, межабзацные расстояния или красные строки – чтобы текст “дышал”. Иначе получается та самая “стена текста”, от которой читатель бежит.

• Неправильное использование знаков и символов. Например: вместо длинного тире ставят дефис или вообще двойной дефис --, кавычки елочки заменяют прямыми ", неразрывные пробелы игнорируют – в итоге в тексте встречаются висящие союзы. Эти мелочи выдают небрежность. Часто у новичков можно видеть: «Привет, друзья! » (с пробелом перед закрывающей кавычкой) или "Привет" (неправильный стиль кавычек). Или: 20 лет - это срок (должно быть тире – “20 лет — это срок”). Могут возникать и откровенные косяки: например, дробный пробел случайно, двойные пробелы, табуляции где не надо. Все это ошибки микротипографики. Они вроде мелкие, но в сумме портят впечатление. Решение: внимательно корректируйте текст, используйте автоматические инструменты типографики (онлайн-типограф), изучайте правила набора.

• Чрезмерное выделение: когда новичок пытается выделить сразу много всего. Допустим, пол-жирного текста. Подчёркивает, курсивом и цветом – всё в одном абзаце. В итоге теряется сам акцент, да и выглядит пёстро. Следует избегать использования более одного способа выделения одновременно (не надо делать слово и жирным, и курсивом, и еще подчеркивать). Выберите один способ для определенного типа выделения и придерживайтесь его. И, конечно, выделять следует только ключевые моменты, а не каждое второе слово.

• Неправильное подчеркивание ссылок (для веб): часто новички оформляют гиперссылки, забывая про читабельность – например, синим по черному или подчеркивая текст, что мешает чтению букв (подчеркивание пересекает буквенные хвосты). Лучше использовать цвет/жирность вместо прямого подчеркивания, или хотя бы сделать цвет достаточно контрастным.

Перечисленные ошибки достаточно типичны. Хорошая новость: их легко избежать, если знать о них. Каждый раз, завершая работу с текстом, просмотрите макет с точки зрения этих пунктов: не слишком ли мелко? Все ли отступы на месте? Нет ли лишних шрифтов и цвета радуги? Выравнивание верное? Если обнаружили что-то – исправьте.

Например, “слишком много шрифтов” – сразу сократить до двух. “Висячие предлоги” – заменить пробел на неразрывный или ручной перенос. “Стена текста” – разбить на абзацы, добавить интервал. “Капслок-параграф” – изменить стиль на обычный или капитель.

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

14. Как правильно использовать кавычки и тире в русском тексте?

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

Кавычки. В русском языке приняты кавычки-елочки: «…» (французские угловые кавычки). Они ставятся следующим образом: «открывающая кавычка» снизу (как двойная “ёлочка” влево), и »закрывающая« сверху (двойная “ёлочка” вправо). К сожалению, на клавиатуре нет отдельных клавиш для этих символов, поэтому многие по незнанию набирают на английской раскладке " или две одиночные «наоборот». Но в правильном тексте должны быть именно елочки. Например: *Мы читали рассказ «Кот и плотник». * – верно. А вариант "Кот и плотник" – неверно для русского оформления (такие кавычки используются в английском тексте).

Если внутри кавычек нужно еще кавычки (кавычки в кавычках), то внутренние ставятся как „лапки“ (немецкие кавычки). То есть: «Она сказала: „Привет“ и помахала рукой». Внешние – елочки, внутренние – лапки (выглядят как двойные запятые в начале „ и двойные кавычки наверху “ в конце).

Общие правила кавычек:

• Кавычка открывается без пробела перед следующим за ней словом (прилипает к слову). Закрывающая кавычка ставится непосредственно после последней буквы цитаты, и следующий за кавычками знак ставится уже после кавычки (если это знак препинания). Например: Он назвал это «невероятным случаем». Здесь закрывающая кавычка стоит перед точкой. Неправильно: «невероятным случаем ». – пробел перед кавычкой лишний.

• Если кавычки охватывают целое предложение, то точку ставят внутри кавычек. Если кавычки охватывают лишь слова, являющиеся частью предложения, точку ставят после. Пример: Он спросил: «Вы готовы выйти?». – вопросительный внутри, точка – снаружи.

• Для названий произведений, цитат, терминов – кавычки обязательны по контексту. Не выделяйте кавычками то, что не требуется (например, прямую речь лучше оформлять знаком тире, а не кавычками – это русская норма для диалогов).

Дефис и тире.

• Дефис (-) – короткая черточка, используется внутри слов и составных выражений: в сложных словах (научно-технический), в фамилиях (Римский-Корсаков), в некоторых случаях между цифрами без пробелов (диапазоны, см. ниже). Дефис никогда не отделяется пробелами с двух сторон (в отличие от тире).

• Тире (—) – длинная черта, используется:

  • В роли знака пунктуации между частями предложения (ставится с пробелами вокруг!). Пример: Время — деньги. Здесь вокруг тире пробелы.

  • В диалогах: — Привет, — сказал он. (в начале реплики тире с пробелом только после тире, перед словами).

  • В обозначении интервала: например, стр. 5—7 (тире между цифрами без пробелов). Обычно для диапазонов лет, страниц, время ставят короткое тире (среднее) или длинное тире без пробелов. В русском наборе принято все же без пробелов: 1914—1918 гг., 10:00—18:00. В шрифте Unicode есть специальный “средний” знак (en dash, –) для интервалов; можно использовать его, хотя большинство российских издательств просто ставят длинное тире без пробелов.

• В отличие от английского, в русском тире не заменяется двумя дефисами. Многие по незнанию пишут -- вместо тире, но в хорошей типографике следует ставить настоящий символ тире (—).

• Как набрать тире: В Word: Ctrl + Minus (на цифр. клавиатуре) обычно вставляет тире. В HTML: — entity. В MacOS: Option + Shift + -.

• Дефис на клавиатуре – это обычная клавиша “-” (минус), но важно не путать: там, где нужно тире, дефис не подходит.

• Если тире стоит в начале строки (при диалоге), за ним ставят пробел перед текстом. Если тире между словами как часть предложения – пробелы по обе стороны. Никаких запятых или точек сразу после тире быть не может (если надо, ставят их до или после пробелов, чтобы тире было отделено).

Неразрывный пробел. Упомянем также: короткие служебные слова (одно-буквенные предлоги и союзы) в русском тексте не оставляют на конце строки. Поэтому после них ставят неразрывный пробел. Например: “влесу”, “ине подумал” – между “в” и “лесу” должен быть неразрывный пробел. Иначе при переносе может получиться ситуация:

Буква "в" повисла отдельно – некрасиво. Неразрывный пробел (в HTML  , в Word: Ctrl+Shift+Space) связывает “в” со следующим словом, не позволяя разорвать строку. Это правило касается односимвольных союзов/предлогов (в, к, с, у, о, а, и) и аббревиатур типа г. (город), ул. (улица), ст. (страница) – их тоже желательно привязывать к следующему слову. Также инициалы: “И.И.Петров” – неразрывные между И. и И. и Петров, чтобы не уехало на другую строку.

Различие между дефисом и минусом. Для полного порядка: знак минуса в формулах – это отдельный символ (по длине примерно как тире, но другой по начальному кодированию). В тексте обычно не нужно, но если пишете математические выражения, старайтесь использовать правильный знак минуса (−, U+2212) – он длиннее дефиса и короче тире слегка. Впрочем, это тонкость.

Другие знаки:

• Многоточие. Правильно ставить символ … (U+2026) вместо трех отдельных точек. Это предотвращает разрыв.

• Символ параграфа § и номер № – при наборе их со словами тоже используют неразрывный: "§5", "№10".

• Скобки: открывающая скобка прилегает к следующему символу, закрывающая – к предыдущему, пробелы внутри скобок не ставятся (кроме особых случаев).

Итого советы:

1. Всегда используйте «ёлочки» для цитат и названий в русском тексте. В Word это часто автозаменяется: если поставить английские кавычки, они превращаются в елочки. Но если текст пришел из других источников, проверьте.

2. Отличайте тире (—) и дефис (-). Для пауз, пропусков сказуемого, противопоставлений ставьте тире с пробелами. Для частей слов – дефис без пробелов.

3. Не оставляйте одиночные буквы-предлоги на строке – ставьте неразрывный пробел.

4. Проверяйте текст на “висящие” знаки препинания: пунктуация (запятая, точка, двоеточие) никогда не остаются в начале новой строки – они привязываются к предыдущему слову (обычным пробелом, оно и так привязано). А вот открывающие кавычки или скобки – не остаются на конце строки: лучше сделать неразрывный пробел перед ними (но обычно проще перенести слово целиком).

5. После знаков тире, многоточия – соблюдайте нужные пробелы согласно правилам.

Пример правильного оформления:

• Неправильно: "Она сказала - "Привет"." – Здесь кавычки неправильные (англ.), тире короткое и без пробелов, кавычки внутри тоже кривые, точка не на месте.

• Правильно: Она сказала: — «Привет».

  • Здесь для прямой речи лучше вообще двоеточие и тире (стиль оформления диалогов),

  • открывающая елочка сразу перед Привет,

  • закрывающая после Привет перед кавычками лапками,

  • точка за закрывающими кавычками,

  • тире оформлено как длинное и с пробелом после.

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

Главное – соблюдайте элементарные нормы:
«Правильные русские кавычки», длинное тире вместо дефиса там, где надо, пробелы – где должны быть, и неразрывные – где нельзя разрывать. Эти детали сделают ваш текст профессионально аккуратным². Многие редакторы (например, Microsoft Word, Adobe InDesign) умеют автозаменять кавычки и тире, если настроены на русский язык. Но всегда проверяйте: особенно при копипасте из разных источников можно нахвататься неправильных символов.

Настоящий мастер типографики видит разницу между “и” и «и», между - и —, и следит за такими нюансами. Постепенно и вы привыкнете, и правильное использование кавычек и тире станет для вас нормой.

15. Какие онлайн-курсы по типографике есть на платформе «Учись Онлайн Ру» и как выбрать подходящий?

Платформа «Учись Онлайн Ру» представляет собой агрегатор, где собраны курсы от разных онлайн-школ и образовательных проектов. В разделе курсов по типографике там можно найти десятки программ – от базовых до продвинутых. В 2025 году на агрегаторе были представлены лучшие предложения от ведущих школ: например, курсы от Skillbox, Нетологии, Contented, XYZ School, Bang Bang Education и других⁹.

Вот примеры курсов, которые можно встретить на «Учись Онлайн Ру» (актуальные на момент 2025 года):

• «Шрифт в дизайне» (Skillbox) – курс длительностью ~2 месяца, ориентирован на практическое применение типографики в графическом и веб-дизайне¹³. В программе видеолекции, задания с обратной связью, итоговый проект с защитой.

• «Основы типографики» (от одной из дизайн-школ) – базовый курс, где изучаются правила набора, сочетание шрифтов, принципы верстки текста. Часто рассчитан на новичков, длительность 1-2 месяца.

• Курсы по Adobe InDesign с упором на типографику – некоторые программы (например, курс Hedu по InDesign¹³) учат работе в профильном ПО, включая правила книжной верстки, микро-типографику, работу со стилями.

• Специализированные курсы: например, по веб-типографике (UX/UI аспектам), по созданию шрифтов (леттеринг и type design), по каллиграфии как основа понимания формы буквы.

• Bang Bang Education предлагал курс "Типографика: о форме и содержании" – тоже популярная программа с сильным уклоном в дизайн и творческое применение шрифта.

На «Учись Онлайн Ру» агрегированы как платные, так и иногда бесплатные курсы. Платформа удобна тем, что у каждого курса можно посмотреть рейтинг, отзывы учеников, сравнить программы и цены⁹.

Как выбрать подходящий курс по типографике? Вот несколько советов:

1. Определите свой уровень и цели. Вы новичок, который только хочет освоить основы верстки текста? Или вы уже дизайнер, желающий углубить навыки? Если вы совсем начинающий, ищите курсы с пометками “базовый курс”, “для начинающих”. Например, курс “Основы типографики” или “Типографика для веб-дизайнеров с нуля”. Если вы уже имеете базу, возможно, имеет смысл пойти на более узкую тему – например, “классическая книжная верстка” или “создание шрифтов”.

2. Изучите программу курса. Обратите внимание, какие темы покрываются. Хороший базовый курс должен охватывать: историю шрифта (кратко), классификацию шрифтов, правила набора (интервалы, выравнивание, переносы), принципы композиции текста, сочетание гарнитур, практические задания по верстке макетов. Если курс упоминает конкретные проекты, которые вы сделаете (например, сверстаете журнал, разработаете постер с типографикой) – это плюс. Смотрите, чтобы содержание соответствовало вашим интересам. На “Учись Онлайн Ру” удобно: там часто дают силлабус курса и можно сравнить несколько курсов между собой.

3. Длительность и формат. Курсы бывают интенсивные короткие (несколько недель) или длинные с глубокой проработкой (3-6 месяцев). Подумайте, сколько времени вы готовы уделять. Онлайн-формат обычно предполагает видеоуроки + практические задания + обратная связь от наставника. Некоторые дают записи лекций, другие – живые вебинары. Например, Skillbox обычно проводит обучение через записанные модули плюс проектная работа, а BangBang – в формате интенсивных живых воркшопов. Выберите, что вам комфортнее.

4. Преподаватели и отзывы. Посмотрите, кто ведет курс – их опыт в типографике, проекты. Известные специалисты (например, Илья Рудерман, Юрий Гордон – это топ конечно, но если в курсе есть занятия от таких, это круто) или практикующие дизайнеры с хорошим портфолио. Отзывы учеников – ценнейший источник. На “Учись Онлайн Ру” прямо есть рейтинги и отзывы реальных студентов¹³. Почитайте их: хвалят ли подачу, понятность, поддержу, критикуют ли что-то.

5. Сравните цены и условия. Курсы варьируются от бесплатных вебинаров до дорогих комплексных программ. Бюджет: решите, сколько вы готовы вложить. На агрегаторе можно увидеть цены и даже бывают скидки или акции. Например, Skillbox часто предлагает рассрочку или скидки (на сайте агрегатора даже указано – видели “Скидка 25%” у курса¹³). Но цена – не единственный критерий: часто дорогие курсы содержат больше практики и наставничества. Если финансы ограничены, можно поискать короткие курсы или те, которые проводит, скажем, библиотека школ (иногда Contented или др. делают относительно доступные программы).

6. Проверить выдаваемый документ и карьерные возможности. Если это важно: некоторые курсы дают сертификат установленного образца. Для фрилансера или личного развития это не принципиально, но для кого-то плюс. Также узнайте, помогает ли школа с трудоустройством (Skillbox, Нетология обычно помогают, но для конкретно курса типографики – вопрос, скорее он как доп.скилл для дизайнеров).

7. Формат обратной связи и домашние задания. Очень желательно, чтобы на курсе были практические задания с проверкой. Типографика – навык, требующий практики: сверстать макет, оформить плакат, провести шрифтовой анализ и т.д. Лучше выбрать курс, где есть наставник или проверяющий, кто укажет на ваши ошибки (например, неправильно интерлиньяж, не те отступы, “висящие” буквы и т.п.). По описанию курса и отзывам можно понять, дают ли фидбек или это чисто теоретические лекции.

8. Время и расписание. Убедитесь, что режим занятий вам подходит. Одни курсы с фиксированным расписанием (например, вебинар каждый вторник и четверг 19:00), другие – в свободном темпе (сами проходите уроки, но надо сдать проект к дедлайну). Если вы работаете, гибкий график может быть удобнее.

На «Учись Онлайн Ру» удобная функция – можно добавить курсы к сравнению, а также увидеть подборку “Все онлайн-курсы по типографике в 2025 году”⁹ – там сводная информация. Также есть рейтинги школ (например, Skillbox – 4.7/5 с 59 отзывами¹³, Hedu – 4.5 с отзывами¹³). Это позволяет оценить общую надежность.

Пример выбора:
Допустим, вы – начинающий веб-дизайнер, хотите подтянуть именно веб-типографику. На платформе находите:

• Курс А: “Типографика в веб-дизайне” от Нетологии, 2 месяца, по отзывам довольно практичный.

• Курс B: “Основы типографики” от Contented, 1 месяц, базовый, много про печать, основополагающий.

• Курс C: “Креативная типографика” на Udemy (кстати, агрегатор может и Udemy показывать), но на английском и без проверки.
  Вы, вероятно, выберете курс A или B. Смотрите программу: если вам важно именно веб, курс A (если он покрывает адаптивную типографику, CSS, читабельность на экранах) – ваш вариант. Если хотите сначала общий фундамент – курс B тоже хорош, но он про всё понемногу. Также смотрите время: B – короче и дешевле, A – дольше, но может глубже.

При выборе курса учитывайте:

• Наличие портфолио-проекта. Хорошо, если по окончании у вас будет что показать (например, сверстанный буклет, разработанный шрифт, кейс с переработкой типографики сайта).

• Поддержка сообщества. Некоторые школы дают доступ к чату студентов, где можно задавать вопросы.

• Обновленность. Типографика – довольно традиционная тема, но всё же лучше курс, обновленный под современные реалии (например, учитывает variable fonts, тонкости типографики для ретины, etc.). Дата последнего обновления курса можно уточнить.

Вкратце: на «Учись Онлайн Ру» собраны актуальные курсы по типографике от разных школ, они для удобства сравнения по длительности, стоимости, отзывам⁹. Чтобы выбрать подходящий, определитесь с вашим уровнем и потребностями, читайте программу и отзывы, обращайте внимание на преподающих экспертов и формат обучения. Не стесняйтесь воспользоваться фильтрами на сайте (например, можно отсортировать “по рейтингу отзывов” или “по возрастанию цены”¹³, чтобы сразу увидеть топовые или доступные варианты). Хорошо выбранный курс поможет структурировать ваши знания в типографике и отточить навыки под руководством профессионалов, что здорово ускорит ваше развитие как дизайнера.

16. Чем отличается типографика в веб-дизайне от типографики в печати?

Типографические принципы едины в основе – и на бумаге, и на экране важно обеспечить читабельность и эстетичность текста. Но веб-дизайн и печатная верстка накладывают свои особенности и ограничения. Вот ключевые отличия веб-типографики от печатной:

• Разрешение и рендеринг. Печатный текст (на качественной полиграфии) имеет высокое разрешение – фактически, глаз различает тонкие детали шрифта. В вебе долгое время экраны были низкого разрешения (72-96 DPI), из-за чего мелкие детали, например, засечки у шрифтов, отображались плохо (они могли “размываться” или делать буквы грязноватыми). Поэтому исторически на экранах предпочитали шрифты без засечек для основного текста – они казались четче³. Сейчас экранные DPI выросли (ретина-дисплеи и т.д.), и засечки уже отображаются лучше, но привычка осталась: на сайтах чаще основной текст – гротеск (Arial, Roboto, etc.), а антиквы используются для декоративных заголовков или в случаях, когда стиль этого требует. В печати наоборот: традиционно длинные тексты набираются гарнитурами с засечками, как более привычными для чтения на бумаге.

• Адаптивность и изменяемость размеров. В вебе пользователь может изменить масштаб страницы, просматривает на разных устройствах (desktop, tablet, mobile) – типографика должна быть гибкой. Веб-дизайнер закладывает относительные единицы (em, rem, %), использует медиазапросы для разных экранов. Например, на десктопе может быть размер шрифта 16px, на мобильном – 18px для того же текста, чтобы с близкого расстояния читать было удобно. В печати размер фиксирован: книга или журнал напечатаны, читатель не может “зумировать” текст. Дизайнер печатный выбирает один компромиссный кегль. Веб-типографика требует учета различных сценариев (от большого телевизора, где текст не должен быть слишком мелким на большом расстоянии, до маленького смартфона, где нужно чуть увеличить межстрочный интервал). Понятие responsive typography здесь ключевое.

• Выбор шрифтов и ограничение шрифтовых семейств. При печати дизайнер свободен использовать любой шрифт, какой есть лицензия и доступ: он внедряется в макет и печатается. В вебе долгое время были ограничение “безопасных шрифтов” (Arial, Times, Georgia, Verdana, Tahoma) – потому что шрифт отображался только если установлен у пользователя. Позже появились веб-шрифты (подгрузка через @font-face, Google Fonts и т.д.), и теперь выбор расширился. Но все равно веб-дизайнер думает о весе файлов: подключение большого количества шрифтовых файлов влияет на скорость загрузки. Поэтому обычно в вебе ограничиваются 1-2 гарнитурами, и стараются брать не слишком тяжелые (Google Fonts даже показывает, сколько КБ весит набор). Печатному дизайнеру “вес” шрифта неважен. Также, печать позволяет применить хитрые эффекты с шрифтами (специфичные лигатуры, кернинг вручную каждую пару) – на экране не все OpenType-функции поддерживаются всеми браузерами. Например, тонкие шрифты на бумаге выглядят красиво, а на экране при плохом сглаживании могут “рваться”.

• Цвет фона и режим отображения. Веб-типографика часто предполагает чтение с подсветкой экрана. Это означает: белый текст на черном фоне – одно восприятие (светится сам текст), черный на белом (светится фон – подсветка бьет в глаза). Вечерние режимы (dark mode) – относительно новое требование: типографика должна быть гибкой к смене фона (многие сайты сейчас позволяют переключаться). В печати фон обычно стабильный (белая бумага или слегка тонированная). Контраст печатный – черный на белом – классика. На экране интенсивно белый фон (#FFFFFF) с черным текстом #000000 может казаться слишком резким контрастом (свет бьет). Часто веб-дизайнеры смягчают: делают темно-серый текст (#111 или #222) на чуть сероватый фон (#FAFAFA) для комфортности. Также инверсные тексты (светлый на темном) на экране более распространены, чем в печати (где большие массивы белого на черном печатать дороговато и сложнее). Но на экране белый текст на черном, особенно мелкий, может блестеть, излучение и глоустинг вокруг букв. Это влияет на выбор шрифта – обычно берут чуть более жирный шрифт для светлого текста на темном фоне (в CSS можно использовать text-rendering-настройки и т.д.).

• Единицы измерения и гибкость верстки. В печати пользуются пунктами, мм, традиционными размерам, фиксированными интервалами. В вебе – относительные единицы, проценты. Межбуквенное расстояние (кернинг) в печати можно подправлять вручную хоть для каждой пары, в вебе кернинг автоматически из шрифта, а ручной контроль – только через CSS letter-spacing (что скорей трекинг). Тонкая подгонка пары "VA" в макете InDesign – обычное дело, а в HTML вы же не будете каждую пару символов регулировать – нереально. Так что веб-типографика больше полагается на качественные шрифты с хорошим kern-таблицей и на автоматические алгоритмы браузера. И еще: переносы слов. В печати наборщик расставляет переносы по словарю, контролирует висячие строки. В вебе долго переносов не было вовсе (браузеры не умели), теперь через CSS hyphens: auto можно включить (при указании языка), но поддержка и качество переносов могут быть неидеальны. Поэтому веб-дизайнер либо избегает justify (чтобы не было нужды), либо мирится с не идеальным переносом. А в печати обязателен ручной контроль за “висячей строкой” или “лишним переносом”.

• Интерактивность и доступность. Веб-текст может масштабироваться (Ctrl+ или pinch zoom), пользовательские настройки (некоторые выбирают свой шрифт для чтения в браузере). Также в вебе важно учитывать Accessibility (доступность): например, возможности слабовидящих – возможно, они увеличат шрифт, или используют скринридеры (тогда вообще важно семантически правильно размечать заголовки и списки). Печатный текст тоже бывает адаптирован (книги с крупным шрифтом), но это отдельные издания. В вебе ваш единый контент должен уметь приспосабливаться.

• Динамичность контента. Веб-текст – часто обновляемый, генерируемый (например, статей на сайте может быть тысячи с разной длиной). Печать – статичный макет. Так, веб-типографика должна справляться с непредсказуемыми длинами заголовков, многообразием экранов. Еще момент: системы шрифтов – разные ОС рендерят чуть по-разному (были различия ClearType vs Apple’s rendering – Windows делал легкую жирность, Apple – ровно). Печатнику об этом не надо думать – у него есть один выход.

• Классификация шрифтов для экрана. Раньше выделяли понятие Web-safe fonts, Screen fonts (гарнитуры, созданные специально под пиксельную сетку, напр. Verdana). Сейчас при высоких DPI, эти различия стираются – фактически почти любой шрифт может быть веб-шрифтом (если имеется файл для web). Однако, веб-дизайнеры до сих пор особо подходят: например, слишком тонкие display-шрифты могут на некоторых экранах плохо читаться, потому избегают их для мелкого текста на сайте.

• Принципы вёрстки: Печатная полоса может использовать выклинку, выравнивание сетки по базовым линиям (baseline grid) – прямо священный грааль журнальной верстки, чтоб на развороте строки строго напротив друг друга. В вебе baseline grid реализовать крайне сложно (из-за динамики контента). Веб-типографика чаще использует гибкую модульную сетку (grid CSS, flexbox) для расположения блоков, но точное совмещение базовых линий параграфов в разных колонках – редко достижимо. При резиновом дизайне это почти невозможно, когда пользователь может фонтсайз изменить. В общем, веб-типографика менее "точна" из-за этого. Зато веб позволяет анимации текста, интерактив (например, наведение меняет шрифт или цвет) – чего нет в печати.

Коротко:

• В печати: фиксированные параметры, полная контроль, высокое разрешение => тонкие детали, антиквы ок, переносы ручные, итог – “то, что видишь – то и получишь”.

• В вебе: вариативность среды (разные экраны, масштаб), ограничение выбором веб-шрифтов, требования к быстродействию, особенности рендеринга (сглаживание), необходимость адаптивности. Типографика должна быть эластичной.

Конечно, принципы хорошие одни: и там, и там нужны контраст, иерархия, баланс белого пространства. Но подходы отличаются: печатный дизайнер часто думает о эстетике и традициях (например, отступ красной строки в художественной книге, выравнивание страницы по середине блока), веб-дизайнер – о удобстве UI (напр., часто веб-статьи вообще без абзацных отступов, вместо этого – вертикальные интервалы между абзацами, потому что на экране так привычнее).

Скажем, журнальная верстка часто выравнивает текст в колонках по обе стороны (justified) – с тонкой настройкой переносов, и выглядит строго. Веб-статья обычно выровнена по левому, т.к. justify без идеальных переносов даёт рваные промежутки.

Еще пример: шрифтовые эффекты: в печати можно использовать повышенную или пониженную кегль для капитель/индексов, в вебе – тоже можно CSS (vertical-align), но нужно быть осторожным, браузеры могут по-разному считать.

Выбор единиц: печать – пункты, квары; веб – px, em.

Веб-типографика становится более совершенной: появляются CSS-свойства fine-tuning: font-feature-settings (включать лигатуры, альтернативные глифы), variable fonts – можно анимировать изменение веса. То есть, какие-то вещи, невозможные в печати (анимация), наоборот, вебу доступны.

Вывод: Типографика на экране отличается большей гибкостью и требованиями к технологичности. Приходится учитывать технические факторы: совместимость шрифтов, рендеринг разных браузеров, адаптивность. А типографика в печати – более “консервативна” и детально контролируема: один раз настроил и оно так и выйдет из печати.

Хороший дизайнер умеет подстраивать свои решения под среду. Например, одну и ту же статью при публикации в журнале он сверстает с одними нюансами (антиква, выравнивание, чёткая сетка), а на сайте – чуть по-другому (гротеск, свободнее верстка, крупнее шрифт). Цель одна – комфорт читателя – но средства достижения в вебе и печати частично разнятся.

17. Что такое модульная сетка и зачем она нужна при вёрстке текста?

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

При верстке текста модульная сетка играет огромную роль:

• Она определяет ширину колонок, количество столбцов, величину полей и промежутков (межколонники). Например, типичная книга может иметь сетку из одного столбца текста с определенными полями, а журнал – сетку из 2–3 колонок, по которой располагаются тексты и изображения.

• Сетка задаёт ритм верстки: постоянные отступы абзацев, высоту строк, интервалы до заголовков и после них. Благодаря сетке все однотипные элементы страницы (например, все подзаголовки) будут на одинаковом расстоянии от предыдущего текста, а колонки текста на соседних страницах будут идти ровно друг напротив друга.

Зачем сетка нужна:

1. Упорядоченность и чистый дизайн. Когда используется сетка, все элементы ложатся “на свои места”. Это делает дизайн целостным, профессиональным. Без сетки элементы могут смещаться случайным образом, и глаз чувствует хаос даже подсознательно. Сетка обеспечивает единую основу: скажем, все изображения шириной ровно 2 колонки, все цитаты занимают одну колонку и позиционируются на фиксированную высоту, текст выровнен по определенной линии. Это как скелет для страницы.

2. Ускорение и облегчение работы дизайнера. Имея сетку, не нужно каждый раз “от руки” вымерять отступы. Это экономит время при верстке многополосных изданий или множества экранов. Модульная сетка рационализирует процесс: вы знаете, что у вас, например, 12-колоночная сетка (распространено в вебе), и решаете, что текстовый блок занимает 6 колонок, картинка – 6 колонок, на мобильном эти 6+6 станут 12 (подряд) и т.д. Без сетки прийти к адаптивной стройности сложнее.

3. Гармония и эстетика. Сетка позволяет заложить пропорции: многие сетки проектируются на основе определенных пропорциональных отношений (часто – золотое сечение, или простые соотношения). Например, классическая гарнитура “Живая” книг – пропорциональные поля (например, верхнее поле : нижнее : внутреннее : внешнее = 2:3:2:4). Сетка поддерживает эти пропорции, и страница выглядит приятно глазу, даже если читатель не понимает почему. И наоборот, нарушение ритма сразу чувствуется.

4. Единообразие в многостраничных проектах. Представьте журнал: десятки страниц, разные рубрики. Сетка позволяет сохранить единый стиль – независимо от того, разная ли длина статей, вставлены ли картинки. Все равно компоненты привязаны к одной системе модулей. Например, любой заголовок всегда начинается вверху колонки, а подпись к фото всегда на 2 мм ниже самого фото – потому что сетка так задана. Это облегчает восприятие: читатель, листая, не испытывает “дизайнерского диссонанса” – все страницы как родные сестры.

Что представляет собой модульная сетка конкретно?
Она включает:

• Колонки – вертикальные деления страницы. Может быть 1, 2, 3, 4… 12, etc. Колонки определяют ширину текстовых блоков. Например, газета может иметь 6-колонную сетку (узкие колонки).

• Строки (ряды, baseline grid) – горизонтальные линии, часто привязанные к базовой линии текста. Например, можно настроить baseline grid с шагом 14 pt – и тогда все строки текста всех колонок будут ложиться на эту решетку, выравниваться горизонтально¹⁴. Это особенно важно для печати: когда перелистываешь, тексты на обеих страницах на одном уровне.

• Модули – пересечение колонок и строк образует прямоугольные модули. Например, сетка 4 колонки и с 5 горизонтальными делениями даст 20 модулей. Модуль – мелкий “кирпичик”, на основе которого компоненты могут занимать несколько модулей в ширину/высоту.

• Поле – отступы от края страницы. Сетка “внутри” полей располагается.

• Интервалы: межколонные промежутки (журнальный термин “кегельные пробелы” для межстрочного, но в сетке – просто gutter). Сетка фиксирует эти интервалы тоже, чтобы равные расстояния между колонками были.

Пример: Скажем, мы делаем сетку 3 колонки на странице А4. Между колонками – 5 мм. Поля: верхнее 20 мм, нижнее 15 мм, внутреннее 15, внешнее 20. На такую сетку можно верстать: текст в 2 колонки (тогда он займет 2 из 3 колонок сетки, а третья может быть для каких-то заметок), или на всю ширину (занять все 3 – тогда он будет как одна широкая), или, скажем, разместить фото на ширину 1 колонки, текст рядом на 2. То есть сетка обеспечивает вариативность, но в рамках структуры.

В веб-дизайне тоже применяются сетки (Bootstrap grid, 12-col grid – это про то же). Там сетка помогает расположить элементы адаптивно. Например, типовой сайт: 12-колоночная сетка: на десктопе меню занимает 12 колонок (всю ширину), контент – тоже 12, или контент 8 + сайдбар 4, на планшете может 6+6, на мобильном всё 12 (стек). Эта сетка “под капотом” CSS frameworks позволяет сохранить порядок и равномерность.

Для текста: модульная сетка помогает формировать единый базовый размер (например, модуль = базовый интервал = 4 мм, отступы кратны этому). В итоге контент выстраивается с равными ритмами – так называемый вертикальный ритм. Это особенно заметно в длинных текстах: правильный вертикальный ритм – когда расстояния между заголовком и следующим текстом, между абзацами – согласованы. Сетка задает эти расстояния кратно.

Почему это важно читателю: попробуйте прочитать документ без отступов, без структуру – тяжело. Сетка же “подсказывает” глазу, где начинается новая мысль, где кончается блок. На подсознательном уровне равные отступы помогают предсказать: ага, вот здесь конец раздела, дальше будет заголовок (открыто больше пространства – как будто “вздохнули”). Без сетки можно случайно сделать, что один заголовок прижат близко к предыдущему текста, а другой – далеко, и читатель может спутать, к чему заголовок относится.

Итого: Модульная сетка – инструмент дизайнера для достижения упорядоченности, консистентности и удобства при верстке. Она:

• Экономит время (вы не “на глаз” ставите элементы, а по линейке),

• Делает дизайн аккуратнее (ничего не съехало случайно),

• Позволяет легко вводить новые элементы (вы сразу знаете, что, скажем, иллюстрация шириной 2 модуля будет красиво вписываться между текстом, потому что сетка предусмотрела такие ситуации),

• Помогает многим людям работать над макетом (если есть четкая сетка, любой член команды понимает правила расположения).

В книжном деле сетки используют веками (правда, там больше говорят о форматах полосы, полях и т.д.), а в современном графдизайне тема модульных сеток особенно развита швейцарскими дизайнерами (Йозеф Мюллер-Брокманн написал книгу “Модульные сетки в графическом дизайне”¹⁴). Там перечислены 8-, 12-, 16-колоночные сетки и их примеры.

При верстке текста без сетки есть риск, что страницы будут отличаться, текст будет “плавать”. Сетка – как невидимая подпружиненная сеточка, которая держит все элементы на своих местах. Конечно, сетку обычно не видно на конечном макете (она вспомогательная), но ее присутствие ощущается в качестве верстки.

Таким образом, модульная сетка – незаменимый инструмент для любого верстальщика и веб-дизайнера, стремящегося к структурности и ритму в оформлении текста. Она делает дизайн предсказуемым и логичным, облегчает чтение, потому что глаз движется по стройной композиции, а не хаотично прыгает в поисках начала следующего абзаца.

18. Какие части буквы (анатомия шрифта) стоит знать начинающим?

Каждый шрифт (особенно в латинском и кириллическом алфавитах) имеет определенную внутреннюю структуру – “анатомию” букв. Знание терминов и элементов, из которых состоят знаки, помогает лучше понимать различия между шрифтами и осмысленно о них говорить. Вот основные части букв и понятия, с которыми стоит познакомиться новичку:

• Базовая линия – воображаемая линия, на которой “стоят” буквы. Все символы в строке выровнены по этой baseline. Строчные буквы с прямыми низами (например, “о”, “н”) касаются базовой линии. Базовая линия – отправная точка для измерения высот и интерлиньяжа.

• Высота строчных букв (x-height) – также называют средняя линия – это высота малых букв без выносных элементов, измеряется обычно по высоте буквы “x” (отсюда название x-height). По-русски иногда говорят “корпусная высота строчных”. Эта величина очень важна: шрифты с большим x-height выглядят более крупными и читаются легче в малых кеглях (потому что основная масса букв выше). Высота строчных – расстояние от базовой линии до вершины, скажем, буквы “е” или “о”. У разных гарнитур x-height может сильно различаться даже при равном кегле.

• Прописные (заглавные) линии:

  • Высота прописных (cap height) – высота больших букв (капитальных) от базовой линии до вершины, например, буквы “H” или “Б”. Обычно прописные чуть выше, чем строчные с выносными (см. ниже), но бывают нюансы.

  • Верхняя выносная линия (ascender line) – уровень, до которого доходят выносные части строчных букв вверх. Например, у буквы “б” или “d” (в латинице) есть палочка, торчащая вверх над x-height; она достигает ascender line. Часто ascender line совпадает с высотой заглавных, но не всегда – в некоторых шрифтах строчные выносные выше или ниже заглавных.

• Нижняя выносная линия (descender line) – уровень, до которого опускаются выносные элементы вниз. Например, “у” кириллическая опускает хвост ниже baseline, “p” латинская – тоже. Descender line отмечает самый низ этих элементов. Промежуток между descender line и baseline должен учитываться при межстрочном интервале, чтобы буквы с нижними хвостами одной строки не столкнулись с верхними элементами следующей строки.

• Выносные элементы (Ascenders и Descenders). Соответственно:

  • Верхние выносные штрихи – части строчных букв, выступающие выше x-height. Примеры: латинские b, d, f, h, k, l; кириллические б, д, т (в рукописных часто есть верхние элементы).

  • Нижние выносные штрихи – части, уходящие ниже базовой. Примеры: латиница g, j, p, q, y; кириллица у, ф, щ (в печатных формах у щ небольшой хвост).

• Засечки (Serifs) – маленькие “ножки” или окончания штрихов у шрифтов с засечками. Различают верхние засечки (на вершинах букв, напр. у “Т” черточки по концам) и нижние засечки (на основании, напр. у “Н”). Форма засечек – ключевая особенность антикв: бывают острые (как у Times), плоские (как у Didot), скругленные и т.п. Например, буква “К” с засечками: у нее на концах ножек – засечки, а без засечек – просто прямые обрубки.

• Основной штрих и соединительные штрихи. У букв обычно есть вертикальные или наклонные основные стержни (stems) – например, в “Н” две вертикали – это основные штрихи. А горизонтальная перекладина – перекладиной называется (crossbar). В “А” – два наклонных ствола и горизонтальная перекладина.

  • Ось (axis) – во многих шрифтах есть неявная ось контраста, напр. у классических антикв овал буквы “О” толще по одной оси и тоньше по другой; ось эта может быть вертикальной или наклонной (в старостильных шрифтах ось наклонена, наследие пера).

  • Штрихи: различают вертикальные, горизонтальные и криволинейные. Например, у “S” – изогнутый штрих.

• Внутренний просвет (Counter) – это пространство внутри буквы, ограниченное ее очертанием. Например, у “О” – внутренний белый овал; у “Б” – два внутренних просвета (вверху и внизу). Различают закрытые просветы (fully enclosed, как в О, А, Д) и открытые (например, в “C” внутреннее пространство открыто с одной стороны). Размер и форма контрформ сильно влияют на узнаваемость буквы и на плотность текста. Шрифты с большими counter (широкие открытые формы) обычно более легки для глаз.

• Ширина знака и пропорции. Стоит знать, что буквы имеют разную ширину: есть узкие знаки (например, “л” узкая, “i” латинская), есть широкие (Ш, W). У гарнитур бывает разная относительная ширина букв – это влияет на tracking по умолчанию. Есть понятие “контраст штрихов” – это разница между толщиной толстых и тонких элементов. Например, у классической антиквы контраст высокий (тонкие элементы очень тонкие, толстые – существенно толще), у гротесков – контраст минимальный (все штрихи примерно одинаковой толщины). Новичок должен понимать этот термин, т.к. “контрастный шрифт” как правило про антиквы Didone, а “малоконтрастный” – про линейные (sans-serif).

• Элементы букв:

  • “Хвосты” (tail) – например, хвостик у буквы “Q” (латинской) или у кириллической “Ц” – выступающая диагональ вниз.

  • “Ухо” (ear) – так называют маленький элемент у буквы “g” – крошечный завиток в верхней правой части.

  • “Петля” (loop) – нижняя часть двойной строчной “g” (в гарнитурах типа Times, строчная g имеет петлю внизу).

  • “Спур” (spur) – маленький выступ, напр. у строчной “u” может быть шипик с правой стороны внизу.

  • “Аппроксимация очка” – сам силуэт буквы, но эти детали можно глубже не лезть сейчас.

• Соединения и форма окончаний. В кириллице важна форма соединения элементов, напр. у “Л” низ может быть острым углом или закругленным. У “У” хвостик может соединяться остро или плавно. Эти детали – часть анатомии:

  • Выемки (ink traps) – специально сделанные углубления в местах стыков, которые помогают при маленьких размерах не сливаться чернилам (в шрифтах для печати на плохой бумаге).

  • Концевые элементы – бывают с засечками, без, скругленные окончания (как у Helvetica буква “с” – скругленный конец).

Новичку не обязательно сразу запоминать все названия (их десятки: апертура, ост, контраст, вершина (apex) буквы A – острие наверху, основание (vertex) – нижнее острие у V, etc. Однако основные:

• Baseline (базовая линия), x-height (высота строчных), ascender/descender (выносные части), serifs (засечки), counter (внутренний просвет), stem (основной штрих), stroke (штрих вообще), капля (teardrop terminal – например, у окончания “a” или “j” каплевидная форма) – хотя бы концептуально понимать.

Зачем знать анатомию букв:
Когда обсуждаете шрифт, будет понятнее: скажем, “Этот шрифт имеет высокий x-height и короткие выносные элементы – значит, он компактный по вертикали, но буквы крупно выглядят” или “У гарнитуры Helvetica закрытые апертуры (о чем речь: например, буква “с” у Гельветики довольно закрыта, а у Gill Sans – более открыта) – это влияет на читаемость”. Или: “Этот шрифт – низкоконтрастный, с грубыми прямыми засечками (slab serif)”. Так и описываются отличия.

При самом наборе текста анатомия подсказывает, например: “Почему эта гарнитура хуже читается в малом размере?” – посмотри анатомию: о, у нее x-height маленький, зато выносные большие – строчные буквы невысокие, а разлет по выносным – глаза “прыгают”. Или “Почему этот шрифт кажется таким элегантным?” – у него тонкие засечки, высокий контраст, апексы острые – выглядит изящно.

Зная анатомию, легче учиться дизайну шрифтов. Хотя новичку не обязательно самим рисовать буквы, понимание, как они устроены – основа, чтобы грамотно подбирать и комбинировать шрифты. Например: не сочетайте два шрифта с слишком разными x-height на одной линии – они визуально будут прыгать.

Кстати, у кириллицы есть специфические части:

• “перекладина” (например, у Т, Г),

• “ножка” (вертикальный элемент у Р),

• “дуга” (кривая часть у Э, С),

• “широкая часть” (у Щ горизонтальная по низу – называют “подошва” иногда),

• “складка” (у буквы Л угол),

• “хвостовик” (у Ц или У).

Резюмируя: Основные элементы букв, которые стоит знать новичку, включают:

• Линии измерения: базовая, высота строчных (x-height), верхняя/нижняя границы выносных, высота заглавных.

• Выносные штрихи верхние/нижние.

• Засечки (serifs) – отличать шрифт с засечками от беззасеч., знать типы засечек.

• Основные штрихи и соединения: вертикали, горизонтали, наклонные, перекладины.

• Внутренние просветы (counters) – размер пространства внутри букв.

• Конечные элементы (terminal) – форма концов линий (скругленные, с засечкой, острые).

• Оттенок шрифта (количество контраста, общий “серый” цвет текста – это уже взаимодействие анатомии всех букв).

Разобравшись в “анатомии” шрифта, вы начинаете видеть буквы не просто как абстрактные знаки, а как совокупность форм и элементов. Это поможет в дальнейшем более осознанно подходить к типографике – ведь как в анатомии человека знание костей и мышц нужно врачу, так дизайнеру знание строения букв нужно, чтобы “лечить” текст (улучшать его внешний вид и удобство).

19. Как цвет текста и фона влияет на читабельность?

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

Основные моменты влияния цвета на читабельность:

• Высокий контраст = лучшая читабельность. Самая понятная ситуация: черный текст на белом фоне – максимальный контраст (черное и белое). Такой вариант обычно обеспечивает наилучшую разборчивость: темные буквы четко выделяются на светлом. Именно поэтому традиционно книги печатаются темным шрифтом на светлой бумаге. Аналогично, белый или очень светлый текст на черном фоне тоже дает сильный контраст, хотя там вступают другие эффекты (о них ниже). В общем случае, чем больше различие в яркости и оттенке текста и подложки, тем легче читать^{15 10}. Специальные рекомендации для веб-доступности (WCAG) требуют коэффициент контрастности минимум 4.5:1 для обычного текста¹⁰ – это как раз примерно черный на белом или чуть смягченные тона.

• Низкий контраст = плохая читабельность. Ситуации, когда цвет текста недостаточно отличается от цвета фона, резко ухудшают восприятие. Примеры: серый текст на чуть более светло-сером фоне (светло-серый на белом), бледно-желтый текст на белом, красный на черном (кстати, красный на черном тоже не очень контрастен, особенно если красный не яркий, он темным кажется). Глазу приходится напрягаться, “вылавливая” буквы. Часто встречаемая ошибка новичков – использовать стильный приглушенный цвет текста на слегка отличающемся фоне (например, #999999 на #FFFFFF – сероватый на белом) – выглядит возможно эстетично, но читать долго такой текст трудно. Если контраст ниже определенного порога, текст вообще может сливаться с фоном – например, ярко-зеленый на чуть менее ярко-зеленом – катастрофа, текст исчезает.

• Цвет фона и подсветка. Есть разница: темный текст на светлом фоне vs светлый текст на темном фоне. В печати классика – темный на светлом. На экранах многие сейчас предпочитают темный режим, т.е. светлый текст на темном фоне. С точки зрения чистой контрастности, и то, и то может быть высоким контрастом. Но восприятие разное:

  • Темный текст на светлом фоне (традиционный режим). Глаз фокусируется на более темных объектов (буквах), фон яркий заливает периферию. При слишком ярком белом фоне, особенно на экране, может быть “пересвет” – фон бьет по глазам. Поэтому иногда лучше не чисто белый (#FFF), а слегка кремовый (#FAFAF0) фон – так глаза меньше устают. В печати часто бумага не идеально белая, а слегка желтоватая – для комфорта. В интернете аналог: некоторые сайты используют off-white background для больших текстовых полотен.

  • Светлый текст на темном фоне (инверсный режим). Здесь буквы сами светятся (на экране) или на бумаге это редкий случай (белая краска на черной бумаге). На экране белые буквы на черном фон могут создавать эффект сияния вокруг (гало-эффект) – немножко размытие возникает из-за пиксельного сглаживания, и потому зрение может напрягаться. Некоторые исследования утверждали, что длинные тексты чуть хуже читаются в инверсии, но в темной обстановке ночной режим наоборот лучше – меньше общего света. Поэтому многие приложения предлагают темную тему вечером, чтобы фон не слепил. В целом, при инверсии нужно возможно чуть увеличить толщину шрифта: тонкий светлый шрифт на черном может почти исчезать (за счет оптического восприятия – светлое кажется тоньше на темном фоне). Разработчики даже делают “light on dark” версию шрифта – например, Apple системные шрифты немного подстраивают жирность под тему.

• Цветовая комбинация и восприятие. Некоторые сочетания цветов хотя и контрастны по яркости, но создают дискомфорт из-за особенностей зрения. Пример: чисто синий текст на красном фоне – по яркости, возможно, сильно различаются, но глаза буквально вибрируют, очень неприятно (синий и красный – на разных концах спектра, фокусируются по-разному на сетчатке, возникает хроматическая аберрация). Красный текст на зеленом фоне – аналогично, хоть яркость может контрастна, эти цвета дополняющие, мозг их одновременно сложно обрабатывать (к тому же у некоторых людей частичная цветовая слепота на красно-зеленое). Пара “фиолетовый на черном” – контраст по яркости слабый (фиолетовый темный, почти сливается). Желтый на белом – очень плохо, оба светлые (яркость близка).

• Цвет и эмоциональное восприятие: Отдельный аспект – контраст не только про светлоту, но и про оттенок. Например, темно-синий текст на белом – контрастен, читается хорошо, но ощущается холоднее, чем черный. Темно-серый на бежевом – мягче для глаз, создает “бумажный” эффект. Тут уже вопрос эстетики. Однако в целом, первоочередное – достаточный контраст, а второе – уже подбор цветовой гаммы под дизайн.

• Рекомендации:

  • Для длинных текстов старайтесь использовать темный текст на максимально светлом фоне или наоборот, светлый на очень темном, и избегайте цветных фон+текст сочетаний, где оба цветные. Черный/темно-серый текст на пастельном или белом фоне – идеал по читабельности.

  • Если фон картинки или пестрый – под текст всегда подкладывают подложку (например, полупрозрачный темный фон под белым текстом), иначе текст потеряется.

  • Проверяйте контраст: есть инструменты, где вводишь цвет текста и фона – они выдают коэффициент. Например, WebAIM Contrast Checker¹⁶. Если он показывает fail (не проходит WCAG) – лучше подкорректировать цвета.

  • Особенно осторожно с цветным текстом на цветном фоне. Даже если они разные (например, ярко-синий на ярко-желтом – по яркости контрастен, но очень резкий, “рябит” – хотя, кстати, синий на желтом – контрастнейшее сочетание, используется на знаках дорожных, ибо видно издалека. Но для длинного чтения глаз устает от такого сильного цветного контраста).

  • Монохромные низкоконтрастные сочетания (серый на сером) – избегать. Иногда дизайнеры используют светло-серый текст (#AAA) на белом для второстепенных подписей – это можно, если шрифт достаточно крупный и текст короткий. Но основной текст лучше #333 или темнее на белом.

• Специальные условия:

  • Если читатель – с цветовосприятием особенностями (например, дальтоники), некоторые цветовые различия могут не восприниматься. Например, красный текст на зеленом фоне – для дальтоника может сливаться, т.к. он плохо различает красный и зеленый – будет серым “муаром”. Поэтому лучше не полагаться только на цвет. В интерфейсах, например, еще используют подписи, иконки. В контенте – просто избегать плохих сочетаний.

  • Освещение: текст на экране на улице под солнцем – нужен суперконтраст (черный на белом, никаких серых). В темноте – наоборот, слишком яркий фон плохо. Поэтому иногда есть динамические настройки: e-ink читалки, например, можно менять темы.

• Цвет фона страницы vs окружение: В печати обширные массивы черного фона с белым текстом могут бликовать, плюс бумага может просвечивать – поэтому книги почти всегда черным по белому (экономика тоже – черной краски меньше надо, чем заливать фон).

Подытожим:
Для наилучшей читабельности текста нужно обеспечить четкий контраст – достаточно разницу в светлоте цветов текста и фона. Чёрный текст на белом фоне – эталон читабельности⁹, потому что контраст максимален и привычен. Любые дизайнерские отклонения должны контролироваться: убедитесь, что текст все еще легко различим. Если сомневаетесь – сделайте скрин или пробный печатный образец и отойдите на расстояние – видно ли текст без усилий? Если сливается – усилить контраст (или размер шрифта, но лучше контраст).

Нельзя забывать, что читабельность – это приоритетнее “красивости” цвета. Можно поиграть цветами в заголовках или небольших элементах, но основной массив текста лучше оставить нейтрально контрастным. Цвет можно вводить безопасно в фон блоков (например, светло-бежевый фон, черный текст – все ок), либо в акцентах (слово выделить красным на белом – коротко, почему нет, будет видно, потому что окружено черным текстом). Но писать красным на зеленом целый абзац – гарантированно зритель устанет или вообще уйдет.

Таким образом, цвет текста и фона должен быть подобран с таким расчетом, чтобы текст легко отделялся от фона на уровне яркости. А если хотите добавить цвета – делайте это без ущерба контрасту. Например, темно-синий текст на кремовом фоне – цвета есть, контраст сохранился. Или белый текст на темно-синем фоне. В любых сомнительных случаях – тестируйте или придерживайтесь золотого правила: черное на белом (или наоборот). Тогда читабельность будет на высоте.

20. Какие шрифты лучше использовать для основного текста, а какие для заголовков?

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

Для основного текста (длинного чтения):

• Выбирайте шрифты, обладающие высокой читабельностью в мелком и среднем кегле. Они называются текстовыми гарнитурами. Характерные черты: умеренный дизайн без экстремальных особенностей, средний контраст штрихов (не слишком тонкие детали), крупная x-height (чтобы строчные буквы хорошо читались), достаточное расстояние между знаками. Примеры:

  • В печати классические: Times New Roman, Garamond, Minion, Caslon – все это шрифты с засечками, специально разработанные для наборного текста (Times, например, был создан для газеты – компактный и четкий).

  • В вебе и экранном отображении: Georgia (шрифт с засечками, оптимизирован для экранов), Verdana и Arial (без засечек, максимально простые формы) – они были рассчитаны на маленькие размеры на экране. Современные примеры: Roboto, Open Sans, Lato – также хороши в качестве основного текста на сайтах, благодаря нейтральности и хорошему межсимвольному просвету.

• Антиква vs. Гротеск для текста: На бумаге многие предпочитают шрифты с засечками для длинного чтения (традиционно считается, что засечки помогают глазу держаться строки, формируя линию, хотя исследования неоднозначны). Поэтому романы, статьи – часто набраны гарнитурами типа Garamond, Palatino, etc. На экранах (особенно старых) лучше работали без засечек, поэтому веб-статьи часто гротеском. Сейчас при высоком DPI и хорошей рендеринге можно и засечки на экране использовать. Но главное – шрифт для тела текста должен быть “невидимым”, т.е. не привлекать к себе излишнего внимания дизайном. Он должен просто удобно читаться часами.

• Пропорции текстового шрифта: Обычно такие гарнитуры – не слишком узкие (чтобы буквы не сливались), но и не слишком широкие (чтобы не расползались). Оптимальный средний охват. Они имеют отчетливые различия между похожими формами (пример: цифра 1, буква l и I – в хорошем текстовом шрифте не перепутаешь, у них разные засечки или хвостики).

• Примеры рекомендованных текстовых шрифтов:

  • Для книг/журналов: Caslon, Baskerville, Janson, Electra – классические антиквы.

  • Для научных работ: Computer Modern (TeX), Cambria (разработан Microsoft для экранных офисных документов, хорошо для чтения).

  • Для веб/мобилок: PT Serif / PT Sans (семейство Паратайпа, сделано для универсального использования, часто применяется в русскоязычных сайтах), Source Serif / Source Sans (Adobe open source, тоже пара для текст+заголовок).

  • Специально “UI” шрифты: Apple San Francisco, Microsoft Segoe UI – они очень нейтральные и “монолитные”, для интерфейсов и небольших текстов.

Для заголовков, титульных надписей, акцентных фраз:

• Можно использовать более декоративные или экспрессивные гарнитуры, которые привлекают внимание. Их называют акцидентными или display fonts. Отличия: они могут иметь большой контраст штрихов, необычные формы, быть очень жирными или очень тонкими, с экспериментальными деталями – то, что было бы слишком утомительно или плохо читалось в сплошном тексте, но в крупном размере и коротком слове выглядит эффектно. Примеры:

  • Didot или Bodoni – эти классические шрифты с очень тонкими засечками и высоким контрастом прекрасны для заголовков, обложек (мода, журналы). Но на мелком размере их тонкие части почти исчезают – поэтому для текста они не годятся, а вот крупный заголовок “Gala Concert” – прекрасен Didot, выглядит элегантно.

  • Slab-serif (брусковые) – например, Rockwell, Impact – обладают массивными формами, отлично работают в заголовках, постерах. Impact вообще задуман как шрифт для заголовков (очень плотный, высокий x-height, минимальные внутренние просветы – в абзаце им нельзя, буквы слипнутся зрительно, а одно слово-призыв “SALE!” – замечательно, ударно).

  • Декоративные/рукописные/фантазийные: для заголовков можно использовать скриптовые шрифты (имитирующие каллиграфию), готические, “игровые” и прочие стилизованные – они задают настроение. Но их обязательно применять дозированно и в большом размере. Например, заголовок статьи может быть рукописным шрифтом, но основной текст – простой.

• Веса и начертания: Часто семейства имеют специальные начертания “Display” (напр. Source Serif Display vs Source Serif Text – первый оптимизирован для 30+ pt, второй для 8-12 pt). Если шрифт предлагает вариант Display – лучше его взять для заголовка, потому что дизайнеры могли чуть увеличить контраст или эстетические штрихи, зная, что он будет крупным.

• Заголовки обычно крупнее текста (естественно). Поэтому в них можно позволить тонкости. Например, тонкий волосок засечки в крупном размере все еще виден, а в мелком нет. Значит, в заголовках можно использовать тонкие или очень контрастные шрифты. Или очень сложные декоративные – в крупном размере каждая завитушка читается.

• Заглавные vs строчные: Многие заголовочные шрифты рассчитаны на ВСЕ ПРОПИСНЫЕ. Напр., тракийская гарнитура, или разные декоративные инициалы. Читабельность целыми капсами страдает, но если слово-два – нормально.

• Цель шрифта для заголовка – привлечь внимание и подчеркнуть характер проекта. Поэтому здесь можно отступить от строгой нейтральности. Например: журнал о технологиях – заголовки рубленым геометрическим футуристическим шрифтом (чтобы придать хай-тек настроение), а текст – простой нейтральный sans. Или ресторанное меню – названия разделов красивым скриптом (для атмосферы), а перечень блюд – простым читабельным шрифтом.

• Примеры хороших пар “текст + заголовок”:

  • Helvetica (текст) + Helvetica Bold (заголовки) – простой вариант: одна гарнитура, но в тексте обычный, в заголовке жирный побольше. Это минимализм, но работает, особенно в современных стилях.

  • Garamond (текст) + Gill Sans (заголовок) – контраст засечки/без, классика + современность. Часто используемая схема: классический serif для чтения, sans-serif для титров.

  • Minion Pro (текст) + Myriad Pro (заголовки) – Adobe когда-то так свои печатные материалы делал (Minion serif body, Myriad sans heads).

  • Georgia (текст) + Impact (заголовки) – для веб, скажем, блог: Georgia легко читабельна, Impact – броский (но надо аккуратно, Impact очень широкие буквы, заголовок займет место).

  • PT Sans (текст) + PT Serif (заголовок) – или наоборот, эти шрифты сделаны парно. Один можно использовать для основного текста, другой для заголовков, так будет разнообразие, но стилистическая совместимость.

  • Roboto Regular (текст) + Roboto Condensed Bold (заголовки) – внутри одного семейства тоже можно: более узкое и жирное начертание того же шрифта даст акцент.

  • Decorative Script (очень ограниченно) + Neutral text font – например, на афише: заголовок красивым каллиграфическим, а подзаголовок и детали обычным. Книга с рецептами: названия блюд рукописным шрифтом, ингредиенты и рецепт – простым.

• Почему не использовать “текстовые” шрифты для заголовков? – можно, но эффект будет скромный. Часто текстовые шрифты при увеличении выглядят слишком “обычно” и даже проявляют неидеальные формы (они же оптимизированы под малый размер, а на большом видны упрощения). Поэтому лучше специализированный шрифт для дисплея. Например, той же Georgia есть версия Georgia Display с тоньшими засечками, она красивее смотрится на крупных заголовках, чем обычная Джорджия, рассчитанная на 10-14px.

• Почему не использовать “заголовочные” для текста? – как обсуждали, за счет своих экстремальных особенностей они утомляют глаз и могут быть неразборчивыми в потоке текста. Например, Comic Sans (не совсем display, но декоративный) – в мелком тексте выглядит неаккуратно. Или Monotype Corsiva (такой рукописный) – абзац им просто замучает читателя, хотя заголовок “Добро пожаловать” им может быть милым.

Итог:

• Для основного текста: нейтральные, хорошо читаемые, низко- или среднеконтрастные шрифты, обычно разрабатываемые как “text” (часто с засечками для печати, без – для экранов), с нормальной толщиной штрихов, понятными формами.

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

Если сомневаетесь, одна из стратегий – использовать разные начертания одного семейства: многие шрифтовые семьи специально содержат и текстовые, и титульные версии (пример: Charter в MacOS – есть Charter Caption для мелкого, Charter Display – для большого). Или, как рекомендация: для печати – текст набрать гарнитурой Old-style (старый стиль типа Garamond), а заголовки Modern (Didot) или Slab (Egyptian) – так делали еще в 19 веке, контраст смотрится интересно.

Но убедитесь, что выбранные шрифты сочетаются стилистически (подробнее мы обсуждали сочетание в вопросе 12). Плохое сочетание может испортить всю идею: шрифт для заголовков может перекрикивать или не сочетаться, тогда лучше взять что-то ближе по духу.

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

21. Где брать шрифты для своих проектов законно и безопасно?

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

• Бесплатные библиотеки с открытой лицензией. Лучший и безопасный вариант – пользоваться ресурсами, которые предлагают шрифты с свободными или бесплатными лицензиями:

  • Google Fonts (fonts.google.com) – один из самых популярных источников. На Google Fonts сотни шрифтов (включая кириллические), все они распространяются бесплатно и с открытой лицензией OFL или Apache. Это значит, их можно использовать как в личных, так и в коммерческих проектах без оплаты¹⁷. На сайте удобный интерфейс: можно протестировать текст, скачать файлы (TTF/OTF) либо подключить через ссылку на сайт. Плюс – там каждый шрифт отображается с поддерживаемыми языками. Google Fonts – очень надежный ресурс; шрифты там проверены и оптимизированы для веб (веб-форматы WOFF тоже доступны).

  • Официальные сайты разработчиков: Например, компания ParaType часть своих шрифтов выложила бесплатно (семейство PT Sans/Serif, позволяющее свободное использование). Их можно скачать с сайта ParaType или с Google Fonts.

  • Open Font Library – хранилище свободных шрифтов. Там тоже много всего, но будьте внимательны – качество некоторых может быть не идеальным.

  • GitHub repositories – некоторые шрифты (особенно open-source) выкладываются на GitHub. Но качать оттуда стоит если вы уверены в лицензии (обычно указана).

  • Adobe Fonts (бывший Typekit) – если у вас подписка Adobe CC, вы имеете доступ к Adobe Fonts библиотеке. Это коммерческий сервис: вы платите за подписку, но получаете право использовать огромный каталог шрифтов без отдельной оплаты лицензий. Однако, вне подписки – они не бесплатны.

  • Локальные бесплатные площадки: есть сайты типа 1001fonts, Dafont – они предлагают бесплатные шрифты, но нужно проверять лицензию каждого (на Dafont многие “free for personal use”, то есть для коммерческого нужна покупка).

  • Google Noto Fonts – огромный проект от Google, шрифт Noto охватывает все языки мира. Бесплатен, на GitHub или Google Fonts. Если нужен шрифт для редкого языка – Noto выручит, легально.

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

  • Онлайн-магазины шрифтов: MyFonts.com, FontShop, Fonts.com, Typetype, IndianTypeFoundry, etc. Там можно купить шрифт или семейство, обычно оплату за стиль или за семью. При покупке вы получите файл шрифта и лицензионный договор (EULA). Покупка дает вам право использовать шрифт по условиям: часто ограничение по числу CPU (для desktop license) или pageviews (для web license) и т.п.

  • Студии-изготовители: некоторые типографии продают напрямую. Например, Paratype.ru – можно купить у них кириллические гарнитуры, они российские цены, рублями, поддержка.

  • Маркетплейсы графические: Creative Market, FontBundles – продают наборы шрифтов от независимых дизайнеров. Там тоже внимательно читайте лицензии (обычно Personal, Commercial differ).

  • Стоимость: цены варьируются. Разовый покупной шрифт – от $10-20 за один стиль до сотен долларов за семью. Webfont лицензия может считаться по посетителям сайта. Но для многих проектов хватит дешевого варианта.

• В составе ПО или ОС. Множество шрифтов уже устанавливаются с операционными системами и программами:

  • Windows поставляется с Arial, Times New Roman, Calibri, Cambria, и др. – их можно считать легальными для использования на той машине. Но формально лицензия на них – на использование в условиях Windows. Если вы переносите, например, Calibri на сайт как Webfont – это нарушение, потому что у вас нет web-лицензии на Calibri (Microsoft ее не раздавала открыто). Для таких популярных шрифтов лучше искать замену на GoogleFonts (например, вместо Calibri можно Open Sans).

  • macOS имеет свои шрифты (San Francisco, New York etc.), но Apple лицензирует их только для своих платформ.

  • Adobe тоже раньше с Photoshop шли Minion, Myriad – но они для печати, использование. Не надо выкладывать их на сайт, если нет Web license.

  • В целом, системные шрифты можно без проблем использовать в печатной продукции (никто не следит, что ваше меню ресторана набрано Arial – это ок), но распространять файлы нельзя.

• Не качать с пиратских сайтов. Есть сайты, предлагающие скачку платных шрифтов бесплатно. Это нелегально. К тому же небезопасно: в файлах могут быть изменения или вирусы. К тому же пиратские OTF/TTF иногда бывают криво сломаны – могут глючить. Например, нарушены таблицы, и шрифт падает в каких-то программах. Либо нет некоторых символов, т.к. взяли демо-версию. Поэтому избегайте сомнительных "freefont.ru" и подобных, где легко можете нарушить закон и получить некачественный файл.

• Проверка лицензии: Всегда читайте, под какой лицензией скачанный шрифт. Если это SIL Open Font License, Apache, MIT – вы свободны использовать, модифицировать. Если написано "Free for personal use" – значит нельзя в коммерческом проекте (например, логотипе фирмы) без покупки.

• Особенно про кириллицу: На GoogleFonts не все шрифты поддерживают кириллицу, фильтруйте по языку. Если нужен качественный кириллический шрифт, а бесплатного нет, лучше купить у профессионалов (например, той же ParaType или TypeToday – у них современные кириллические).

• Webfonts vs Desktop fonts: Когда берете с GoogleFonts – там сразу веб-формат. Если покупаете на MyFonts – при покупке указывайте, нужна ли web версия (обычно продается отдельно, либо разная лицензия).

• Соблюдение лицензии: В печатных проектах, как правило, достаточно иметь лицензию (т.е. купить/скачать легально) и можно печатать. В веб – нельзя просто взять OTF и выложить – нужно либо подключать через сервис (Google Fonts), либо конвертировать в WOFF (многие foundries при покупке дают WOFF с условием). Если используете Google Fonts, они под OFL – обычно требование просто, чтобы у вас в CSS была ссылка, и все.

• Подсказка: Если бюджет нулевой – лучше ограничиться открытыми шрифтами (Google Fonts), благо сейчас там есть очень приличные гарнитуры на любой вкус. Список классных бесплатных шрифтов с кириллицей: Inter, Manrope, Open Sans, PT Sans/Serif, Montserrat, Playfair Display (если нужен Didot-стиль), etc. Также на оф.сайте GoogleFonts есть "Русская подборка" – например, Яндекс летом 2025 выпустил Yandex Sans и Yandex New Cyrillic под свободной лицензией – их тоже можно брать.

• Идея: Если какой-то платный шрифт очень нужен, но бюджет ограничен, посмотрите на альтернативы: часто есть похожие открытые. Например, вместо платного Helvetica – бесплатный Liberation Sans или Noto Sans. Вместо Gotham – Montserrat (на Google Fonts; Montserrat создан по мотивам стиля похожего на Gotham).

• Литература по лицензиям: Если сомневаетесь, почитайте "SIL Open Font License FAQ" или статьи "How to legally use fonts" – кратко: шрифт-файл – лицензируемый продукт, уважайте лицензию.

Вывод: Брать шрифты лучше:

• из официальных библиотек (Google Fonts и др.),

• либо покупать на надежных сайтах с получением лицензии,

• не скачивать неизвестно где взломанные копии.

Это гарантирует, что

1. вы не нарушаете авторских прав,

2. получите качественный файл,

3. возможно техподдержку/обновления,

4. отсутствие проблем юридических, если проект коммерческий.

Например, на Учись Онлайн Ру блоге была рекомендация: “Не используйте непонятно откуда скачанные шрифты – лучше надежные бесплатные из Google Fonts или купленные легально”. Соблюдение этого не только избавит от риска штрафов, но и показывает профессионализм (дизайнер должен уметь управляться с лицензиями).

22. Можно ли научиться типографике самостоятельно и с чего начать?

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

1. Начните с базовой теории. Прежде чем практиковаться, важно понять основные принципы:

• Прочитайте хорошую книгу по основам типографики. Рекомендуются, например: “Элементы типографского стиля” Роберта Брингхёрста, “Типографика” Э. Рудера, или более доступные вводные тексты. На русском языке для начинающего подходит “Живая типографика” Александры Корольковой – там понятным языком о правилах набора¹⁸. Книги Эрика Шпикермана (“О шрифте”) тоже дадут общее понимание¹⁹. Эти ресурсы объяснят термины (кернинг, трекинг, интерлиньяж и т.д.) и основные “правила хорошего тона” в верстке: зачем нужны поля, оптимальная длина строки, какие шрифты читабельны и т.п.

• Изучите историю шрифтов вкратце и классификации. Понимание, чем антиква отличается от гротеска, что такое рубленые, шрифт старого стиля vs переходного vs современного – поможет ориентироваться при выборе шрифтов. Краткая история расскажет, почему появились засечки, как Гутенберг печатал. Исторический контекст (например, что гарнитура Bodoni – эпоха классицизма, а Gill Sans – модернизм 20 века) даст культурный слой знания.

• Онлайн-ресурсы: Можно найти курсы или видео-лекции. Например, на YouTube есть лекции о типографике (как краткие 15-минутные, так и часовые мастер-классы). Многие дизайнеры делятся советами (см. каналы Type.today, Bang Bang Education вебинары).

• Также пройдите интерактивные статьи: например, TypeStudy – сайты, где можно поиграть с параметрами и увидеть эффект. Или Material Design Typography guidelines (от Google) – там про типографику в цифровых продуктах.

2. Практикуйте “наблюдательную типографику”. Это значит – начните обращать внимание на текст вокруг:

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

• Обращайте внимание и на плохие примеры: объявления с 5 шрифтами, сайты с ужасным контрастом. Попытайтесь понять, что именно не так (слишком много шрифтов? маленький кегль?).

• Игра: берете книгу и перенабираете страницу в Word или InDesign, стараясь повторить формат – так вы руку набьете.

• Есть сайты-игры: Type.method.ac – там игра про кернинг (нужно двигать буквы, чтобы равномерно), Shape Type – угадать шрифт по силуэту, KernType – тоже интерактив. Они развивают “чувство буквы”.

3. Практические маленькие проекты.

• Начните с чего-то простого: сделайте макет визитки, флаера или страницы. Например, сверстайте условное резюме: выберите 1-2 шрифта, настройте заголовки (имя, секции) и основной текст (опыт, навыки). Попрактикуйтесь: выставите правильные отступы, подберите размеры, посмотрите, как это смотрится при печати.

• Попробуйте верстку статьи А4: возьмите текст статьи (можно из Википедии) и попробуйте оформить как в журнале: колонками, с заголовком, цитатой (врезкой). Примените сетку (например, 2-колонную). Затем сравните с каким-нибудь реальным журналом – где отличия?

• Сделайте серию постов для соцсетей с цитатами: так потренируетесь сочетать шрифты и фоны. Картинка с цитатой требует иерархии (можно подчеркнуть главное слово размером или шрифтом).

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

• Практикуйтесь на своем окружении: например, предложите сделать приглашение на семейное событие, оформите его аккуратно (подбор шрифта для заголовка "Юбилей", читаемого для деталей – вы прям примените знания на деле).

4. Используйте программные средства профессиональные. Попробуйте освоить базовые функции:

• InDesign или аналог (Affinity Publisher, Scribus) – они приспособлены для типографики. Там есть возможности выставлять baseline grid, kerning, стили абзацев – попробуйте их. Делая учебный макет книги, вы научитесь: как задавать интервалы, висячие знаки. Scribus – open-source верстка, можно его если нет Adobe.

• CSS для веб-типа: Создайте простую HTML страницу с текстом и с помощью CSS поиграйте: font-size, line-height, font-family подключите Google Font, letter-spacing, text-align justify vs left – посмотрите на экран, как влияет. Это поможет пониманию веб-типографики.

• Word/LibreOffice: даже в них можно потренироваться – многие начинают верстку текста с Word. Но он ограничен, лучше InDesign для настоящей типографики, но Word научит базовому: стили (Заголовок 1, 2), межстрочные интервалы, неразрывные пробелы и пр.

5. Получайте обратную связь. Учиться самому – иногда можно не заметить ошибки. Поэтому:

• Выкладывайте свои учебные работы на форумы или соцсети дизайнеров (например, группа ВКонтакте "Типографика" или на Reddit r/typography) и просите критики. Будьте готовы услышать замечания и не обижайтесь – на ошибках учатся.

• Сравнивайте свои работы с эталонами: возьмите ту же газету или журнал – насколько ваша верстка аккуратна? Если чувствуете "что-то не то" – попробуйте выявить: может, у вас строки слишком длинные, или текст слишком близко к краю. Так со временем научитесь видеть тонкости.

6. Постоянно совершенствуйтесь:

• Читайте специализированные блоги и статьи: например, Type.today блог, Fontreviewjournal.com – там обзоры шрифтов с примерами. Practical Typography by Matthew Butterick (есть сайт) – очень полезный ресурс, написанный шрифтовиком-юристом – там советы от выбор шрифта до настроек интервалов, доступно.

• Следите за обновлениями: выходят новые шрифты, новые инструменты (как variable fonts). Разбирайтесь с ними – например, variable fonts позволяют настраивать толщину, ширину – это новый виток типографики.

7. Про тренировки глазу:

• Полезно попробовать рисовать буквы (даже если не будете шрифтовым дизайнером). Нарисуйте от руки несколько букв, например, свой никнейм в разных стилях. Это очень улучшает понимание формы. Разумеется, мастерская каллиграфия – отдельное искусство, но базовые упражнения, типа писать разные шрифты от руки, очень помогают почувствовать анатомию буквы.

Можно ли научиться самостоятельно полностью?
Да, особенно сейчас – огромное количество доступных материалов: видеоуроки, статьи, примеры. Уже упомянутые книги Шпикермана, Корольковой – буквально самоучители. Например, “Типографика и вёрстка” (есть несколько онлайн-курсов, но и книги заменят).
Важно сочетать теорию + практику. Одной теорией не научишься (будешь знать, но не уметь применять), и одной практикой без знаний – можно закрепить плохие привычки.

С чего начать конкретно:

• Освойте 5-6 простых правил (из нашего ответа №10): длина строки, не больше 2 шрифтов и т.д. Начните сознательно применять их во всем: даже в курсовой работе по другому предмету – сделайте красивые отступы, выберите нормальный шрифт (не Times, а, например, крупнее Georgia – препод оценит аккуратность).

• Затем усложняйте: возьмите проект (например, сверстать PDF книгу для знакомого писателя, если есть кто). Путем проб и ошибок, с поддержкой материалов, вы научитесь.

Мотивация: Обучаясь сам, есть риск пропустить что-то – поэтому желательно под конец проверить себя: скажем, проходя курсы (возможно короткие). Но если нет возможности на курсы – не беда: благодаря книгам и Интернету самообразование вполне реально. Многие классики верстки вообще учились до интернета, просто перенимая у старших. Сейчас у вас тысячи “старших” в виде блогов и книг.

Сами типографы говорят: “Лучший способ научиться типографике – набирать текст, и много читать качественно набранных книг.” Читайте – и обращайте внимание на оформление, набирайте сами – и сверяйте с профессионалами.

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

23. Кому необходимо знать основы типографики?

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

• Графические дизайнеры. Это очевидно: любой дизайнер, создающий печатные макеты (визитки, буклеты, постеры, упаковку книг, журналы), должен уметь грамотно работать с текстом. Типографика – фундаментальная часть графдизайна⁹. Ведь дизайн – это не только картинки: огромное количество дизайна – текстовая информация (слоганы, названия, описания). Если дизайнер не умеет выбирать шрифты и расставлять текст, его работы будут выглядеть непрофессионально. Например, при разработке логотипа или фирменного стиля, часто нужно подобрать фирменный шрифт. Без знаний типографики (например, геометрия букв, сочетание со знаком) – не обойтись. Графдизайнеры, специализирующиеся на веб или интерфейсах (UI/UX), также нуждаются в типографических знаниях: от выбора размера заголовков и кегля текста на сайте до обеспечения доступности (достаточного контраста, размеров).

• Веб-дизайнеры и фронтенд-разработчики. Те, кто создает веб-страницы, мобильные приложения – тоже должны знать типографику. Почему? Потому что основной контент сайтов – текст: статьи, описания продуктов, кнопки, меню. Правильно задать стили CSS для текста (шрифт, размеры, межстрочные интервалы, адаптивность) – это типографическая задача. Часто фронтендер кодирует макет, и если он понимает принципы (например, что длина строки не должна превышать ~70 символов, значит нужно ограничить ширину контентного блока), он сделает сайт более удобным. UX-дизайнеры тоже: удобочитаемость – часть юзабилити. Мелкий шрифт или бледный текст – плохой UX. Потому знание основ типографики (про контраст, про иерархию заголовков h1-h2-h3) очень важно для веб-специалистов.

• Верстальщики / Контент-менеджеры / Редакторы. Те, кто непосредственно занимается оформлением текста. Например, верстальщик книг, журналов – прямо обязан знать все правила (неразрывные пробелы, правильные кавычки, переносы). Редакторы тоже: вычитывая текст, они обычно следят за орфографией и типографией (в издательствах редактор правит, например, неправильные дефисы на тире). Контент-менеджер, публикующий статьи на сайт – также должен уметь форматировать текст: ставить списки, делать цитаты, выделять подзаголовки. Без понимания типографики можно навредить восприятию: сплошная портянка текста без подразделения будет читаться хуже. Редактор, заботящийся о читателе, структурирует текст – это типографическая работа.

• Маркетологи и SMM-специалисты. Они создают презентации, посты, рекламные макеты, email-рассылки – везде есть текст. Грамотно оформить коммерческое предложение или постер с акцией – значит донести сообщение эффективно. Если маркетолог владеет типографикой, он лучше передаст тон голоса бренда через шрифт, или подчеркнет ключевое слово цветом/размером. В рекламных материалах типографика нередко играет главную роль (вспомните плакаты со слоганами). Даже при выборе шрифта для бренда – часто в ведении бренд-менеджера, и знание типографических нюансов поможет общаться с дизайнером на одном языке.

• Журналисты, копирайтеры, авторы контента. Казалось бы, они работают со словами, а не с их оформлением. Но в эпоху самостоятельной публикации (блоги, соцсети) часто автор сам отвечает за конечный вид текста. Если журналист ведет личный блог – умение структурировать статью (разбить на абзацы, вставить подзаголовки, списки) – часть типографики. К тому же, понимание как люди читают (а люди не читают, а сканируют – поэтому важны выделения, заголовки) – тоже приходит из типографических принципов. Хороший автор знает: длинный неразбитый текст онлайн – мало кто осилит. Значит, надо оформить. Это уже смесь редакторского и типографского навыка.

• Офисные работники и любой, кто готовит документы. Презентация в PowerPoint, отчет в Word – типографика нужна даже тут. Сотрудник, знающий основы, не будет оформлять слайд 5 шрифтами разного цвета, поймет, что таблички надо делать достаточно крупным шрифтом, чтоб читали. Отчет с правильными отступами и шрифтами выглядит солиднее. Даже письмо (Email) – сейчас email-маркетинг учитывает типографику (используют веб-шрифты, форматируют).

• Преподаватели и студенты. Педагогу, составляющему методички или презентации для урока, полезно знать типографику, чтобы материалы были удобны ученикам (крупный шрифт для задних парт, достаточный межстрочный интервал, цветовые акценты на важном). Студенту – при оформлении реферата/курсовой – соблюдение типографических правил (ГОСТы по сути и есть типографические требования: размер шрифта 14, интервал 1.5, красная строка и т.д. – они ведь возникли не случайно). Выпускная работа, грамотно оформленная, точно получит больше благосклонности. В некоторых вузах (например, ВШЭ дизайн, Британка) типографику преподают отдельно, но даже если нет – студент-дизайнер обязан сам подтянуть.

• Копирайтеры/контент-райтеры (уже упомянули) – минимум знать, как расставить правильные знаки (не ставить "елочки" и т.п.). Кстати, переводчики тоже: они часто форматируют переведенный текст, и им важно помнить, что, например, в русском кавычки «…», а не “…” (как в английском оригинале). И тире вместо " - ".

• Специалисты по брендингу и фирменному стилю. Разработка фирменного стиля компании включает типографику: выбираются корпоративные шрифты (логотипный и основной). Бренд-менеджер должен понимать, какой шрифт отражает характер бренда, какие ассоциации вызывают разные гарнитуры (например, рубленый геометрический – о современности, антиква – об истории, рукописный – об индивидуальности). Это типографическая психология. Такому специалисту (даже если он не детально умеет верстать) необходима насмотренность и терминология типографики, чтобы правильно сформулировать задачу дизайнеру: "Нам нужен шрифт-гротеск, чуть округлый, дружелюбный для нашего логотипа".

• Разработчики интерфейсов (UX writers, продуктологи) – они пишут тексты интерфейсов ("название кнопки, надпись в приложении") и часто сами видят, как это выглядит. Им тоже полезно знать: длинные строки на мобильном – плохо, капслок в UI – иногда применим, но не злоупотреблять, и что межбуквенный интервал влияет на восприятие, etc.

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

В общем, базовые типографические знания стоит иметь всем, кто работает с текстом в той или иной форме. Особенно это важно:

• дизайнеры (графические, веб, полиграфические),

• редакторы, верстальщики, специалисты СМИ,

• рекламщики, маркетологи,

• программисты фронтенда, создающие визуальную часть,

• офисные работники для документов и презентаций.

В наше время информация – это преимущественно текст + визуал, и грамотная подача текста – компетенция, которая отличает профессионала. Как говорили: "95% информации в вебе – это текст", поэтому кто владеет типографикой, тот владеет коммуникацией.

Итак, основы типографики нужны всем, кто хочет эффективно доносить текстовую информацию. Даже если вы не дизайнер, понимание принципов форматирования текста сделает ваши документы, письма, презентации более читабельными, убедительными и эстетичными. А если вы профессионал в сферах дизайна/издательства – то типографическая грамотность просто обязательна, это часть вашей квалификации.

24. Чем отличается типографика от шрифтового дизайна?

Типографика и дизайн шрифтов (шрифтовое дело, или type design) – сферы, связанные с буквами, но они различаются по фокусу и задачам.

• Типографика – это искусство и практика использования готовых шрифтов для набора текста. Типограф занимается компоновкой текста: выбором подходящей гарнитуры для конкретного случая, определением размеров, интервалов, расположением на странице, обеспечением удобочитаемости и нужного визуального эффекта. Типографика – часть оформления конечного продукта (книги, сайта, плаката и т.д.)². Проще говоря, типографика отвечает на вопрос: “Как использовать существующие шрифты, чтобы текст выглядел и читался хорошо?”

• Шрифтовой дизайн (креатив шрифта) – это создание нового шрифта, разработка форм букв с нуля или на основе существующих. Шрифтовой дизайнер (type designer) рисует очертания букв, определяет их пропорции, стилистические особенности, делает весь набор символов (латиницу, кириллицу, цифры, знаки) и воплощает это в шрифтовой файл. То есть, если типограф – это пользователь шрифта, то шрифтовой дизайнер – создатель инструмента (самого шрифта). Шрифтовое проектирование требует глубокого понимания формы букв, техники (например, векторной графики), знания, как шрифт будет применяться.

Главное отличие: Типографика ориентирована на применение шрифтов и правила набора текста, а шрифтовой дизайн – на придумывание и рисование самих буквенных форм.

Пример:

• Когда вы решаете, каким шрифтом набрать заголовок, на каком интервале разместить строки и нужен ли кернинг между "A" и "V" – вы занимаетесь типографикой.

• Когда вы решили нарисовать уникальный логотип-надпись или хотите выпустить собственную гарнитуру – вы занимаетесь шрифтовым дизайном.

Эти области связаны исторически (раньше типографы физически вырезали новые шрифты из металла), но сейчас это обычно разные специализации:

• Есть специалисты по типографике (например, арт-директор журнала, технический редактор) – он может прекрасно верстать и комбинировать шрифты, но сам, возможно, никогда не рисовал шрифт.

• Есть шрифтовые дизайнеры – они создают гарнитуры, но не обязательно они искусные верстальщики или дизайнеры макетов. Они могут разработать шрифт, передать типографу, а тот уже применит его.

Интересно, что не все типографы рисуют шрифты, и не все шрифтовики считают себя типографами². В современной индустрии:

• Шрифтовые дизайнеры – отдельная профессия (в России, например, Илья Рудерман, Юрий Гордон – классики шрифтового дизайна). Они создают гарнитуры, продают их. Они должны разбираться в анатомии букв, программировании OpenType-функций и т.п.

• Типографы/верстальщики – используют уже существующие шрифты для подготовки изданий.

Почему это разделение важно:

• Навыки несколько различаются. Шрифтовый дизайн требует склонности к кропотливому рисованию идентичных стилей букв, понимания математических аспектов интерполяции, oft. Типограф же должен иметь чувство композиции страницы, хорошего вкуса, знаний правил набора разных языков, но не обязательно уметь самим создать букву с нуля (они должны уметь выбрать подходящий из существующих).

• Инструменты разные: шрифтовик работает в FontLab, Glyphs или RoboFont – специальных программах, где рисуют глифы, настраивают кернинг-пары, генерируют файлы OTF. Типограф работает в InDesign, Illustrator, WordPress – там он управляет текстом, используя готовые font-файлы.

Хороший пример:
В книжном издательстве, есть книжный дизайнер/верстальщик – он решает, что для данного романа он использует шрифт Garamond, размер 11pt, интервал 14pt, поля такие-то – это типографическая работа. Сам шрифт Garamond был когда-то создан шрифтовым дизайнером (Клод Гарамон, исторический) и уже адаптирован современными (например, Robert Slimbach адаптировал Garamond для Adobe) – то есть работа type design выполнена кем-то до того, как верстальщик его применил. Верстальщик не меняет формы букв Garamond'a, он только их компонует.

Еще:

• Типографика относится к максимально широкому полю графического дизайна, а шрифтовой дизайн – узкая специализация (поэтому шрифтовых дизайнеров значительно меньше по числу, чем людей, занимающихся типографикой).

• Есть, конечно, люди, совмещающие: например, некий дизайнер может и шрифт нарисовать (особенно декоративный для логотипа) и потом применить его в верстке. Но в профессиональном сообществе термины разделены.

Пример терминологии в речи:

• "Я занимаюсь типографикой" – обычно означает “я верстаю тексты, выбираю шрифты”.

• "Я занимаюсь шрифтовым дизайном" – означает “я рисую новые шрифты”.
  В английском: Typography vs Typeface Design/Font Design. Font design – создание самих fonts.

Как это проявляется в индустрии веб:

• Typography в CSS/HTML – про то, как текст выглядит на странице (стили).

• The person creating fonts (like Google Noto or Times New Roman) – type designer.

Кстати, есть понятие леттеринг – рисование букв для конкретной композиции, не как полнофункционального шрифта (например, нарисовать красивую надпись для плаката). Леттеринг ближе к шрифтовому дизайну (ты создаешь буквы), но обычно одноразовые, не делаешь весь алфавит. Это тоже отличают: леттерер рисует логотипы-буквы, а типограф потом может эту надпись поместить куда надо.

Взаимосвязь: Хороший типограф должен понимать основы шрифтового дизайна (скажем, знать анатомию буквы, поэтому в вопросе 18 мы разбирали анатомию – это знание из шрифтового дизайна, но типографу оно нужно для грамотного выбора и кернинга). А шрифтовой дизайнер неплохо должен понимать, как его шрифт будут использовать (т.е. быть в курсе типографических требований: например, сделать наборы цифр старостильных, чтобы верстальщик мог их использовать, или предусмотреть кириллицу для многоязычности).

Пример из практики:
Юрий Гордон – шрифтовой дизайнер (создал "Книга про буквы" – шрифт) и типограф (оформлял книги). Он сам говорил, что когда делает шрифт, думает, как его потом типографы будут набивать. А когда верстает книгу, иногда понимает: "эх, вот тут бы шрифт с чуть другими цифрами" – и, имея навык шрифтовика, может внести правки.

Но обычно,
типографика (макетирование текста) – более широкая, прикладная область,
шрифтовой дизайн (создание шрифтов) – более технически-ювелирная и творческая, связана с рисованием каждой буквы.

И если еще короче: Типографика – про композицию текста, шрифтовой дизайн – про форму букв.²

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

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

Иначе:

• Без шрифтового дизайна не было бы разных гарнитур.

• Без типографов эти гарнитуры не были бы применены должным образом.

Как итог, обучение тоже разное:
Типографике учат на дизайне/верстке,
а шрифтовому дизайну – отдельные курсы/специализации (этим занимаются единицы).

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

25. Какие книги и ресурсы почитать для изучения типографики?

Полезная литература по типографике – это и классические труды мастеров, и современные руководства. Вот список рекомендуемых книг и ресурсов (с кратким описанием):

• Эрик Шпикерманн – «О шрифте» (Stop Stealing Sheep & Find Out How Type Works). Доступная и увлекательная книга от известного немецкого дизайнера¹⁹. Написана “человеческим языком”, вводит в мир шрифтов, объясняет, как выбирать гарнитуры, сравнивает шрифты с интонацией речи¹⁹. Отлично подходит начинающим. Даёт общий взгляд на то, почему типографика важна и как с ней обращаться.

• Эмиль Рудер – «Типографика. Руководство по оформлению». Классический фундаментальный труд от швейцарского типографа (одного из основателей стиля "швейцарской типографики"). В книге рассмотрены принципы композиции, контраст, сетки, приведены эксперименты. Текст местами сложный, но крайне полезный для глубокого понимания. Новичкам может быть сложно¹⁹, но это “библия” типографов XX века.

• Ян Чихольд – «Новая типографика» и «Облик книги». Ян Чихольд – легендарный типограф, реформатор типографики в 1920-30-х. “Новая типографика” сформулировала принципы модернистской (асимметричной) верстки. “Облик книги” – об идеальной книжной верстке, более традиционная. Обе книги полезны: первая – понимать историю и правила современного дизайна, вторая – тонкости книжного оформления (поля, пропорции).

• Роберт Брингхёрст – «Основы стиля в типографике» (The Elements of Typographic Style). Очень авторитетное издание¹⁸. Рассматривает тончайшие аспекты: от выбора шрифта до композиции страницы, содержит исторические примеры и поэтичный взгляд на типографику. Это скорее справочник/манифест для продвинутых, но можно читать и обучаясь – узнаете о микро-типографике, правилах разрядки, особых знаках. Многие называют её "типографической библией".

• Александра Королькова – «Живая типографика». Современная российская книга (Королькова – шрифтовой дизайнер и преподаватель). Написана понятным языком специально для русскоязычной аудитории начинающих^{18 21}. Охватывает и историю, и практические правила набора именно для русского текста, нюансы русской типографики. Очень рекомендована новичкам, т.к. учитывает отечественные стандарты и дает системное представление. (Плюс содержит иллюстрации и примеры).

• Юрий Гордон – «Книга про буквы от Аа до Яя». Это роскошное издание (в несколько томов, большого формата)¹⁸, где каждой букве русского алфавита посвящена глава. Разбирается анатомия каждой буквы, исторические формы, философия формы. Книга тяжеловесная в прямом и переносном смысле – но незаменима для глубокого понимания кириллицы. Возможно не для самого начала, но пролистывая её, вы проникнетесь уважением к каждой букве.

• Йозеф Мюллер-Брокманн – «Модульные системы в графическом дизайне». Посвящена сеткам (гриду)¹⁴. Учит строить и применять модульные сетки в верстке. Полезна тем, кто хочет профессионально верстать журналы, каталоги, веб-сетки.

• Matthew Butterick – «Практическая типографика» (Practical Typography). Доступна онлайн ²². Автор – типограф и юрист – рассказывает очень прямолинейно о ключевых принципах: почему не использовать двойной пробел между предложениями, как выбрать хороший шрифт, сколько шрифтов достаточно, и т.д. Отлично структурировано и бесплатно. Особо ценна для тех, кто работает с офисными документами и вебом – много практических советов по Word, CSS.

• Эллен Луфтон – «Thinking with Type». Хорошая современная книжка-пособие для дизайнеров. Много картинок, упражнений. Покрывает основы: шрифт, текст, сетка. Есть примеры удачных и неудачных решений. Часто рекомендуют студентам-дизайнерам.

• Сайты и онлайн-ресурсы:

  • TypeJournal.ru и Типографика: вложения – русскоязычные блоги об истории шрифтов, интервью с дизайнерами, обзоры.

  • Webtypography.net – изложение принципов Брингхёрста применительно к веб-верстке.

  • Articles on Smashing Magazine (smashingmagazine.com) и Medium (UX Collective) – много статей “10 tips for better typography in UI”, “Avoid these typography mistakes” – быстрые советы с иллюстрациями.

  • FontReviewJournal.com – анализирует шрифты в применении (на английском).

  • Material Design Typography Guidelines – от Google, описывают систему типографических стилей для интерфейсов.

• Adobe Typography – блог/ресурсы от Adobe, про шрифты, их использование, технические детали (OpenType, variable fonts).

• «Пиши, сокращай» – Ильяхов & Сарычева. Это книга по информационному стилю текста, но у неё есть разделы про оформление (например, про структурирование текстов). Не про шрифты, но про то, как подать текст читателю – близкая тема.

• ГОСТ 7.0.97-2016 (правила оформления документов) – это скучно, но если работаете с официальными текстами, знать госты полезно: там про поля, абзацы, шрифт (Times 14 – классика).

Для тех, кто интересуется шрифтовым дизайном отдельно:

• Фридль, Онг, Шпикерманн – «Книга о шрифтах» (большой альбом с образцами сотен гарнитур, история каждого).

• Gerrit Noordzij – "The Stroke: Theory of writing" – теория о форме штриха, больше для шрифтовиков.

Но по основам именно типографики перечисленных достаточно, чтобы сильно прокачаться.

Обобщая:

• Начните с Шпикерманна и Корольковой – чтобы получить базу в дружелюбной форме.

• Затем Брингхёрст – чтобы углубиться.

• Используйте Butterick's Practical Typography как справочник во время работы.

• Смотрите упомянутые онлайн-ресурсы для актуальных советов и вдохновения.

Все указанные книги и ресурсы станут надежными компаньонами в изучении типографики – они охватывают и основы, и тонкости мастерства. Читая их (а лучше, читая и тут же пробуя применить), вы значительно повысите свой уровень грамотности в обращении с текстом.

Источники

1. Выбор лучшей типографики для вашего UI — LPgenerator
2. Типографика — Wikipedia
3. Гарнитура (типографика) — Wikipedia
4. What is the optimal font size for body text? — Reddit
5. Какой интервал должен быть между строками — ARGHOME
6. Ошибки в типографике — часть 1 — VC.ru
7. Ошибки в типографике — часть 2 — VC.ru
8. Кернинг и трекинг — Adobe
9. Как обучиться типографике — Uchis Online
10. White text on grey background — Reddit
11. Типографика и ошибки — LiveJournal
12. Principles for combining font pairs — Presium
13. Курсы по типографике — Uchis Online
14. Модульные сетки в дизайне — Contented
15. Контраст текста — Hexlet
16. Color contrast accessibility — Bool.dev
17. Книга про мои буквы — Манн, Иванов и Фербер
18. Типографика — Flexbe Academy
19. 9 книг по типографике — Skillbox
20. Веб-дизайн — это 95% типографики — Facebook
21. Живая типографика — Typographyby
22. Practical Typography — Practical Typography