Разбираемся в основах типографики за 10 минут

Креативный директор агентства Agima Григорий Коченов в открытом занятии «Нетологии» рассказал об основах типографики, шрифтовых трендах, ключевых понятиях и правилах комбинирования шрифтов.

Обучение в онлайн-университете: курс «Типографика: искусство работы с текстом»

Типографика — это игра со словом, шрифтами и образами, благодаря которым получаются божественные концепты, как в этом видео:

Выравнивание текста

Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.

Схематическое изображение видов выключки. При выключке по ширине размер межсловных пробелов в каждой строке колеблется от едва заметного до огромного

В вебе принято выравнивать текст по левому краю, потому что это привычно, и текст так легко считывается.

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

Пример уместного использования выключки по правому краю в трех столбцах справа

Выравнивание по центру используют для одноколоночных сайтов со спокойной композицией и ровным построением.

Выключка по ширине — это газетный стиль. Так верстают и книги, но для их верстки есть верстальщик, который трудится, чтобы сделать это качественно и гармонично, без разрывов между символами.

New York Times выровнял текст по ширине, поэтому колонки выглядят ровными и аккуратными

Базовые правила

Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.

Разбивайте текст на абзацы по смыслу. Смотрите, где по смыслу заканчивается одна мысль и начинается другая. Большинство дизайнеров придерживаются позиции: «Когда у нас есть текст, можно половину выкинуть и относиться к нему, как к рыбному тексту». Нет, так делать нельзя.

Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.

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

Маленькое правило, которое может спасти

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

Из-за межстрочного отступа 0,8 текст выглядит скомканным и трудно читается

Типы чтения

Два главных типа чтения — линейное и информационное.

Линейное чтение — это книги и лонгриды с одной колонкой, где главное — не отвлекаться и погружаться в текст.

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

Пример статьи, подходящей для быстрого информационного чтения. Главные мысли выделены желтым. Источник: Т—Ж

Основные понятия в типографике

Трекинг — расстояния в строке между символами.

Кернинг — регулирование межбуквенного расстояния для каждой отдельной буквенной пары. Например, в сочетаниях букв AW или Го расстояние между буквами может быть нулевым или даже минусовым, потому что одна буква идеально сочетается с другой, как две части пазла. Без кернинга в некоторых комбинациях букв будут огромные непропорциональные апроши — межбуквенные пробелы.

Пример кернинга. Буквы Го и AW можно подвинуть ближе друг к другу, так как их формы гармонично сочетаются

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

Гротеск — более современный шрифт без засечек. Читается легче и быстрее антиквы.

Брусковый шрифт отличается от обычной антиквы ровными прямоугольными засечками.

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

Прямое начертание — это классический машинописный шрифт.

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

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

Разные варианты написания буквы А, соблюдающие общую графему

Насыщенность определяется толщиной линий. Чем толще линии, тем выше насыщенность.

Контраст определяется разницей толщины штрихов. Чем больше разница между тонкими и толстыми линиями, тем выше контрастность.

Пример шрифта с высокой и низкой контрастностью

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

Пример использования акцидентного шрифта с высокой контрастностью

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

Наборный шрифт используют в книгах, лонгридах, статьях и любых больших массивах текста. Его главная задача — сделать так, чтобы читать было легко и приятно, а глаза не уставали. Чем выше читабельность, тем лучше.

Примеры наборного и акцидентного шрифта

Пропорциональный и моноширинный шрифты отличаются размерами литер.

Наглядный пример отличий пропорционального шрифта от моноширинного

В моноширинном все буквы занимают одинаковую площадь, равную самой большой литере. Даже если английская буква i почти не занимает места, слева и справа от нее в моноширинном наборе будет много пустого пространства. Обычно его используют в таблицах, так как он помогает сохранить легкосчитываемую визуальную разрядность значений.

В пропорциональном занимаемая литерой площадь зависит от ее размеров: английская i будет занимать в 2-3 раза меньше места, чем n. Такой набор экономит свободное место, поэтому в печатных изданиях используют только его. Если напечатать книгу моноширинным шрифтом, ее объём и расход листов увеличится на 5-15%.

Обзор классических и трендовых шрифтов

Bodoni

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

Как определить хороший наборный шрифт, если ты не дизайнер

Главный показатель хорошего наборного шрифта — легкое и быстрое считывание текста без ошибок. В шрифте Verdana цифра 1, прописная английская i и строчная l считываются легко и безошибочно:

В Gill Sans невозможно понять, где что:

Шрифтовые пары

Стандартное решение при выборе пары — взять шрифт с засечками для заголовков и без засечек для основного текста. Вот список классических, устоявшихся и гармоничных пар от Ярослава Трегубова:

Открыть в полном размере

Сайты, сервисы и блоги по типографике

У кого учиться:

Сайт Ярослава Трегубова с интересными дизайнерскими работами.
«Книга про буквы от А до Я» Юрия Гордона.
Блог Игоря Штанга о типографике, тексте и дизайне.
Блог и сайт Сергея Рассказова.
Работы шрифтового и графического дизайнера Ильи Рудермана.
Сайт дизайнера и эксперта по типографике Александра Васина.
Инстаграм программиста-дизайнера Зака Либермана.
Сайт Fontsinuse с примерами комбинаций шрифтов на плакатах и афишах.
Журнал «Шрифт».

Сервисы и расширения:

Расширение What font для определения шрифта.
Поиск аналогов шрифта на Paratype.
900 шрифтов от Google Fonts.
Основы строения и комбинирования шрифтов на Readymag.

Читать еще: «5 способов распознать шрифт с картинки»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.