Шрифты, типографика в дизайне

Плохое знание правил использования шрифта может испортить хорошую работу. Молодым дизайнерам важно понимать типографику и коммуникативные возможности шрифтового искусства.
ДЕНЬ 5/6
Что такое типографика?
На фото: Стенли Морисон на полосе газеты The Times, для которой Морисон разработал знаменитый шрифт Times.
Согласно Википедии, типографика является одной из отраслей графического дизайна и представляет собой свод правил верстки печатного текста.

Как правило, типографику связывают с оформлением книги и созданием шрифта.Так сложилось исторически. В 1929 году Стенли Морисон дал определение типографики, ставшее классическим: «…искусство подобающего расположения наборного материала сообразно конкретному назначению».

Стенли Морисон и Роберт Брингхерст определяли типографику как искусство, Ян Чихольд утверждал, что типографика — это больше наука, чем искусство. Эмиль Рудер определяет типографику как вид графического дизайна.
С лёгкой руки Максима Жукова на русском языке в 90-х годах появилась книга Эмиля Рудера «Типографика». В послесловии к книге Жуков пишет о том, что Рудер своим видением дополнил и расширил старые определения типографики, которые можно было найти в классических энциклопедиях. В трактовке Рудера, типографика — «это вид изобразительного искусства, род тиражной графики, чей художественный язык строится на применении типографского наборного материала: шрифта, украшения, линеек и т.п.» — пишет Максим Жуков.

Есть мнение, что в нашей стране этот термин стал широко применяться после выхода книги «Типографика» в переводе Максима Жукова.
Эмиль Рудер. Типографика
Легендарная книга в переводе Максима Жукова
«Типографика — …искусство подобающего расположения наборного материала сообразно конкретному назначению». — Стенли Морисон
Анатомия шрифта
Рис. Б. У каждой части буквы есть свое имя. Главные термины, которые нужно знать: курсив, сериф, вертикальные и горизонтальные штрихи, строчные и прописные буквы, верхние и нижние выносные элементы.
Относитесь к выбору шрифта очень серьезно. Раньше шрифты создавались, чтобы решать проблемы при печати. Во времена печатного пресса и переноса краски с свинцовой буквы на бумагу, создатели шрифтов думали о износе буквы и затекании краски, поэтому на свет появился такие гарнитуры как Hermes и Block. Мягкие контуры и низкий контраст букв скрывали износ при печати и позволяли получить бОльшее количество оттисков.
Сегодня мы получаем информацию на дисплее Retina, поэтому современный вид шрифтов отражение эстетических предпочтений дизайнера.

Для описания графической формы букв используют специальную терминологию. Вам необходимо знать ключевые термины, которые определяют букву: высота строчного и прописного знака, засечка, открытость букв, основные и соединительные штрихи и аппертура.
Шрифт или гарнитура
На рисунке показана гарнитура IBM Plex Serif, которая состоит из 4 шрифтов.
Возможно, эти два слова в типографики путают чаще всего: шрифт (font) и гарнитура (typeface). Шрифт (font) — это графически упорядоченная изображение знаков системы письма: букв, цифр, символов, знаков препинания и т. д. Например, шрифт IBM Plex Serif на macOs выглядит как «IBMPlexSans-Bold.ttf», а семейство — это целая папка с шрифтами в одном стиле.
Гарнитура (typeface) — это общее семейство шрифтов в едином стилистическом начертании. Чтобы понять насколько большая разница между понятиями «шрифт» и «гарнитура» попробую сравнить с музыкой. «Гарнитура» — это музыкальный альбом группы из нескольких песен, объединенные стилем и звучанием, а «шрифт» — это песня в этом альбоме.
Строчная высота букв
Рис. Б. Высота строчного знака определяет визуальный размер букв. Например высота строчных знаков у буквы «Х» Helvetica выше высоты Times New Roman. Размер шрифтов одинаков.
На рис. А сравнение высоты строчных знаков у знаменитых шрифтов: Helvetica и Times New Roman. Визуальный размер шрифта определяется высотой строчного знака. Это значение меняется и отличается между шрифтами. У шрифтов с бОльшей высотой строчного знака меньше выносные элементы. Например, на рис. А шрифты набраны одним кеглем, но высота строчных знаков в Helvetica больше, чем в Times New Roman. Это надо иметь в случае, если вы подбираете подходящую пару выбранному шрифту. Знаменитый ресурс Google Fonts поможет подобрать нужную пару по нескольким параметрам, и один их них это высота строчного знака.
Кегль
Слева. Кегль шрифта (point size) определяется одинаково как в металлическом, так и в цифровом наборе. Прямоугольники штрихом — кегельные площадки металлических литер или цифрового шрифта. И те, и другие определяют пространство, занимаемое буквами на странице.
Справа. Скриншот из графического редактора Adobe Illustrator. Синяя линия показывает размер шрифта в пунктах.
Кегль (см. рисунок) — высота строчных букв + верхние и нижние выносные элементы + небольшое расстояние по краям. Ранее каждая буква отливалась самостоятельным блоком. Площадка, на которой располагалась буква, была немного больше, чем сама буква. Отступы по краям площадки не давали соприкасаться с другими буквами. В современном, цифровом варианте шрифта кегль остался равен высоте площадки.

