Глава 1 — «Типографика и верстка»

Типографика

Характер и стиль шрифта, характеристики шрифта и их применение

Привет!

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

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

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

Задание 1. Важность деталей.

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

Многие люди с трудом сознательно смогут заметить разницу в шрифтах схожей формы. Например, разницу между двумя гротесками (Arial и Helvetica) или антиквами (Times New Roman или Garamond). Но бессознательно, читая текст, им будет не только проще читать текст написанный одним, а не другим шрифтом, они даже будут по разному относится к его содержимому.

Давай проверим, сможешь ли отличить их ты.

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

Давай проверим, сможешь ли отличить их ты

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

Пройти тест

Тут два шрифта: Times New Roman и Garamond. Какой из них Time New Roman?

Вариант 1

Правильно! Кстати, во всех гос организациях в нашей и ряде других стран в документах используют шрифт Times New Roman. Есть исследование, результаты которого показывают, что если бы его заменили на очень похожий Garamond, то краски на печать документов тратилось бы на 25% процентов меньше. Правда тут учитывалась печать на струйных, а не лазерных принтерах.

Вариант 2

Не правильно. Times New Roman под номером 1. Кстати, во всех гос организациях в нашей и ряде других стран в документах используют шрифт Times New Roman. Есть исследование, результаты которого показывают, что если бы его заменили на очень похожий Garamond, то краски на печать документов тратилось бы на 25% процентов меньше. Правда тут учитывалась печать на струйных, а не лазерных принтерах.

Дальше

Проверить

Показать результаты

Какой из этих шрифтов Didot?

Вариант 1

Неправильно, Didot под номером 2

Вариант 2

Правильно!

Дальше

Проверить

Показать результаты

Посложнее: какой тут шрифт Times New Roman?

Вариант 1

Правильно!

Вариант 2

Неправильно, Time New Roman под номером 1

Дальше

Проверить

Показать результаты

И последний, самый популярный: какой из этих шрифтов Helvetica?

Вариант 1

Неправильно...

Вариант 2

Правильно!

Дальше

Проверить

Показать результаты

Возможно тебе стоит пройти тест еще раз

Попробовать снова

Возможно тебе стоит пройти тест еще раз

Попробовать снова

Хороший результат, молодец!

Попробовать снова

Хороший результат, молодец!

Попробовать снова

Отличный результат!

Попробовать снова

Arial и Helvetica действительно очень похожи. Их отличия крайне малы и заметны лишь в деталях. Но эти детали и сделали шрифт настолько популярным, что он стал единственным в истории шрифтом, про который сняли полнометражный фильм.

Вернемся к восприятию шрифтов людьми. Режиссер Эррол Моррис провел эксперимент: 45 000 его участников прочитали отрывок из книги физика Дэвида Дойча о маловероятности того, что Земля будет разрушена астероидом. После прочтения отрывка, Эррол попросил читателей пройти опрос о том, считают ли они утверждение Дойча правдой и насколько они уверены в этом заключении. Эксперимент заключался в том, что отрывок из книги выводился пользователям рандомно одним из шрифтов:

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

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

Задание 2. Шрифт.

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

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

На читаемость влияет и форма шрифта и верстка текста. Сейчас поговорим о первом.

Есть два термина, которые очень часто сводят в один или путают: шрифт и гарнитура.

Гарнитура — это шрифтовая семья / набор шрифтов в разных размерах и начертаниях (пропорции, насыщенность, наклон знаков и др.).
Шрифт — набор символов на одном или нескольких языках, объединенных общим стилем.

У шрифта есть ряд характеристик:

1. Начертание

Насыщенность: thin, regular, medium, bold, extra bold, italic;
Пропорции: узкое, нормальное, широкое

Наклон знаков: прямой, курсивный

2. Форма: гротеск, антиква, брусковый, акцидентный; которые, в свою очередь, делятся на подтипы.

3. Ряд других характеристик: кегль, межбуквенное расстояние и др.

Гротески в отличие от антикв выглядят более современно, без лишних деталей, понятно и чётко.

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

Помимо эмоционального окраса шрифт должен помогать тексту выполнять его цель: донести информацию, продать продукт, обратить на себя внимание и т.д.

Для основного текста, особенно если его много, лучше использовать простой шрифт, без сильного контраста в штрихах и без каких-то ярких особенностей.

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

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

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

И с более широким межбуквенным расстоянием, чтобы буквы не сливались в одно пятно.

Плюс более короткие выносные элементы, чтобы не растягивать высоту строки и экономить место.

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

1. Сделать кегль поменьше и использовать шрифт, в котором строчные (маленькие) не сильно меньше прописных (заглавные), чтобы они оставались хорошо видимыми.

2. Использовать шрифт с открытыми формами, чтобы похожие буквы не путались и не сливались. Например, «о» и «с» или цифра 8 и прописная «З».

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

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

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

Следующее задание.
Мобильный мессенджер. Например, Телеграм, Вотсап и пр.
(только не надо сразу подглядывать в телефон ;)

Задание 3. Продуктовая работа.

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

Каждая задача имеет какое-то основание. Чаще всего это гипотеза, нацеленная на достижение определенной цели.

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

Задание №3