Типографика
Искусство оформления наборного текста
Один из инструментов выразительности
Навык
Уровни владения
1
Базовый (гигиенический)
  • создание читаемого текста
  • знание и соблюдение основных правил
  • правильный подбор шрифтов и кеглей
  • умение создавать правильную иерархию
  • умение сочетать шрифты
2
Продвинутый
  • использование типографики как выразительного приема
  • уместное и обоснованное нарушение правил
  • появление своего стиля в работе с типографикой
Типы шрифтов
Антиква
Собирательное название шрифтов с засечками. Засечки — это короткие штрихи, обрамляющие основные штрихи знаков.
Гротески
Гротески — это шрифты без засечек. Они гораздо моложе антиквы, и впервые появились в конце восемнадцатого века.
Рукописные
Рукописные гарнитуры, исходя из названия, имитируют чей-то почерк или каллиграфический стиль.
Акцидентные
Шрифты, предназначенные для заголовков и других небольших отрывков текста с целью привлечения и акцентирования внимания.
Моноширинные
В моноширинных шрифтах каждый знак занимает одну и ту же ширину.
Остальные
Все остальные шрифты, которые не попадают ни в одну из категорий.
Антиква старого стиля
Adobe Garamond Pro, Crimson Ramon, Oranienbaum, Bembo, Dante
Такой шрифт будет хорошо смотреться в оформлении деловых журналов и газет, в документах и на визитках.

Переходная антиква
Times New Roman, Baskerville, Caslon, Georgia, Bookman
Этими шрифтами набирают книги и документы, используют их в официальных письмах и других серьезных случаях.

Антиква нового стиля
Didoе, Bodoni, Walbaum
Их можно использовать для тех же целей, что и переходные: при печати книг, документов, писем и официальных заявлений.

Старые гротески
Franklin Gothic, Akzidenze Grotesk
Одноширинные, с небольшим контрастом. Идеально подойдут для оформления заголовков газет, книг и статей.

Новые гротески
Arial, Helvetica, Univers, MS Sans Serif
Самые нейтральные одноширинные шрифты. Рекомендуется использовать для интерфейсов.

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

Брусковая антиква
Luga, Luxor, Margon
Это по сути гротески, к которым добавили засечки. Сегодня такие типы шрифтов кажутся напечатанными на машинке и используются чаще для стилизации заголовков.

Гуманистические гротески
Gill Sans, Frutiger, Tahoma, Verdana, Optima, Lucide Grande
Этот тип шрифтов во всем подражает рукописным шрифтам и антикве старого стиля кроме засечек. Их удобно читать, они универсальные.
Антиква или гротеск?
Считается, что шрифты с засечками меньше утомляют при чтении длинных текстов. Засечки помогают направлять движение глаз вдоль строк — они держат линию строки и оформляют окончания штрихов. Кроме этого в шрифтах с засечками буквы сложнее по форме и сильнее отличаются друг от друга.

На самом деле:
«Легче читать то, что читаешь чаще» (Эрик Шпикерман).

Теперь мы чаще читаем с дисплеев чем с бумаги. А для экранов больше подходят шрифты без засечек — они лучше ложатся на пиксельную сетку.
Рукописные формальные
Формальные часто напоминают стиль рукописных букв 17-го и 18-го веков. Некоторые рукописные шрифты основываются на почерках таких известных мастеров как Джордж Шелл и Джордж Бикам. Существуют и современные шрифты этого типа, например, Kuenstler sсript. У всех них есть нечто общее — элегантный, благородный типографический дизайн.

Рукописные неформальные
Неформальные рукописные шрифты больше напоминают современные почерки, и появились в середине 20 века. Они не такие строгие по форме, с широкими штрихами и часто напоминают имитацию письма мягкой кистью. Пример подобных шрифтов — Mistral и Brush sсript.

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

Моноширинные
В пропорциональных шрифтах ширина знака варьируется в зависимости от конструкции букв. Например, буква «i» по ширине гораздо меньше чем буква «m».
В моноширинных шрифтах каждый знак занимает одну и ту же ширину. Более узкие знаки просто получают больше пустого пространства вокруг себя, чтобы нивелировать разницу по ширине.
Параметры набора
Кернинг
Трекинг
Интерлиньяж
Кегль
Стили
Выключка
Кернинг
Индивидуальная настройка расстояния между парами букв в слове, которая необходима, чтобы набранный текст смотрелся гармонично. В хороших шрифтах кернинг уже настроен.
Из-за ограничений веб-верстки мы не можем настраивать этот параметр.
Универсальная настройка расстояния между всеми буквами в слове. Трекинг может быть плотным, нормальным или разреженным.
Используется чаще как стилистический прием.
Когда точно нужен трекинг
Прописные буквы нужно разряжать, строчные разряжать нельзя.