Типографский пункт (точка) — ед. изм. кегля шрифта. Исторически сложилось указывать размер кегля в пунктах (pt). Существует несколько версий того, чему равна величина пункта. Подробнее можно прочитать в Википедии. Мы будем использовать величину, предложенную Adobe. Пункт — pt от англ. «point» — 1/72 дюйма. 1 дюйм = 72 пункта, поэтому пункт, введённый компанией Adobe, приравненный к 1/72 дюйма, то есть 25,5/72 мм = 0,3528 мм.
Интервалы
В примерах вверху: А — отрицательный, Б — нормальный, В — положительный трекинг. Слишком большой или маленький интервал выглядит неуместно и может затруднять чтение. Это не относится к специальным визуальным приёмам в графическом дизайне. Внизу на рисунке пример пробела в шрифтах IBM Plex Serif Regular и PT Sans Regular.
Трекинг — (от англ. tracking) — пропорциональное изменение расстояния между буквами (межбуквенных пробелов).
В отличие от кернинга, который регулирует расстояние между знаками в определенных парах («AV», «TA» и пр.), трекинг применяется к группе символов (слово, строка, абзац и т. д.).
Увеличение трекинга (разрядка) делает набор более разрежённым, светлым; уменьшение — более плотным и тёмным.

Интервал между словами (на рисунке) равен строчной «i». Пробелы, больше чем эта величина ухудшают читабельность. Бытует мнение, что русском языке слова длиннее, чем в английском, поэтому пробел между словами может быть шире. В Adobe Illustrator стандартный пробел равен величине «i».
Классификация шрифтов
Рис. В. Слева три гарнитуры имеют засечки, отличительный признак шрифта. Helvetica — яркий представитель гротесков. Brush-up и Heroe — акцидентные шрифты.
Когда вы пытаетесь выбрать нужную вам гарнитуру перед вами стоит нелегкий выбор. Один из вариантов (рис. В) упростить классификацию шрифтов по можно относительно их роли в дизайне. Выделим 3 больших групп: антиквы и гротески для текста и набора, акцидентные (display) и декоративные (decorative).
Шрифт Caslon с засечками используют для набора книг. Bodoni не используют для набора большого массива текста, но зато он блистает в заголовках журнала. Roboto Slab был создан для использования в цифровой среде.
Helvetica — швейцарский нож в графическом дизайне. Он входит в группу новых гротесков для универсального использования. Он хорошо смотрится на плакатах, в книжной наборе и в цифровой среде. Brush-up и Heroe — яркие примеры декоративных шрифтов. Им нашли применение в буквицах, и заголовках при оформлении глянцевого журнала.
«Единообразие букв и есть основа красоты в типографике, её сущность в повторяющемся рисунке букв и тиражной природе печати». — Эмиль Рудер
Стиль шрифта
На рис. Г проиллюстрированы начертания шрифта Univers от Linotype в разных стилевых особенностях. А,Б — наклон шрифта: прямой, наклонный (курсивный). В, Г, Д — насыщенность шрифта: светлый, полужирный, жирный. Е, Ё, Ж — пропорции шрифта: узкий, нормальный, широкий.
Согласно справочнику Паратайп, начертание шрифта — это вариант рисунка наборного шрифта одной гарнитуры. Начертания шрифта характеризуются едиными стилевыми особенностями рисунка, определенными пропорциями (узкое, нормальное, широкое и др.), насыщенностью (светлое, полужирное, жирное и др.), постановкой очка, или наклоном знаков (прямое, курсивное или наклонное), декоративной обработкой контура знаков (контурное, оконтуренное, оттененное и др.).

