Креативный директор агентства Agima Григорий Коченов рассказал Нетологии об основах типографики, шрифтовых трендах, ключевых понятиях и правилах комбинирования шрифтов.
Типографика — это игра со словом, шрифтами и образами, благодаря которым получаются крутые концепты, как в этом видео:
Выравнивание текста
Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Meta
Универсальный шрифт, который можно использовать и для акцентов, и для набора, так как его легко читать. Был особенно популярен в конце 90-х.

Headline News
Разработан специально для британских школ, чтобы помочь детям усвоить закономерности классических графем и освоиться в письме.

Futura
Futura — это классический геометрический гротеск и двадцатые годы, когда эстетизировалось промышленное производство. До этого в шрифтах прослеживались следы пера, а здесь пера не осталось: все формы и линии — это либо идеальный круг, либо прямая линия. Даже в сравнении с Gill Sans она выглядит более строгой и геометричной, если сравнить по буквам «a».

Google Product Sans
Альтернатива Roboto, меняющая представление о том, что такое типовой шрифт.

San Francisco
Первый шрифт от Apple за последние 20 лет, пришедший на смену Helvetica.
Обязательно посмотрите презентацию Apple о том, как его создавали, чтобы понять, что такое типографика.

IBM Plex
IBM Plex — это Helvetica XXI века. Стильный шрифт со своим настроением, комбинирующий плавные рукописные и жесткие «машинные» линии.

Druk
Главный шрифт 2018 года.

Список актуальных шрифтов в 2018 году

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

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

Шрифтовые пары
Стандартное решение при выборе пары — взять шрифт с засечками для заголовков и без засечек для основного текста. Вот список классических, устоявшихся и гармоничных пар от Ярослава Трегубова:
Сайты, сервисы и блоги по типографике
У кого учиться:
- Сайт Ярослава Трегубова с интересными дизайнерскими работами.
- «Книга про буквы от А до Я» Юрия Гордона.
- Блог Игоря Штанга о типографике, тексте и дизайне.
- Блог и сайт Сергея Рассказова.
- Работы шрифтового и графического дизайнера Ильи Рудермана.
- Сайт дизайнера и эксперта по типографике Александра Васина.
- Инстаграм программиста-дизайнера Зака Либермана.
- Сайт Fontsinuse с примерами комбинаций шрифтов на плакатах и афишах.
- Журнал «Шрифт».
Сервисы и расширения:
- Расширение What font для определения шрифта.
- Поиск аналогов шрифта на Paratype.
- 900 шрифтов от Google Fonts.
- Основы строения и комбинирования шрифтов на Readymag.
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.