Привет! Меня зовут Влад Федорин, я креативный директор Moscow Digital Academy. Часто сталкиваюсь c вопросами о том, как начинающему дизайнеру прокачаться в типографике. Вопрос настолько сильно назрел, что я решил выпустить серию статей на эту тему. Итак, поехали!
Что же такое типографика?
Если мы заглянем в Википедию, то увидим, что типографика — это искусство оформления при помощи наборного (не рисованного) текста, базирующееся на определённых, присущих конкретному языку, правилах, посредством набора и вёрстки; одна из основных отраслей графического дизайна.
Искусство. Сильно, не правда ли? Мы удивим вас ещё больше, сказав, что это и серьёзная наука. А любая наука любит ясность и чёткость, так что давайте разбираться: who is who.
Главный инструмент типографики — шрифт.
Шрифт — это графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка.
Но и здесь не всё так просто — шрифты многочисленны и разнообразны, как причастные обороты в текстах Л. Н. Толстого. Мы приведём одну, основную классификацию.
Классификация шрифтов по техническому стилю:
Антиква (Serif) — шрифты с засечками. Звучное имя, консерватизм, элитарность — это семейство шрифтов аристократично. Такой текст выглядит, с одной стороны, очень легко и изящно, а с другой — благородно и дорого.
Примеры использования шрифта с засечками в веб-дизайне:
Гротеск или рубленые шрифты (Sans-Serif) — шрифты без засечек. В сравнении с прошлым типом, этот шрифт ассоциируется с современной деятельной молодёжью. Лучше всего его использовать в проектах, связанных с IT, дизайном и для стартапов.
Акцидентные шрифты (Display) — семейство с конкретным назначением. Эти шрифты предназначены для набора акцидентной продукции (акциденция — малообъёмная печатная продукция): баннеров, визиток, этикеток и прочей макулатуры, а также толстовок, кепок и остального, что требует маркировки названием бренда или глубокомысленной философской надписи.
Рукописные шрифты — название говорит само за себя. Они используются, как правило, на первых экранах в проектах, связанных с путешествиями, приключениями и свободой. Здесь нет строгих ограничений по сфере деятельности, рукописные заголовки используются для презентации как линейки сноубордов, так и коллекции купальников.
Кроме того, рукописный шрифт используется в сноске в качестве контрастного элемента, чтобы клиент расслабился и почувствовал, что вы с ним на одной волне.
При выборе шрифта будьте внимательны и чутки, поскольку шрифт задаёт настроение макета. Не дизайнер выбирает шрифт для проекта, шрифт сам выбирает проект.
Небольшой лайфхак.
Чтобы извлечь из концепта шрифтовой максимум, я работаю сначала с одним шрифтом, а после того, как дизайн-макет готов, применяю к дизайну другие любимые шрифты. Такой подход работает эффективно.
P.S. Про мои любимые шрифты расскажу в этой же статье, но чуть позже =)
В качестве эксперимента посмотрим, как шрифт меняет характер дизайна.
Мы намеренно будем использовать сложный продукт с точки зрения визуализации, это — дедушкины тапочки.
Задача: Вкусно подать «Дедушкины тапочки», дизайн должен передавать уют и тепло, а ещё нужно подчеркнуть люксовость наших тапочек.
Примечание: Сложность в том, что сам товар по отдельности несёт слабый эстетический характер.
Решение: Используем комбинацию тёплых цветов по принципу смежных кругов. Поддерживаем наш дизайн антиквой, в основной массе используем заглавные буквы с положительным трекингом, что будет передавать важность, и фундаментальность нашего проекта. Сама антиква будет нести сильную ассоциацию с элитностью товара. Вуаля, макет готов!
В этом проекте мы использовали бесплатный шрифт с Google Fonts, мой любимый Playfair
ААнатомия шрифта
Существует ряд параметров, которые задают внешний вид шрифта и текста в целом. Сначала термины могут напугать и показаться скучными, но не стоит забывать, типографика — это наука. Овладейте этим знанием и станете непобедимы.
Кернинг — изменение пробела для конкретной пары символов.
Эта функция не используется в веб-дизайне, чаще всего кернинг необходим при создании логотипов и баннеров, где элементы крупные и каждый из них имеет свой вес.
Трекинг — расстояние между символами в слове или предложении вне зависимости от их формы и размера. Иными словами, кернинг, но сразу для всего.
Если несведущий в типографике клиент просит поправить кернинг, то он имеет в виду трекинг.
Три вида трекинга:
1) Отрицательный,
2) Нулевой,
3) Положительный.
Где использовать отрицательный или нулевой трекинг?
Применять его стоит в наборном, основном тексте. Лучшие значения трекинга при работе с основным текстом: -5, -10, -15, -20, -25.
Зачем это нужно?
Эмпирическим путём было выявлено, что при таком трекинге основной текст в дизайне смотрится лучше. Применение отрицательного трекинга является не обязательным условием. Дизайн не математика. Всегда есть место для игры против правил.
Где использовать положительный трекинг?
Такие изменения не всегда к лучшему. Плюсовой трекинг даёт слишком сильную разрядку для основного текста, который в результате становится неудобно читать. Тем не менее для текста, набранного заглавными буквами, это самое то.
Трекинг заглавными буквами для главного заголовка — отличное решение. Например, промо-сайт для Nescafe Gold Barista смотрится хорошо, особенно в совокупности с анимацией.
Кегель — размер высоты символов, включая нижние и верхние выносные элементы.
Оптимальные размеры для отрисовки дизайн–макетов:
Заголовок: 24-60 pt (обычно 24, 36, 48 pt)
Основной текст: 16-18 pt
Интерлиньяж — межстрочный пробел, расстояние между базовыми линиями соседних строк.
Интерлиньяж используется, чтобы разрядить абзац и сделать чтение легким и комфортным. Существует секретная формула идеального интерлиньяжа. К размеру основного текста добавляем 8–10 pt и получаем красивый, удобный и уместный межстрочный интервал.
Вёрстка текста
Правило переноса
В вебе текст при вёрстке выравнивается по левому краю. Всегда. Никаких «по правому, чтобы выделить» и «по ширине, чтобы ровно».
Но ровно всё-таки хочется, поэтому надо внимательно следить за служебными словами (предлоги, союзы, частицы), которые имеют привычку «висеть». Чтобы избежать нелепой «расчёски» надо стараться сделать так, чтобы короткие слова как бы приклеивались к длинным, то есть следовали за своими старшими товарищами со строчки на строчку, а не рассыпались по правому краю текста.
Из личного опыта:
Когда наши студенты только начинают делать дизайн, мы пытаемся закрепить в их голове важную мысль:
«Типографика — это 70% дизайна, осилишь типографику — ворота в дизайн открыты».
Важно погружаться в каждую мелочь и развивать шрифтовую насмотренность.
Давайте рассмотрим работы наших студентов из группы «Работы студентов MDA курс Digital-дизайн UX/UI
Здесь вы видите одно из домашних заданий, которое мы делаем на курсе, — это промо-сайт по авто-тематике. В макете был применён интересный типографический ход «Внедрение текста в объект»; хотя сам ход не новый, он не теряет свою актуальность. Обратите внимание на цветовое решение «Тёмное на тёмном». Полностью работу Саши посмотрите здесь.
А это домашняя работа, которую сделала Юлия, здесь мы делаем редизайн ГЦСИ. В данном случае использована механика шрифтового контраста: разные размеры шрифта + яркий доминантный цвет — это отличный ход, когда показываете выразительность макета. Смотреть макет сайта целиком
В этой работе неплохая типографика, можно сказать: крепкий ок. Если выйти на такой же уровень — работа дизайнером обеспечена. Аня уже работает дизайнером, её кейсы, которые она делала во время обучения, посмотрите тут.
В следующих частях будет информация о трендах, шрифтовых парах, любимых шрифтах и, конечно же, про шрифтовых лайфхаках.
А ещё у нас в Moscow Digital Academy стартует курс по Веб-дизайну. Если хотите получить хорошую скидку или консультацию по курсу, вы можете:
Прийти на вводный урок: запись участников;
Написать нам в личные сообщения;
Написать руководителям MDA: Максим Иванов и Влад Федорин;
Позвонить нам: 8-800-30-100-97.
Полная программа обучения
Отзывы студентов
Домашние работы и кейсы студентов MDA
Подписывайтесь на мой youtube-канал, где много практических уроков по дизайну, и на нашу группу VK Moscow Digital Academy— сокровищницу полезных материалов для дизайнера! До встречи!