Насыщенность – отношение толщины основных штрихов к высоте прямого знака. Количество степеней насыщенности может быть очень большим, как у Univers от Linotype а их названия могут варьироваться. Многим шрифтам присущи три общих стиля: курсив, наклонный шрифт и капитель. Курсив — печатный шрифт с наклоном основных штрихов приблизительно в 15° и скруглёнными формами штрихов и их соединений, несколько напоминающий рукописный. Не все шрифты имеют курсив, например, начертание Univers 45 Light Oblique на рис. Г не курсивный, а наклонный шрифт.
Сочетания шрифтов
Jack Qiao обучил нейронные сети (веб-сервис Fontjoy) подбирать гармоничные шрифтовые сочетания при помощи обучаемого алгоритма.
Сочетание шрифтов, вероятно, одна из самых интересных и сложных задачек в типографии. Там нет определенных правил и это делает процесс интересным. Конечно, есть рекомендации. Чтобы получить захватывающий вариант, от вас потребуется знание шрифтов, творческая смекалка и терпение. Результат превзойдет ваши ожидания и время, которое вы потратите окупится стократ.

В этом уроке рассказывается о двух простых трюках, которые дадут вам преимущество перед другими дизайнерами. Полная версия о способах гармоничного сочетания шрифтов даётся в платной версии этого курса.
Как правильно подбирать шрифты?
Гарнитуры Gotham Pro и Merriweather будут хорошо сочетаться, потому что у них очень близкие высоты строчных знаков.
Самый простой способ подобрать несколько шрифтов для вашего проекта — взять за основу высоту строчного знака. Если высоты совпадают или очень близки, то такие гарнитуры хорошо сочетаются, так как имеют одинаковый визуальный вес.
Гарнитуры Gotham Pro и Merriweather будут хорошо сочетаться, потому что у них очень близкие высоты строчных знаков.
Использовать шрифты из супер семейств — ещё один способ найти гармоничное сочетание двух и нескольких шрифтов для проекта. Некоторые гарнитуры разрабатываются большой шрифтовой группой, но могут быть с засечками и без. Примеры таких семейств Roboto и Roboto Slab, PT Sans и PT Serif, IBM Plex Sans и IBM Plex Serif.

Сложно ошибиться, используя стили одного супер семейства. Они создаются именно с целью упростить дизайнеру выбор шрифта. Начните с этого способа. Он поможет развить навыки комбинирования шрифтов.
Не используйте слишком много шрифтов в одном проекте. Конечно, бывают исключения. Как правило, в дизайне упаковки вам приходится искать баланс между 3 и более шрифтами. Например, шрифт в названии бренда, преимущества, блочный текст со служебной информацией и др.
Не делайте слишком большую или короткую длину строк. Помните, что от 40 до 80 — оптимальное количество знаков в дизайне. Помните, что бывают исключения и не надо слепо следовать правилам.
Простой способ вычислить длину строки с помощью метода Роберта Брингхёрста (Robert Bringhurst), который умножает размер шрифта на 30. Если размер кегля 10 px, умножая его на 30 получим 300 px или, приблизительно, 65 символов в строке.
Хороший баланс между «воздухом» и цветом текста может зависеть от межстрочного расстояния. Можно рассчитывать интерлиньяж с помощью простой формулы «полтора». Для начинающих будет несложно запомнить правило. Размер текста 16 пт, интерлиньяж — 21 px. 16 / 2 = 8 + 16 = 24. Исключение: это правило хорошо работает в веб-дизайне. Делать верстку книги по этому правилу вам не позволят.
От буквы до алфавита
Рисунок. От наскальной живописи в пещере Ласко до Финикийского алфавита
От наскального рисунка до буквы в алфавите.
Первые буквы выглядели не так как мы привыкли их видеть. Древний человек, изображая охоту в пещере, передавал первое сообщение с помощью картинок. Первые рисунки стали пиктограммами, а буквы прошли долгий путь до современного изображения в алфавите. Первые буквы появились за долго до появления первых книг.

