Типографика онлайн курс
12 главных уроков по типографике
Задача этого курса — научить дизайнера любить и уважать верстку. В айдентике, рекламе, печатной графике, вебе и моушн-дизайне, почти всегда и везде картинки соседствуют с текстом. Каким бы он ни был: коротким или длинным, информационным или для настроения, незаметным или акцентным, — текст всегда должен твердо стоять в макете. На курсе вы разберетесь с принципами набора и верстки, поймете предназначение сетки и ее роль в создании стиля, научитесь осмысленно выбирать шрифт и эффективно использовать софт в работе с текстом.
- 30 минут ежедневных занятий
- 12 уроков
- 7 недель
Кому подойдет курс
Курс рассчитан на студентов, которые хотят разобраться в основах типографики. Наибольшую пользу он принесет практикующим дизайнерам, которые побаиваются текста и воспринимают его как досадную помеху, а не как богатый материал для экспериментов. На занятиях они научатся анализировать и оценивать верстку, осознанно подбирать и сочетать шрифты, познакомятся с правилами и выразительными средствами типографики.
Чему вы научитесь
- Познакомитесь с классическими правилами набора и узнаете, в каких случаях можно их нарушать.
- Научитесь строить сетки и придумывать динамические правила для типографики.
- Изучите классификацию шрифтов и научитесь подбирать шрифтовые пары.
- Сможете лучше оценивать работу с типографикой, видеть слабые места в верстке, делать её эффектной и интересной.
Расписание
- Длина строки, трекинг и кернинг, интерлиньяж.
- Формальные правила: так ли страшны висячие строки и предлоги; какой способ выключки использовать, какие бывают абзацы.
- Цифры; тире, минус и дефис; пробельные расстояния, правила пунктуации.
- Какой может быть акциденция внутри текста. Как использовать прописные, капитель, юникейс.
- Построение и использование простых сеток.
- Полоса набора для разных форматов: плакат и книга.
- Как сделать простую сетку сложной; разрушение сетки.
- Модульные системы как развитие сеток.
- Сверхкрупная типографика, соподчинение шрифтов.
- Классификация шрифтов. Антиквы, гротески, брусковые шрифты, акцидентные шрифты.
- Кириллица и латиница. Отличие кириллицы от латиницы. Как отличать хорошую кириллицу от плохой.
- Сочетаемость шрифтов. Критерии, по которым можно подбирать шрифтовые пары.
Необходимые материалы и инструменты
Установленные на рабочем компьютере программы Adobe Indesign и Adobe Illustrator
Что в итоге
Итогом курса станет небольшой проект, построенный на типографике.
Кто будет преподавать
Свят Вишняков — графический дизайнер и преподаватель, основатель студии Electric Red. Работал в дизайн-бюро «Щука», The Bakery, Zoloto Group, Onlab и ONY. Реализовывал проекты для музея современного искусства «Гараж», Института «Стрелка», «Винзавода», Ad Marginem, Beat Film Festival.
Что такое типографика и какие шрифты использовать на сайте
Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.
Один из источников информации — это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.
Чтобы сделать текст удобным для чтения и правильно подобрать шрифт, необходимо узнать, из чего состоит типографика и какие шрифты можно использовать на сайте.
Что такое типографика
Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.
До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.
Правила типографики учитывают параметры шрифта, размеры текста, его расположение. Чтобы хорошо оформить текст, нужно знать, какие шрифты использовать на сайте, что такое начертание, каковы пропорции между основным текстом и заголовком.
Как подбирать шрифты на сайт
Внешний вид сайта во многом зависит от используемых шрифтов. Правильно подобранный шрифт помогает читать быстрее. Обычно пользователь заходит на страницу, пробегает взглядом по тексту и сразу получает нужную информацию.
Если использовать какой-то необычный шрифт, рукописный или акцидентный, то читать станет сложнее. Скорее всего, посетитель сайта не станет тратить время на то, чтобы разобрать текст, и просто закроет страницу.
Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.
Классификация шрифтов
Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.
Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.
Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.
Передает ощущения надежности и традиционности. Шрифт с засечками выглядит строго и классически. Используется в бумажных книгах, журналах и печатных изданиях. Длинный текст, набранный таким шрифтом, удобно читать.
Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.
Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.
Что такое гарнитура
Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.
Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Основы дизайна в типографике верстки текста: кому пригодится и как освоить
Зачем нужны основы дизайна в типографике верстки сайта
Типографика и верстка — взаимосвязанные понятия. Под типографикой понимание оформление наборного текста, элементы которого располагают на бумаге или на экране, настраивают интервалы и отступы, подбирают шрифт. Верстка — процесс работы над типографикой.
Согласно опросу онлайн-платформы StackOverflow, в котором приняли участие более 50 тыс. программистов, 28 % являются веб-дизайнерами. Это самая многочисленная группа специалистов в IT. Но в перспективе намечается тренд к снижению потребности в веб-дизайнерах. Уже сейчас проводятся эксперименты по созданию нейронных сетей, которые сделают создание сайтов автоматизированным.
Основы стиля в типографике
Копирайтер из G2 Grey Ukraine Ольга Цымбал говорит, что основной элемент типографики — работа со шрифтами. Профессиональных шрифтовых дизайнеров в СНГ можно сосчитать по пальцам, но это не оправдывает тот хаос, который сложился в типографике. Тем не менее овладеть основными правилами и чувством стиля шрифта может каждый. Вот несколько правил классической типографики:
- Лучше выбирать стандартные шрифты, чем Comic Sans и другие необычные начертания. Не опасаясь, можно использовать Helvetica, Times New Roman, Baskerville, Garamond.
- В одной публикации достаточно двух шрифтов, но смешивать нужно только контрастные. Два похожих начертания рядом выглядят неряшливо.
- Размер текста на интернет-страницах не должен быть меньше 13 px. Но в каждом отдельном случае нужно учитывать читабельность.
- Длину строки желательно удерживать в пределах 45-75 символов. ГОСТ для печатных изданий рекомендует 60 символов, но для веба это труднодостижимо.
- Междустрочное расстояние нужно делать примерно в 1,5 раза больше высоты строчных букв. Есть способ проще: установить расстояние равное 125 % размера шрифта.
Есть и другие рекомендации, например, не использовать абзацный отступ, а отбивать абзацы пустой строкой, или умеренно использовать выделения. Все эти правила собраны в учебниках, их пересказывают ученикам на курсах и в видеоуроках.
Как освоить правила типографики
Основы типографики и верстки можно изучить самостоятельно: по учебникам, видеоурокам, статьям, на бесплатных курсах. Фундаментальные знания дает обучение в вузе (типографика углубленно изучается графическими дизайнерами), а быстро получить актуальные знания можно на специализированных курсах.
Чтобы понять, какой способ подходит, нужно определиться, с какой целью планируется изучать типографику. Например, чтобы разобраться в истории письменности и каллиграфии из интереса, достаточно книг или увлекательных бесплатных курсов. Графическим дизайнерам и редакторам лучше обратить внимание на серьезные учебники и специализированные курсы. Абитуриентам, которые хотят связать свою жизнь с веб-дизайном, можно посоветовать поступать в вуз.
Специалисты онлайн-школы WebSkillers подготовили подробный гайд по оформлению текстов в веб-дизайне:
Книги типографике
Графический дизайнер, иллюстратор Алексей Шелковников в блоге Mail.ru Group на Habr опубликовал подборку значимых книг для тех, кто хочет погрузиться в типографику. Подобный список составили преподаватели онлайн-школы Skillbox. По поводу следующих учебников мнение экспертов сошлось:
- “О шрифте”, Э. Шпикерман. Идеальная книга для новичков.
- “Новая типографика”, Я. Чихольд. Книга проверена историей — впервые “Новая типографика” была опубликована в 1928 году.
- “Типографика. Руководство по оформлению”, Э. Рудер. Фундаментальное исследование. Именно благодаря Э. Рудеру появился бренд швейцарской типографики — шрифт Helvetica.
Варианты гармоничного сочетания букв русского алфавита исследуют Ю. Гордон (“Книга про буквы от Аа до Яя”), В. Г. Кричевский (двухтомник “Типографика в терминах и образах”), А. Королькова (“Живая типографика”).
Изучение профильных изданий позволяет быстро погрузиться в типографику. Есть и другие преимущества такого способа обучения.
Типографика: искусство работы с текстом
Введение в типографику, терминология шрифтового дизайна, варианты и начертания шрифта. Соотношение шрифтов, законы взаимодействия шрифтов и классические шрифтовые пары. Критерии качества шрифта, правила построения и оптические иллюзии. Традиционные единицы измерения в верстке, понятие о модульной системе верстки и важность правильной верстки медиа. Акценты и второстепенные элементы, взаимодействие визуального образа и типографики.
Чему вы научитесь на курсе
Хорошей типографике в вебе и принте
Подбирать шрифтовые пары, выбирать шрифтовые приемы под задачи и аудиторию проекта
Управлять читательским вниманием
Грамотно выстраивать иерархию текста, работать с ритмом, пространством и модульными сетками
Верстать лонгриды
Выстраивать композицию, правильно оформлять заголовки, лиды и выноски
История развития типографики
Правильный выбор шрифтов для проекта
Структура, иерархия, модульная сетка
Типографика в рекламе
Как проходит обучение
Занятия
Обучение проходит в формате вебинаров, а видеозаписи занятий доступны в личном кабинете для просмотра в любое удобное время.
Практика
После каждого занятия вы проходите тестирование или выполняете домашнее задание с проверкой и обратной связью от преподавателя.
Сопровождение
Каждый студент может лично пообщаться с экспертом курса, а также получить помощь координатора и наставников.
Карьера
Центр развития карьеры поможет с составлением резюме, подготовит к собеседованию, предложит интересные позиции.
Что вы получите в результате обучения
Специалист по типографике
Знания:
- Основы прикладной типографики и трендов
- Особенности рендера шрифтов на разных платформах
- Иерархия текстовой информации
- Функциональные компоненты типовых статей
Ключевые навыки:
- Подбор шрифтов и шрифтовых пар
- Подготовка шрифтов к использованию в вебе
- Структурирование информации
- Применение шрифтовых композиций
- Работа с ритмом, пространством, модульными сетками
- Работа с композицией в вебе
- Управление внимание пользователя с помощью типографики
Инструменты, которые вы будете использовать
Доступ к программам
Мы не предоставляем бесплатный софт для студентов. Для обучения рекомендуем установить бесплатные пробные версии программ или приобрести их на сайтах компаний-разработчиков.
Adobe Photoshop
Многофункциональный графический редактор. В основном работает с растровыми изображениями, но также включает и некоторые векторные инструменты.
Figma
Облачный инструмент для командной работы над пользовательскими интерфейсами, обладающий функционалом работы с историями версий и векторными сетями.
Вашу квалификацию подтвердят документы установленного образца
Развитие карьеры
После окончания курса вы можете пройти стажировку у наших партнёров.
Каждый выпускник получает помощь и поддержку Центра развития карьеры
- Помощь в подготовке резюме и прохождении собеседования
- Консультация с HR-специалистом по поиску работы и развитию вашей карьеры
- Возможность прохождения стажировки в проектах Нетологии-групп: Фоксфорд, Нетология, EdMarket
- Регулярное информирование об открытых вакансиях в компаниях-партнерах
- Бесплатный доступ к подборке видеокурсов по поиску работы и soft skills для всех студентов