Вилли Кунц

«Типографика: формирование и трансформация»

Перевод книги Typography: Formation and Transformation подготовила студентка Bang Bang Education Валерия Бенецкая. Мы публикуем первый раздел книги «Формирование информации». Полный перевод можно прочитать тут. Текст публикуется с разрешения автора. ​​

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

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

Эта книга привлекла меня своей ясностью, простотой и практичностью — в ней нет воды или философствования. У нее логичная структура: от разбора микроуровня к более сложным элементам и их взаимодействию друг с другом. Иллюстрации делают текст ясным: если что-то непонятно в самом тексте, они помогают уточнить мысль автора. И конечно, она очень приятно сверстана», — Валерия Бенецкая.

Интро к разделу

Типографический дизайн начинается с набора информации и общего представления. Сталкиваясь с «чистым листом», многие дизайнеры беспокоятся о том, с чего начать разработку дизайна.

Очевидной отправной точкой служат элементы типографики. Буквенные формы привычны для нас и редко удостаиваются детального рассмотрения.

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

Лишенный этой базы дизайнер упускает возможность использовать ее как трамплин к решениям.

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

Иллюстрация 2. Нюансы оптических компенсаций в буквах. Первая строка: буквы без оптических компенсаций (сверху) и с оптическими компенсациями (снизу). Вторая строка: разворот на 180 градусов выявляет, что верхние части букв на самом деле меньше, чем нижние. Третья строка: горизонтальная осевая линия четко по центру делает буквы непропорциональными по сравнению с буквами, у которых она определена оптически. Четвертая строка: примеры из Futura.

Иллюстрация 3. Контрформы букв и контрформы между знаками.

Буквы

● Создание формы буквы

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

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

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

При комбинации оптические свойства отдельных штрихов объединяются в новых формах.

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

● Конфигурации штрихов

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

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

● Вариации форм букв

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

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

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

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

● Микроэстетика форм

Каждая буква — это сложный, динамический элемент. Выверенность буквенной формы зависит от тонкой оптической настройки и сложной микроэстетической детализации. Для наметывания глаза стоит пристально изучать классические образцы шрифтов с хорошими буквенными формами (автор рекомендует: Bembo, Bodoni, Garamond, Akzidenz-Grotesk, Futura).

● Общие принципы, применимые к дизайну букв:

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

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

Futura, разработанная Паулем Реннером в 1927 году, — один из немногих успешных шрифтов на основе базовых геометрических форм (круг, квадрат, треугольник). Однако в нем тоже есть оптические компенсации.

Форма букв — богатый источник вдохновения. Проектирование логотипов очень часто происходит на основе подходящих буквенных форм.

● Самобытность буквы

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

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

Буквенный оптический вес относится к ее плотности — то есть к тому, насколько она «вычитается» из фона.

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

Буквы группируются по типам, в зависимости от атрибутов, — например, на строчные/прописные и так далее. Группировка по типам дает понимание логики того, как буквы соотносятся друг с другом.

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

● Контрформа букв

Буква состоит из запечатанной части и «белого», схваченного запечатанной областью. При этом белое — такая же важная часть.

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

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

Инвертированная контрформа подразумевает третье измерение (глубину) и, подобно фигуре в окне, расширяет образ и внутренний ритм буквы.

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

● Части букв

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

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

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

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

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

Важная деталь — оптическая ровность в левой части буквы. Буквы с четким выравниванием в левой части более устойчиво держат левый край колонки и выравниваются по другим объектам.

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

Формирование слова

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

Последовательность букв создает значение и форму слов.

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

● Форма слова

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

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

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

● Ритм слова

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

Выбор регистра может повлиять на передачу смысла слова (См. пример в тексте книги со словом PEAK. Стр. 44).

Компоненты слова — слоги. Они определяют расстановку переносов и произношение. Слоги создают подсознательный ритм чтения.

Слоги акцентируют отдельные части слова. Разбивая слово определенным образом, можно привлечь внимание к его части, внося дополнительный смысл (in-forma-tion, например). Поэтому важно следить за автоматическими переносами по слогам.

Межбуквенное пространство гибко. Например, открывая пространство между буквами в слове, мы акцентируем отдельные буквы, меняем ритм его чтения (например: читаем с р а с с т а н о в к о й).

Оптимальное межбуквенное расстояние определяет контрформа строчных букв. Крупная контрформа требует большее межбуквенное пространство, мелкая — меньшее. Для разборчивости, межбуквенное пространство должно быть оптически равномерным.

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

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

● Изменения слова

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

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

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

Иллюстрация 1. Строка характеризуется длиной, весом и направлением. Ритм строки.
Иллюстрация 2. Примеры различных текстур текста, получаемых в результате разного интерлиньяжа и длин строк.
Иллюстрация 3. Различные виды выравнивания колонок на формате.

Формирование текста

● Типографическая строка

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

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

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

● Длина строки

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

Оптимальная строка (для английского языка) — это 4–10 слов средней длины.

● Выравнивание

Наиболее частые виды выравнивания:

— флаговое слева направо (с неровным правым краем);
— флаговое правое (с неровным левым краем);
— центрированное;
— свободной формы;
— выравнивание по ширине.

Флаговое выравнивание слева направо обычно предпочтительнее. Контраст между ровным левым краем и живым правым поддерживает интерес к тексту. Ровный левый край прост в отслеживании начала строки.

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

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

Хорошая верстка достигается с помощью переносов. Простые одиночные слова не должны неловко переноситься. Слова, неразделимые по смыслу (New York, Le Corbusier или 200 million), не должны разбиваться. Короткие слова и слоги не должны висеть в конце строки.

● Абзацы

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

Начало абзаца может быть втянутым внутрь блока текста, свисающим (выступающим) влево либо отбитым пустой (пробельной) строкой. Эффективный абзац — ясный и четкий, не менее 1/8 длины строки. Короткие отступы создают неоднозначный зубчатый левый край, особенно в коротких строках. Первый абзац делается без отступа.

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

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

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

● Оптические значения текста

Оптические значения определяются через текстуру текста. Спокойная текстура текста привлекательна для чтения.

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

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

Кроме того, некоторые параметры текста — такие как количество прописных и чисел (в размер прописной, а не «строчных» минускульных) — также могут влиять на текстуру текста.

● Колонки

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

Тот же текст в два столбца и более лучше структурирован: его объем кажется доступным, а игривое представление привлекает читателя.

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

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

Произвольная отбивка абзацев — плохая идея для колонок, так как строки начинают не совпадать на просвет.

● Размещение колонок

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

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

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

● Смешанная ширина

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

Важно, чтобы текст сохранял связность и разная ширина не отвлекала от содержания.

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

Полный перевод можно прочитать тут.

Поделиться
facebook
vk
twitter

Онлайн-школа дизайна и иллюстрации Bang Bang Education

Раз в неделю мы присылаем письмо с подборкой новых выпусков «Точки зрения».