Пиктографическое письмо (от лат. pictus — нарисованный и греч. grpho — пишу) — рисуночное письмо, пиктография, отображение содержания сообщения в виде рисунка или последовательности рисунков.
Пиктограммы были отвлеченными от фундаментальных понятий рисунками основных объектов и идей, таких как мужчина, женщина, огонь, еда, дерево и укрытие. Они выполняли функцию современных комиксов и рассказывали истории о охоте и быте древнего человека.
Идеограмма или логограмма.
В логографическом письме появилась возможность передавать отвлеченные, сложные понятия и оно было понятно большинству народов, но грамматические изменения ему не под силу.
Утверждение «Человек не может не общаться» известно как первая аксиома коммуникации по Вацлавику (из книги Эрика Шрикермана «О шрифте»). В этой же книги автор рассказывает историю о то, как его приятель посетил Японию и был необычайно расстроен тем фактом, что не мог прочитать ни ценников, ни дорожных знаков. Тех, кто был в этой стране, можно разделить на две группы. Первые умеют «читать» картинки и отсутствие текста не доставляет им дискомфорта, вторая группа людей чувствуют себя потерянными, потому что ничего не понимают.


Не обязательно подписывать внизу этот знак. Сообщение понятно на любом языке

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

В «Книге про буквы: от Аа до Яя» Юрий Гордон приводит свои определения графемы. В одном из них он сравнивает конструкцию графемы с архитектурным сооружением, которое имеет колонны, крышу и основание, в другом — со зверем, у которого есть тело, лапы и хвост.
Пещера Ласко и схематичные изображения быков
«Человек не может не общаться.» — Поль Вацлавик
Терминология
Русская типографика сравнительно молодая, если сравнивать с европейской. Основы терминологии заложили Владимир Кричевский и Владимир Ефимов. В этом уроке мы следуем терминам Ефимова, потому что она ближе современным понятиям и созвучна с компьютерным терминам в графических приложениях. Для тех, кто ищет отличия в терминологии русской типографики рекомендую читать книги Владимира Кричевского «Типографика в терминах и образах» и Юрия Гордона «Книга про буквы: от Аа до Яя».
Оптические иллюзии
Графический дизайнер Эмиль Рудер в книге «Типографика» отмечает особенность восприятия человеческого глаза. «Печатная литера, которую глаз, находит «правильной», не может быть построена. Глаз склонен к преувеличению всего горизонтального и к более слабому восприятию вертикальных частей. Оптические иллюзии нельзя отбросить как пустяки, и всякий проектировщик должен представлять себе связанные с этим проблемы.»
Пауль Клее тоже выражает скептицизм к геометрии: «Мы конструируем и конструируем, а все же интуиция и доныне — хорошее дело. Без нее можно многое, но не всё.»
Понимание оптических иллюзий в типографике помогает создавать эстетически верные проекты.

А—геометрически точный квадрат кажется ниже по высоте. B — при точном разделении нижняя часть кажется меньше по высоте. Ç — вертикальная линейка зрительно становится тоньше. D — горизонтальные линии зрительно удлиняют квадрат в высоту. E — вертикальные линии расширяют квадрат. F— черный квадрат при уменьшении выглядит как круглая точка. G—белый квадрат на черном выглядит крупнее своего брата на белом. рис H. K— геометрически точный круг кажется вытянутым в ширину
Геометрия букв в шрифта построена на знании и понимании оптического эффекта. Основные вертикальные штрихи всегда толще, чем горизонтальные. Буквы, построенные на овалах всегда зрительно кажутся меньше, чем их братья с вертикальными и горизонтальными штрихами, поэтому дизайнеры делают их выше и ниже базовых линий.
В местах, где соединяются основные и соединительные штрихи, вносят облегчающие «клинья», иначе будут образуются оптические залипы — см. рисунок. Острые углы в местах стыка штрихов облегчают, визуально показывая стройность соединений.

А— геометрически правильный центр находиться ниже оптической линии. B — верхнее и нижнее свисание в круглых буквах оптически выравнивает букву в размерах. Ç — оптические клинья улучшают восприятие и устраняют залипы.
Классификация шрифтов
Гарнитуры бывают разных стилей и характеров. Две основные группы — это гротески и антиквы. Антиквы (или шрифты с засечками) имеют общий отличительный признак — засечки. Засечки — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака
Антиквы, как и гротески, имеет множество стилей. Антиквы старого стиля: Венецианская, итальяно-французская, Барочная, голландсткая, английская. Вторая условная группа включает в себя современные антиквы: классические, брусковые, малоконтрастные.
PT Sans — антиква с преувеличенными засечками
Гарнитуры бывают разных стилей и характеров. Две основные группы — это гротески и антиквы. Антиквы (или шрифты с засечками) имеют общий отличительный признак — засечки. Засечки — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака
Антиквы, как и гротески, имеет множество стилей. Антиквы старого стиля: Венецианская, итальяно-французская, Барочная, голландсткая, английская. Вторая условная группа включает в себя современные антиквы: классические, брусковые, малоконтрастные.

