Книга: Научись уже делать картинки! «Учебник» маминой подруги, или Книга-презентация. Визуальные принципы мультимедиа для начинающих
Назад: Картинки. Выбор цвета, композиция, пропорции
Дальше: Глава 3. Сделай это просто!
Основы типографики
«Кавычки», которые ненавидят дизайнеры!
Взаимодействие букв и слов между собой – это типографика! То, ЧТО мы говорим, с помощью типографики обретает визуальную форму. Она дает нам возможность увидеть речь.
Создавать визуальный контент, не разбираясь в типографике, это как нечленораздельно рассказывать историю.
Не умеете работать со шрифтами – визуальный проект будет выглядеть любительским.
Я агностик, но очень сильно верю в типографику. На собственном примере убеждалась, как неправильно выбранный шрифт портит всю работу, проделанную до этого. Укроти шрифты, и ты будешь на полпути к созданию крутых вижуалов.
Итак, что мы должны знать о типографике.
Первым делом то, что чаще всего мы путаем термины: говоря «шрифт», подразумеваем «гарнитуру». Или наоборот. В чем разница?
Гарнитура – это семейство шрифтов. Они могут отличаться по начертанию, но у них единый стиль. Например, Helvetica или Arial – это гарнитура. Считайте – клан.
Шрифт – это начертание, которое входит в гарнитуру. Начертаний может быть несколько. Жирный, полужирный, тонкий, курсив и т. д. По идее, правильнее говорить не «шрифт Arial», а «гарнитура Arial», а о шрифте сказать, например, Arial Bold или Arial Italic. То есть у шрифта всегда есть дополнительное имя.
Чтобы было понятнее, обратимся к кинообразу. Предположим, что гарнитура Helvetica – это клан Сопрано. В нем очень много разных людей, объединенных родственными связями. Все они носят фамилию Сопрано и имеют похожую внешность, но все же отличаются друг от друга. Один высокий и толстый, другой низкий и худой. Тогда Тони из клана Сопрано будет шрифтом – например, жирным начертанием Helvetica. А его сын – курсивным.
«Все друзья рано или поздно подводят тебя. Семья – вот единственная опора», – говорил в сериале главный герой. Держись клана!
Скриншот превью мини-доков, вышедших на YouTube-канале «Три точки. Знай, что смотришь!». Обрати внимание на шрифты, их местоположение, как они работают с картинкой
Виды шрифтов
Виды шрифтов – это сообщества, в которые объединены кланы – гарнитуры. Чтобы было понятнее, представим, что это фешен-сообщества.
Любители винтажа, ретро и антиквариата – это всё гарнитуры с засечками. Они же антиква, они же старостильные/новостильные, они же романские, они же Serif. На концах букв есть засечки.
Из них выделяются брусковые. Которые вроде еще с засечками, но уже не такие ярко выраженные. И они толще. Вот так наберешь вес, и сразу вон из сообщества, идите в отдельное направление! Будем считать эти гарнитуры plus size. Проклятый фэтшейминг!
Без засечек. Они же рубленые, они же готические, они же гротеск, они же Sans Serif. Современная мода, ратующая за базовый стиль, тельняшки и обязательный бежевый тренч.
Рукописные. Имитируют рукописный почерк. Это одежда hand made. Некоторая продукция оригинальна, а некоторая вызывает оторопь. Вечный вопрос, сопровождающий этот вид: есть ли у авторов вкус и чувство стиля?
Акцидентные. Самые акцентные из всех. Иногда созданные под один конкретный проект. Если продолжать аналогию с модным стилем, то это хиппи, панки, рокеры и т. п. Порой слишком вычурные, на грани китча.
А теперь подробнее.
Шрифты с засечками используют для заголовков, больших текстовых блоков. Они обычно считаются более традиционными и классическими и могут быть лучшим выбором для печатных материалов, имеющих более формальный или традиционный стиль. «Кирпичи» текста, набранные таким шрифтом, легче читать. Глаза меньше устают. Так говорят некоторые специалисты по типографике. По мне – тема спорная. Я бы отметила, что раньше для нас такие тексты были читабельны – в советское время книги набирали в основном шрифтами с засечками. Но за последние годы в издательское дело пришел другой стиль типографики. И наш глаз переучился, он привык к шрифтам без засечек. Лично меня большие тексты «с засечками», наоборот, быстро утомляют.
Примеры:
Шрифты без засечек подойдут для большого массива текста. Используются для заголовков, афиш, баннеров, веб-дизайна и других цифровых материалов. Они передают современную атмосферу.
Примеры:
Рукописные шрифты тяжело читать. Поэтому их роль – быть акцентом. Часто их можно увидеть на обложках альбомов, автобиографий, пригласительных и т. д.
Примеры:
Акцидентные используют чаще в виде украшения или для привлечения внимания. Яркие, вычурные, броские, они – очень заметный элемент. Как неоновая вывеска «Бар». Часто используют в рекламе и глянце.
А теперь про кавычки. Кавычки – шпионский пароль. Используете неправильные – явка провалена. Графические дизайнеры, чьи посты в соцсетях я читаю, одно время так часто писали про неправильные кавычки, что мне казалось, они ненавидят тех, кто в этом не разбирается. Конечно, я утрирую. Но тема кавычек правда одна из хайповых.
Итак, что же с ними не так? Недизайнеры, создавая визуальный продукт, редко задумываются над тем, какие кавычки они ставят. Те, какие есть на клавиатуре по умолчанию. Не знаю, по каким причинам в клавиатуру не встраивают клавишу с нужными кавычками, но стандартно там всегда стоят не те – парные прямые " ". Чтобы поставить правильные, надо нажать на несколько клавиш. И главное, надо знать, что это надо сделать, интуитивно не догадаешься. Когда в свое время мне рассказали про эту комбинацию, казалось, мне открыли великое знание.
В нашей типографике принято ставить «елочки» – «». Их еще называют французскими. И только если есть кавычки внутри кавычек, то ставятся те самые парные прямые – немецкие "лапки". Они, в зависимости от шрифта, могут выглядеть как парные палочки или как парные запятые.
Пример
Предположим, такая цитата: «Все любят Абая, но не все любят "Путь Абая"». Здесь кавычки оформлены по правилам.
«Все любят Абая, но не все любят «Путь Абая»» – не по правилам.
Если есть что-то, раздражающее дизайнеров больше, чем неправильные кавычки, то это тире!
Есть три вида черточек. У каждого из них в типографике своя роль. Путаете – беда на оба ваших дома! Откуда путаница? По умолчанию на клавиатуре вы можете поставить дефис или среднее тире. А для длинного тире надо знать комбинацию клавиш – для MacOS это Option + Shift + -. Опять! А людям использовать символы по умолчанию проще и логичнее. Вместо того чтобы заставлять нас запоминать комбинации и приучать себя их использовать, разработчики могли бы уже придумать, как эти знаки разместить на клавишах. Нажал – и готово! Сорри за офтоп.
Дефис (маленькая черточка) -. Это орфографический знак. Соединительная черта между словами или знак переноса.
Короткое тире, или средний дефис, или знак минус (средняя черточка) –. Его используют для обозначения расстояний или диапазона числовых значений: 50–150, 2030–2050.
Тире (длинная черточка) —. Это пунктуационный знак. Делит части предложения. Визуально передает паузу в высказывании. Телевизионщики из-за этой его особенности часто ставят тире в текстах. Это помогает интонационно правильно начитывать закадровый текст. Я давно не работаю в теленовостях, но привычка осталась. Тире – мой любимый знак. Хотя корректор нашей газеты говаривала: «Тире – это знак отчаяния».
Еще два понятия, которые надо знать. Кернинг и интерлиньяж.
Кернинг – это когда изменяют расстояние между буквами, чтобы текст выглядел более читабельным. Какие-то буквы могут быть слишком близко друг к другу или, наоборот, слишком далеко, и это может выглядеть странно и затруднять чтение. Кернинг позволяет подправить это дело и сделать текст красивее и понятнее.
Потренироваться в кернинге можно на сайте . Тебе, возможно, и не пригодится, так как разработчики шрифтов заботятся о том, чтобы сбоев в их шрифтах не возникало. Но упражнения на этом ресурсе точно помогут натренировать визуальное восприятие – начнешь видеть, какой шрифт ломается, а какой нет.
Интерлиньяж – межстрочный пробел или расстояние между строками. Его еще называют межстрочный интервал. Очень сильно влияет на читабельность текста. Небольшой интервал между строками делает их прилепленными друг к другу. Это ухудшает восприятие текста. Слишком большой интервал делает строки несвязанными между собой.
Интервалы указывают на взаимосвязи между объектами, будь то графические элементы или текст. Правильно подобранный интерлиньяж придает текстовому блоку гармоничность.
На межстрочный интервал влияет длина строки. Если текст верстается в узкую колонку, то здесь межстрочный интервал можно делать уже. Это облегчит чтение. Если строки длинные, то интервал между ними должен быть шире, чтобы предложения не слиплись. В заголовках интерлиньяж обычно делают меньше. Заголовок состоит из одного или нескольких слов, которые воспринимаются как единый элемент. Меньший интервал помогает это единство сохранить.
Текст должен иметь опрятный внешний вид. Опрятность всегда более привлекательна, чем неряшливость. Неряшливость может проявляться в том, что ты поставил точку в заголовке (если обратное – не специальная фишка), добавил лишний пробел там, где он не нужен, не поставил правильные кавычки. А еще криво оформил списки. Смотри картинку. Не забывай следить за тем, чтобы пункты и цифры в списках не стояли далеко от текста. Они единое целое. Не разделяй любящие сердца!
И последнее про аккуратное оформление текста: выравнивание. Профессиональные дизайнеры называют его выключкой.
Есть три вида:
● по левому краю,
● по центру,
● по правому краю.
В любой ситуации, когда непонятно, как сделать лучше, выбирай выравнивание по левому краю. Не умеешь – выбирай левый край. Оно эстетично выглядит и менее опасно, если за дело берется новичок. А когда за дело берется новичок, опасность еще та (если ты понял, о чем я). Как-то удивительно, и я не знаю, как это устроено, но выравнивание по левому краю всегда придает текстовому блоку аккуратность. Если с двумя другими видами выравнивания надо прям думать, когда и как их использовать, то текст, «ходящий налево», оп – и ничего такой!
Выравнивание по центру почему-то любили участники моих тренингов по визуальному контенту. Видимо, потому, что он делает текст менее формальным и создает себе имидж: я у мамы креативный! Он как инстаблогер: может быть и правда такой, а может быть и нет. Не выбирай его автоматически. Это выравнивание требует действительно креативных идей. И его сложнее встраивать в композицию вижуала. Наберешься опыта – и тогда вперед!
Посмотри на мой постер для приюта для животных (условного приюта). Я постаралась показать, когда использование выравнивания по центру может быть уместным. Почему этот прием здесь оправдан? Потому что по моей задумке текст является частью морды собаки – ее ртом. Заголовок и слоган про приют, на картинке в итоге – пес. Хороший пример. А что думаешь ты?
Изображение сгенерировано ИИ
А теперь самое главное: как выбрать шрифтовую пару? Если ты думал, что сложно найти вторую половину для счастливой жизни, значит, ты никогда не подбирал шрифты.
Вот что в целом рекомендуют графические дизайнеры.
Два шрифта, которые используют для оформления текстов в одном пространстве, – шрифтовая пара. Как правило, один для заголовка, и он считается главным, второй для основного текста – второстепенный.
Не используй больше двух-трех шрифтов в одном проекте. Если только не в этом фишка твоего визуального оформления – например, ты хочешь показать хаотичность какого-либо явления. В ином случае напиханка из разных шрифтов выглядит неаккуратно, портит внешний вид и не создает стиль.
Разные шрифты или разные начертания и размеры одного шрифта используют, чтобы создать иерархию внимания. Пользователь должен понять, в каком порядке что смотреть и читать на «картинке».
Важно помнить, выбор шрифта – это не только вопрос эстетики, но и вопрос удобочитаемости и понимания текста. Правильно подобранные шрифты влияют на воспринимаемость публикации, поста, материала. Особенно в больших мультимедийных спецпроектах. Шрифты там выполняют, на мой взгляд, самую важную задачу: они визуальный крючок. Зацепит – и люди прочитают историю, не зацепит – уйдут. Будет жаль, ведь внутри спецпроекта классный сюжет, который в итоге не заметят.
.BANANA.WATCH. – неформальная академия медиаграмотности. Цвет и форма шрифта подчеркивают «неформальность». Сделано «.три. точки.)
Спецпроект «Уран, товарищи!». Распадающиеся слова – отсылка к распадающемуся урану. Сделано «Ливень. Living Asia»
Основной принцип выбора шрифтовой пары в том, чтобы они отличались друг от друга и работали на контрасте, но при этом имели общие черты.
Простые решения:
● Составить пару шрифтов из одной гарнитуры. У шрифтов из одного семейства одинаковая геометрия, они будут смотреться гармонично. Для визуальных карточек часто требуется всего лишь один шрифт, но разные его начертания.
● Сочетать два шрифта из разных групп. Один с засечками, второй без. Или один без засечек, второй акцидентный.
● Сочетать шрифты в рамках одного вида, но из разных гарнитур. Оба с засечками, но из разных семей. Или оба без засечек, но из разных семей.
● На контрасте работает и принцип толстый/худой. Для заголовков узкий шрифт, для основного текста – круглый.
«ИСТОРИЧЕСКАЯ СПРАВКА» № 6
Наш «любимый» 
«…в Европейском центре ядерных исследований, где Большой адронный коллайдер, нашли бозон Хиггса, "частицу Бога". То есть ученые ее сорок лет искали, и вот в тот день, когда наконец обнаружили, знаете, о чем все в твиттере писали? О Comic Sans. Профессор Фабиола Джанотти набрала свою презентацию, рассказывающую о результатах исследования, моим шрифтом. Я эту историю теперь часто вспоминаю, когда мне говорят, что Comic Sans только идиоты выбирают, а умные пользоваться им никогда не будут», – цитата создателя шрифта Comic Sans Винсента Коннера.
Он придумал этот шрифт, когда работал в Microsoft. Для одной новой программы был разработан пес по имени Роб, но его реплики были набраны традиционным Times New Roman. Винсент решил, что собаки не могут разговаривать таким скучным шрифтом, и предложил нарисовать что-нибудь в стиле комиксов. Вдохновлялся историями про Бэтмена и «Хранителями». Через три дня Comic Sans был готов. Проект, для которого он его придумал, не взлетел, но шрифт включили в дополнительный пакет Windows 95.
Винсент продолжал работать, Comic Sans жил своей жизнью, и о популярности детища среди обывателей автор не догадывался. Пока не получил письмо от двух дизайнеров, извещавших Винсента, что они запускают кампанию по бойкоту шрифта. Оказалось, Comic Sans по каким-то причинам полюбился непрофессионалам и его массово использовали в самых неожиданных местах. Сам автор перечисляет такие: мемориал жертвам Второй мировой войны в Голландии, пляжное полотенце в Австралии, этикетки на французском крем-фреше, фотоальбом, посвященный папе Бенедикту на сайте Ватикана, меню из ресторана, многочисленные вывески магазинов.
Синонимом Comic Sans стала неуместность. Шрифт люто возненавидели графические дизайнеры. И они объясняли, почему:
Comic Sans не подходит для серьезных проектов, таких как бизнес-презентации или официальные документы. Удешевляет вид и делает весь посыл легкомысленным.
Comic Sans имеет слишком много украшений в дизайне, что делает его трудным для чтения. Может вызывать глазное напряжение. Кстати, как вам читать весь этот текстовый блок?)))
Comic Sans не имеет достаточного разнообразия и гибкости в использовании. С ним не сочетаются другие шрифты.
Вокруг Comic Sans так много постоянного стеба, что его использование может восприниматься как намеренный троллинг (но если это и есть цель вашего проекта, то тогда летсгоушки!).
Среди разработчиков комиксов этот шрифт тоже, говорят, не пользуется уважением.
Этот шрифт-бедолагу так долго полоскали в дизайнерских кругах, что теперь его модно оправдывать. Да, шрифт не виноват в том, что его используют не по назначению. Нет, нельзя считать, что у людей, использующих его, нет вкуса. Просто надо знать, что он создавался как акцентный шрифт! Не для массивных текстов. И если столько людей его полюбили, значит, было за что? За его визуальную легкость, непринужденность и непохожесть на официозный печатный язык.
«…он давно стал частью поп-культуры, и никуда от этого не спрятаться. …Если люди выбирают мой шрифт из сотен других, значит, он им по-настоящему нравится, так что – да, я бы хотел, чтобы меня запомнили как человека, который придумал самый любимый шрифт в мире», – Винсент Коннер.
Изображение сгенерировано ИИ
Задание для преподавателей1 Попросите ваших студентов рассказать о том, как выбор шрифта влияет на создание картинок в социальных сетях.2 Какие основные рекомендации они предложат по выбору шрифта для создания картинок в социальных сетях, учитывая различные факторы: цель сообщения, тематику, аудиторию и тип социальной сети.3 Предложите им придумать свой вариант шрифта для создания картинки с определенной тематикой и обосновать свой выбор. Пусть создадут картинку с использованием выбранного ими шрифта. Удачен ли их выбор?4 Зная историю шрифта Сomic Sans, пусть дадут ему второй шанс! Пусть придумают варианты, когда стоит его использовать и он будет уместен. Мог бы этот шрифт стать главной фишкой спецпроекта? Какого? О чем бы он мог быть? Например, спецпроект о поп-культуре конца 90-х, об истории самого шрифта – ведь такой потрясающей биографией вряд ли может похвастаться какой-либо другой шрифт или спецпроект о становлении комиксов как отрасли развлечений.Стань соавтором!Твои заметки на пустых страницах этой книги делают тебя моим соавтором.Страница для твоих размышлений по теме: запиши их или нарисуй.
