Основы дизайна в типографике и верстке текста: на каких курсах изучать

Знание типографики — один из ключевых навыков любого дизайнера, который создает интерфейсы, верстает рекламные плакаты, делает макеты печатных или онлайн-газет. Основы дизайна, типографика и верстка текста дополняют друг друга. Разработчик и дизайнер Джонатан Уайт считает, что дизайн можно создавать с помощью одних только шрифтов.

Зачем веб-дизайнеру нужно знать основы типографики

Типографика составляет 95 % веб-дизайна. Так считает Оливер Райхенштейн, основатель агентства Information Architect. Правила оформления текстовых и графических элементов делают сайт удобным для восприятия. В результате работы дизайнера страница должна мотивировать посетителя совершать покупки, подписываться на рассылку, регистрироваться.

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

Пример сайта
Сайт компании, продающей пиццу: сочетание рукописного и наборного шрифта с качественными фото демонстрирует высокое качество продукции

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

Веб-типографика

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

Сейчас типографика переживает расцвет. Тренд последних лет — крупные начертания, которые привлекают и удерживают внимание посетителя. Сообщество Friendly Design, посвященное графическому и веб-дизайну, прогнозирует, что в 2020 году останутся популярными строчные буквы, наборный текст, смещение и простые взаимодействия текста.

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

Тренды типографики в 2020 году (цвет года, градиенты, миксование фактур и прочее):

Основы стиля в типографике

Начинающим дизайнерам лучше использовать стандартные начертания, которые зарекомендовали себя. Чаще всего это гарнитуры из Microsoft или Google. Но и здесь можно ошибиться. Например, стандартный Arial — это измененная Helvetica — один из самых популярных шрифтов с 1957 года. Любой текст, набранный Helvetica, стильно выглядит и хорошо воспринимается.

Кроме того, на одной странице не стоит применять много шрифтов — это выглядит непрофессионально. Достаточно визуально похожих и дополняющих друг друга двух начертаний. Хорошо работают, например, Verdana и Georgia, а Impact и Baskerville, наоборот, имеют разную ширину, так что Baskerville практически не воспринимается пользователем.

Пример типографики
Пример удачного сочетания современных приемов в типографике

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

Правила типографики

Основные правила можно выразить в нескольких тезисах:

  1. Чем проще, тем лучше. Несмотря на появление интересных шрифтов, анимаций и эмодзи, сохраняется тенденция к упрощению. Простым начертанием отличаются системные Calibri, Arial, Verdana, Helvetica, бесплатные гарнитуры Google.
  2. Читабельность. Самыми удобными для чтения с экрана, согласно ресурсу Techradar, являются Georgia, FF Meta Serif, Helvetica. А технологическая компания Yieldmo выяснила, что для рекламы эффективнее Times New Roman.
  3. Форматирование. Заголовки и подзаголовки, списки и абзацы делают текст структурированным. Оптимальная длина абзаца — 3–5 строк, а в одну строку должно помещаться не более 60 символов, если текст читается с ПК, и не более 30–40, если с мобильного устройства.
  4. Правило золотого сечения. Элементы страницы сайта должны делиться в пропорции 3/2 или 5/2. По этому принципу чаще всего определяется соотношение рекламных блоков и текста.
  5. Содержание важнее. Графика не должна отвлекать от контента. Задача шрифтов — дополнять текст и привлекать к нему внимание пользователя.

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

Типографика в веб-дизайне:

Книги по типографике

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

  1. Брингхерст Р. Основы стиля в типографике. (Автор подходит к науке основательно, опирается на классическую традицию и серьезно прорабатывает каждую тему.)
  2. Феличи Д. Типографика: шрифт, верстка, дизайн. (Хорошо структурированная теоретическая база.)
  3. Кричевский В. Типографика в терминах и образах. (Двухтомник по искусству оформления текстов. Первый том представляет собой справочное пособие, второй — картинки, иллюстрирующие понятия.)
  4. Рудер Э. Типографика. Руководство по оформлению. (Работа издана в 1982 году, но не потеряла актуальности.)
  5. Гордон Ю. Книга про буквы от Аа до Яя. (Пособие о технике написания букв и производстве кириллических шрифтов.)
  6. Чихольд Я. Облик книги. (Сборник эссе, в которых автор ищет ответы на ключевые вопросы типографики.)

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

Что изучать (полезные книги):

«Новая типографика» Яна Чихольда

Руководство впервые издано в 1928 году, и профессионалы считают эту книгу культовой. Для своего времени автор рассуждает новаторски. Это издание подойдет для «просвещенных». Практического применения не имеет. Теоретический блок книги — это основы типографики, связь с другими искусствами, в практическом блоке (весьма сомнительном ) Я. Чихольд диктует правила оформления текста и дает указания по верстке документов.

«Новая типографика» (творчество Яна Чихольда):

«О шрифте»

Книга Эрика Шпикерманна, изданная в 2005 году, — непререкаемая классика для профессионального сообщества. Автор рассуждает о современных начертаниях и новых технологиях. Внимание сконцентрировано именно на веб-типографике. Примечательно, что для российского издания большинство примеров пересмотрено с учетом кириллицы.

О шрифте
Разворот книги Эрика Шпикерманна «О шрифте»

Модульная типографика

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

Сетка строится в горизонтальном и вертикальном направлениях. Универсальный вариант — 12-колоночная сетка. Макет получается гибким и позволяет верстать блоки практически любой ширины, потому что 12 делится на 12, 6, 4, 3, 2, 1. Исходя из ширины 1200 пикселей удобно рисовать без интервалов между колонками: получается 12 колонок с шириной 100 пикселей. Если контент не позволяет верстать блоки встык, удобно сделать 24 колонки и работать с ними так же, отступая полную колонку (50 пикселей), что создает «воздух», то есть свободное пространство.

Дисциплина сеток в типографике:

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

Курсы по типографике

Онлайн-курсы по типографике бывают разные:

  1. Базовые, на которых изучают классические правила верстки, принципы построения сетки, классификация шрифтов.
  2. Интенсивы, рассчитанные на подготовленных слушателей. Экспресс-курсы и семинары посвящены какому-то одному разделу типографики или актуальным трендам, такие занятия часто дополняются практикумом по верстке.

Есть более продолжительное авторское обучение, которое длится 6–9 месяцев. В программе — знакомство с историей шрифта, детальное изучение построения кириллицы и латиницы, особенности использования шрифта в разных форматах, стили каллиграфии, мастер-классы с профи графического дизайна. Такой курс может стоить более 150 тыс. рублей.

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

Типографика как инструмент дизайнера:

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

Как зарабатывают на сайтах 4 миллиона рублей в месяц

Похожие статьи
Оставить отзыв
Наверх