Это золотое правило, которое работает во всех без исключения случаях. Разрядка нужна, чтобы текст был визуально равномерным — с одинаковым количеством белого пространства внутри букв и между буквами.
Интерлиньяж
Базовая линий — воображаемая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов.
Интерлиньяж
Интерлиньяж — расстояние между базовыми линиями.
Кегль
Размер шрифта по вертикали, включающий её нижние и верхние выносные элементы. Измеряется в пунктах (1п. = 0.376 мм).
В чем измеряется интерлиньяж
Удобнее всего измерять в процентах. Но в разных программах отмечают по-разному:
Фотошоп — pt (пункты)
Тильда — px
Фигма — можно самостоятельно выбрать
Выбираем интерлиньяж
Чем длиннее строка, тем больше интерлиньяж
Выбираем интерлиньяж
Чем больше размер шрифта, тем меньше интерлиньяж
Оптимальный выбор
Для наборного текста на сайте оптимальным выбором будет шрифт 16-го кегля с интерлиньяжем 150%. Делать шрифт меньше очень не рекомендуется. Исключение составляют поясняющие тексты, выноски и т. д.
Настройки шрифтов
В каждом редакторе есть следующие настройки (стили) шрифтов:
Жирность
Курсив
Подчеркивание
Настройки и начертания
Нельзя путать принудительные настройки шрифтов в редакторе и их начертания.

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

В настройках шрифта можно просто добавить ему жирность, тогда как начертаний может быть очень много: thin, light, regular, medium, bold, extra bold и т.д.

Мы не используем принудительные настройки шрифтов, кроме подчеркивания и зачеркивания.
Выключка
По левому краю
По центру
По правому краю
По формату
Когда какую
Выключку по формату в вебе не используем НИКОГДА.

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

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

Выключку по правому краю используем только как стилистический прием, например для заголовков.
Говорим на одном языке с FE
У браузеров есть ограничения по отображению шрифтов и по параметрам шрифтов, с которыми он может работать. Вот что понимает браузер:
font-family
Семейство и название шрифта
font-size
Кегль шрифта
font-stretch
Начертание: condensed, normal, expanded и т.д.
font-style
Начертание: normal, italic и т.д.
font-weight
Начертание: light, regular, bold и т.д.
font-spacing
Трекинг
line-height
Высота строки (равна интерлиньяжу)
word-spacing
Ширина пробелов
Высота строки
В браузере нет понятия "базовая линия", поэтому браузер преобразует интерлиньяж в высоту строки. Высота строки равна по высоте интерлиньяжу.
Шрифтовая
пара
  • Это пара шрифтов для заголовков и наборного текста.
  • Шрифтовая пара может состоять из 1 шрифта.
  • Шрифтовые пары нужны для того, чтобы разделять большое и маленькое, главное и второстепенное, литературное и фактологическое.
Инструменты создания шрифтовой пары
1
Шрифт
Это Антиква и Гротеск, например. Потому что между ними максимальный контраст.
2
Начертание
Как в рамках одного шрифта, так в рамках и разных шрифтов. К примеру, это обычное начертание (Regular), жирное и Italic.
3
Размер
Чтобы сделать заголовок к тексту – умножьте размер этого текста на 1,6 (пропорция золотого сечения). Если этого недостаточно, можно еще увеличить шрифт.
4
Цвет
Этот прием больше подходит для промо-страниц, чем для интерфейсных.
Не забываем про контраст
Не используйте 2 близких или очень схожих шрифта для создания шрифтовой пары. Из-за отсутствия контраста между шрифтами это будет выглядеть как баг.
Почему шрифты сочетаются
Futura+Adobe Garamond
У них одинаковые пропорции
(размеры белого пространства, соотношения прописных и заглавных)
Почему шрифты сочетаются
Farnham + Benton Sans
Похожая пластика
(например широта и приплюснутость строки)
Почему шрифты сочетаются
Sweet Sans + Old Style
Они могут быть диаметрально противоположны
(тут работает принцип контраста)
Ресурс для подбора шрифтовой пары. Можно смело выбирать оттуда, если не уверены в своих силах.
Правило близости
Очень часто размещают заголовок таким образом, что сверху и снизу расстояние до абзацев оказывается одинаковым.

Хотя читатель в большинстве случаев в состоянии сообразить, к чему относится заголовок, лучше потратить его читательское внимание на содержание, а не на расшифровку формы. Заголовок всегда должен быть привязан к своему абзац.
Шрифт
для интерфейса
  • Нейтральный
  • Гротескный
  • Басплатный
  • Прошел тест I1il
Что еще?
Если не уверены, что в шрифте надо что-то менять, то лучше не трогайте!
Для проекта достаточно 6 (а зачастую и 4) видов заголовков и 4 видов основного текста.
Оптимальная длина строки 50-75 символов (600px при 16 размере шрифт).
Ссылки делаем понятными: выделяем либо цветом, либо подчеркиванием.
Капс и жирный шрифт оставляем только для заголовков, кнопок и выделения. В наборном шрифте не используем.
Правильно используем кавычки и тире. Лучше для этого использовать типограф и прогонять все тексты через него.
Вертикальный ритм
Вертикальный ритм — это концепция, при которой мы пытаемся сохранить на странице вертикальное пространство между элементами согласованными друг с другом.
Почему это важно
Вертикальный ритм это важно, потому что он следует одному из принципов дизайна — повторению.

Повторение дает возможность создать ощущение, что вещи связаны вместе. Что они части одного плана.

Как создавать вертикальный ритм
Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.
https://www.gridlover.net/try
Что почитать
Ян Чихольд
Новая типографика
Джеймс Феличи
Типографика: шрифт, верстка, дизайн
Александра королькова
Живая типографика
Ян Чихольд
Облик книги
Артем Горбунов
Типографика и верстка
Роберт Брингхерст
Основы стиля в типогрфика
Домашнее задание
-1-
Создать типографический стайлгайд в фигме
-2-
Оформить статью дилера в соответствии со своим стайлгайдом