В на примере двух гарнитур показаны отличия между шрифтами с засечками и гротесками. .
Одна из самых популярных и больших групп шрифтов носит название гротески (рубленые). Характеризуются малой контрастностью или полным отсутствием визуального контраста между основными и соединительными штрихами. Форма овалов, степень открытости знаков и разноширинность — отличительные признаки, по которым гротески условно делятся на старые, новые, геометрические и гуманистические.
Первые гротески появились сравнительно недавно, в XIX веке в Англии. Для шрифта характерна простая и геометрическая форма.
Helvetica — новые гротески. Закрытый одноширинный шрифт почти без контраста.
Одна из самых популярных и больших групп шрифтов носит название гротески (рубленые). Характеризуются малой контрастностью или полным отсутствием визуального контраста между основными и соединительными штрихами. Форма овалов, степень открытости знаков и разноширинность — отличительные признаки, по которым гротески условно делятся на старые, новые, геометрические и гуманистические.
Первые гротески появились сравнительно недавно, в XIX веке в Англии. Для шрифта характерна простая и геометрическая форма.

Характерная особенность гротесков — малый контраст или полное его отсутствие между основными и соединительными штрихами. По краям «Н» и «т» — шрифт Open Sans, «N» — Merriweather.
Материалы
  1. Сочетания русских шрифтов | Сайт
  2. Генератор шрифтовых сочетаний | Веб-сервис
  3. Фильм Гельветика (Helvetica Film), 2007 | Видео
  4. Справочник Паратайп | Сайт
  5. Canva Font Combinations | Tool/collection
  6. А. Королькова «Шрифт в современном мире» | Видео
  7. Шрифты. Происхождение видов | Презентация
  8. Бесплатные шрифты | Телеграм канал
  1. Великие шрифты. Times New Roman | Статья Владимира Ефимова.
  2. Глава Таймс Нью Роман в книге «Великие шрифты»
    Скачать в pdf.
  3. Журнал о шрифте и типографике | Сайт Шрифт
  4. Энциклопедия Паратайп | Сайт
  5. Каталог бесплатных шрифтов | Google fonts, Myfonts

Домашнее задание

Предложите обновленную структуру блока «Типографика». Сделайте удобное содержание блока. Разбейте блок на смысловые разделы. Начните, например с истории, перейдите к определению, допишите классификацию шрифтов, дополните недостающими разделами.

Создайте свою страницу с блоком типографика, используйте готовый шаблон 6163080 практики. Проверьте контент блока, исправьте ошибки, используя онлайн-инструменты и документ Ильи Рудермана.
Задание 3.1
Для успешного выполнения задания нужно изучить базовые понятия в типографик.
Изучение. Изучите тему блока. Создайте новый раздел в гугл-доке. Сформатируйте текст.
Подсказка: Как правильно копировать и вставлять текст. Ссли копируете текст, то при вставке используйте горячие клавиши: вставка → вставить без форматирования (ctr+shift+v).

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

  • Материалы. см в уроке
  • Сроки. до 19 июня, 11:00
  • Дополнительные задания. Даются в тексте блока
Перед выполнением домашнего задания, надо нажать кнопку «пройден урок». Важно! Задайте вопросы к блоку «Типографика»
Задание 3.2 продолжение
Верстка. Сверстайте в Тильде материал, который вы сделали в задании 3.1. Дополните своими замечаниями, добавьте «иерархия», «рекомендациями, как выстроить свою систему» и «как правильно сочетать шрифты»
Расширьте тему «Типографика» разделами:
  • иерархия в вёрстке (возьмите материал отсюда)
    • вес, контраст, масштаб, золотое сечение
    • Рекомендации, как создать свою систему (Calculate your own visual type scale)
  • расширьте раздел «сочетания шрифтов»
  • Сроки. У вас есть всего один день на это задание.
Не плодите документы. Продолжайте работать в том документе, который создали в первом задании. Сделайте новый раздел. Поставьте его выше задания №1
Урок пройден?
Да

Задайте вопрос или прокомментируйте

Оставьте, пожалуйста, комментарий. Мне, как разработчику курса важно знать ваше мнение.