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

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

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

Типографика и верстка — взаимосвязанные понятия. Под типографикой понимание оформление наборного текста, элементы которого располагают на бумаге или на экране, настраивают интервалы и отступы, подбирают шрифт. Верстка — процесс работы над типографикой.

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

Форматирование текста и правильный выбор шрифта существенно влияет на общий внешний вид и эстетику страницы

Согласно опросу онлайн-платформы StackOverflow, в котором приняли участие более 50 тыс. программистов, 28 % являются веб-дизайнерами. Это самая многочисленная группа специалистов в IT.  Но в перспективе намечается тренд к снижению потребности в веб-дизайнерах. Уже сейчас проводятся эксперименты по созданию нейронных сетей, которые сделают создание сайтов автоматизированным.

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

Копирайтер из G2 Grey Ukraine Ольга Цымбал говорит, что основной элемент типографики — работа со шрифтами. Профессиональных шрифтовых дизайнеров в СНГ можно сосчитать по пальцам, но это не оправдывает тот хаос, который сложился в типографике. Тем не менее овладеть основными правилами и чувством стиля шрифта может каждый. Вот несколько правил классической типографики:

1. Лучше выбирать стандартные шрифты, чем Comic Sans и другие необычные начертания. Не опасаясь, можно использовать Helvetica, Times New Roman, Baskerville, Garamond.
2. В одной публикации достаточно двух шрифтов, но смешивать нужно только контрастные. Два похожих начертания рядом выглядят неряшливо.
3. Размер текста на интернет-страницах не должен быть меньше 13 px. Но в каждом отдельном случае нужно учитывать читабельность.
4. Длину строки желательно удерживать в пределах 45-75 символов. ГОСТ для печатных изданий рекомендует 60 символов, но для веба это труднодостижимо.
5.  Междустрочное расстояние нужно делать примерно в 1,5 раза больше высоты строчных букв. Есть способ проще: установить расстояние равное 125 % размера шрифта.

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

Как освоить правила типографики

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

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

Специалисты онлайн-школы WebSkillers подготовили подробный гайд по оформлению текстов в веб-дизайне:

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

Графический дизайнер, иллюстратор Алексей Шелковников в блоге Mail.ru Group на Habr опубликовал подборку значимых книг для тех, кто хочет погрузиться в типографику. Подобный список составили преподаватели онлайн-школы Skillbox. По поводу следующих учебников мнение экспертов сошлось:

1. “О шрифте”, Э. Шпикерман. Идеальная книга для новичков.
2. “Новая типографика”, Я. Чихольд. Книга проверена историей — впервые “Новая типографика” была опубликована в 1928 году.
3. “Типографика. Руководство по оформлению”, Э. Рудер. Фундаментальное исследование. Именно благодаря Э. Рудеру появился бренд швейцарской типографики — шрифт Helvetica.

Варианты гармоничного сочетания букв русского алфавита исследуют Ю. Гордон (“Книга про буквы от Аа до Яя”), В. Г. Кричевский (двухтомник “Типографика в терминах и образах”), А. Королькова (“Живая типографика”).

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

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

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

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

Программа курсов включает такие модули:

1. Типографика в вебе и принте: подбор шрифтовых пар под задачи и аудиторию проекта.
2. Управление вниманием читателя: выстраивание иерархии текста, работа с пространствами и модульными сетками.
3. Верстка: выстраивание композиции, оформление заголовков, выносок.

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

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

Дизайнер Вадим Гранич приводит реальные примеры использования типографики:

Обучение в вузе

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

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

Арт-директор и сооснователь Charmer Studio Александр Гладких считает, что университет нужен тем, кто планирует заниматься графическим дизайном и полиграфией. Это сложные дисциплины, в которых полезны систематизированные знания.

Статьи и видеоуроки

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

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

Сколько стоит изучение основ дизайна в типографике верстки текста

Единственный бесплатный способ изучить основы дизайна в типографике — учиться на бесплатных курсах, читать статьи и смотреть видеоуроки в открытом доступе. Остальные способы платные: нужно приобрести учебные пособия, оплатить курсы или вуз. Стоимость курсов в среднем составляет 15-20 тыс. руб. Цена обучения на коммерческой форме в вузе зависит от направления подготовки, престижности вуза, отделения (очное или заочное).

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