Как и в любой профессии, в графическом дизайне существуют правила. Хотя нарушение правил допускается и даже (в некоторых случаях) приветствуется, важно знать, как нарушать их правильно.
20 правил типографики для начинающего дизайнера
- Не забудьте расставить кернинг.
- Не пренебрегайте удобочитаемостью текста.
- Правильно определяйте количество знаков в строке.
- Создайте убедительную визуальную систему.
- Следите за интервалами между словами.
- Используйте выравнивание влево.
- Всегда используйте сетку.
- Выбирайте стиль шрифта под вашу аудиторию.
- Избегайте висячих строк с «вдовами» и «сиротами».
- Не злоупотребляйте пробелами.
- Подбирайте подходящий цвет.
- Подбирайте гармоничные сочетания шрифтов.
- Не меняйте форму и ширину букв без причины.
- Выбирайте интерлиньяж, который соответствует шрифту и формату.
- Давайте в дизайне больше воздуха.
- Разбивайте текст на короткие абзацы.
- Не следуйте слепо трендам в дизайне.
- Ставьте правильные кавычки, ёлочки, тире и дефисы.
- Выбирайте оптимальные инструменты.
- Не используйте эффекты. Никогда.
Тест по типографике
В главе «Шрифты и типографика в графическом дизайне» выложил тест по типографике. Уверен, будет интересен тем, кто интересуется темой. Первым трем читателям, которые найдут ошибку в тесте по типографике, дам доступ к главе совершенно бесплатно. Напишите мне в комментариях или в телеграмм.
Получить ознакомительный отрывок из главы №5 «Шрифты и типографика в графическом дизайне» можно по ссылке.
Типографика — это элемент хорошего дизайна. Она окрашивает слова в нашем языке и придаёт им смысл. Правильное использование типографики гарантирует быструю коммуникацию с аудиторией, а умелое — притягивает внимание к сообщению, делая его уникальным и выделяя среди тысяч подобных. Пройти тест по типографике.
01. Не забудьте расставить кернинг
Кто-то однажды сказал: «Хочешь невзлюбить дизайнера — научи его распознавать плохой кернинг». Неудачный кернинг — один из тяжких грехов в профессии дизайнера, поэтому усвойте правило и добивайтесь одинаковой плотности между символами с помощью ручной настройки. Это сложно, но с опытом приходит понимание.
Кернинг — это интервал или пробел между символами. Кернинг очень похож на трекинг, но это разные сущности. Конечной целью кернинга является обеспечение гармоничного пространства между буквами, чтобы текст был четким и упорядоченным. Настройка кернинга особенно важна в наборе заголовков, логотипов и других коротких надписей.
02. Не пренебрегайте удобочитаемостью текста
Основная цель дизайна — это сообщение, поэтому считайте удобочитаемость главным приоритетом.
Типичным примером плохой читаемости является малый контраст (рис. 1) между текстом и фоном, поэтому каждый раз, когда вы сомневаетесь, прищурьтесь так сильно, чтобы буквы сливались в единое пятно. Если не удалось распознать — увеличивайте контраст между фоном и сообщением.
Другой распространенной ошибкой является злоупотребление (рис. 2) заглавными буквами. Заглавные буквы напрягают читателя, также они препятствуют способности быстро различать буквы. Заглавные имеют одинаковую высоту и выглядят как столбики, мешая понять информацию. А вот буквы в нижнем регистре имеют уникальную форму, что позволяет глазу быстрее идентифицировать букву и слово.
Еще одна ошибка — это размер (рис. 3) шрифта. Подумайте о своей аудитории и сделайте шрифт крупнее. Если вы не уверены, напечатайте на принтере и проверьте себя, а затем сделайте еще чуть больше.
03. Правильно определяйте формат набора и количество знаков в строке
Вам когда-нибудь приходилось сталкиваться при чтении с трудностями? Может, вы теряли мысль или взгляд перескакивал со строки на строку? Эта проблема связана с неправильной шириной колонки и количеством знаков в ней.
Почаще заглядывайте в таблицу на странице 32 в книге «Основы стиля в типографике» Роберта Брингхерста. Автор рассчитал среднее количество знаков в строке. Золотого правила не существует, но есть оптимальное число — 45-60 знаков с пробелами.
СОВЕТ. КАК РАССЧИТАТЬ ДЛИНУ СТРОКИ
Не делайте слишком большую или короткую длину строк. Оптимальное количество знаков в строке для удобного чтения — от 40 до 80. Помните, что бывают исключения, и не стоит слепо следовать правилам. Простой способ вычислить длину строки предложен Робертом Брингхёрстом (Robert Bringhurst): умножьте размер шрифта на 30. Например, если кегль 10 px, то оптимальная длина строки будет около 300 px или примерно 65 символов.
В русском интернете бытует мнение, что не следует слепо копировать методику автора, так как слова в русском языке намного длиннее, поэтому оптимальным для длины строки будет 45-50 знаков.
04. Создайте убедительную визуальную систему
Сильная визуальная иерархия — мощный инструмент для построения крепкой системы. Чтобы подчеркнуть важность и обозначить порядок подчинения в графическом дизайне, дизайнер располагает визуальные элементы согласно целям и задачам проекта. Таким образом, сначала зритель считывает более важные элементы, затем менее важные, такие как фон. Подробнее о том, как мы воспринимаем информацию, можно узнать в статье про гештальт «Собаки и черепа в гештальт теории».
05. Следите за интервалами между словами
Интервал между словами (на рисунке) равен строчной "i". Пробелы больше этой величины ухудшают читабельность. Распространено мнение, что в русском языке слова длиннее, чем в английском, поэтому пробел между словами может быть шире. В Adobe Illustrator стандартный пробел равен величине "i".
Интервалы — это фон, который взаимодействует с буквами (буквы — это фигуры на фоне). Иногда фон называют отрицательным пространством. Если вы знаете, что такое отрицательное пространство в графическом дизайне, то вам будет интересно прочитать мою статью «Отрицательное пространство в дизайне».
06. Используйте правильное выравнивание
Если вы дизайнер, то вы наверняка сталкивались с основным инструментом — выравниванием. Существует четыре вида выравнивания или выключки: по левому краю, по правому краю, по центру и полная выключка. Если вы не уверены, какое выравнивание текста выбрать, выбирайте выключку влево: варианты «Вправо» и «По ширине» в веб-дизайне себя не оправдывают.
Выровненный по левому краю (рис. 1 слева) — этот тип является наиболее распространенной формой. Он является наиболее удобочитаемым и дает красивый, аккуратный левый край текста. Если сомневаетесь, выравнивайте текст по левому краю. Подробнее про выравнивание объектов можно узнать из статьи, которая является частью учебника «Грамматика графического дизайна».
Хотите знать больше о графическом дизайне — получите 6 ознакомительных фрагментов из учебника «Грамматика графического дизайна».
Выровненный по правому краю (рис. 1 справа) используется очень редко. Как правило, в дизайне упаковки, в описаниях к основному тексту. Выключка вправо не рекомендуется для больших кусков текста, поскольку это затрудняет чтение.
Выравнивание по центру (рис. 2 справа) имеет широкий спектр применения. Плакаты, приглашения, визитки и т.д. Центрированный текст позволяет легко уравновесить небольшое количество шрифта и создать эстетически приятное расположение шрифта. Не рекомендуется использовать в больших массивах текста, так как выключка по центру затрудняет восприятие информации.
Основная ошибка начинающего дизайнера или верстальщика — применение полной выключки (рис. 2 слева) на сайте, в презентации или документах. Смотрится крайне плохо. Применяйте этот тип выключки только в исключительных случаях.
07. Всегда используйте сетку
Используйте сетку для организации элементов на странице. Я рекомендую использовать сетку в любом дизайне. Она помогает структурировать информацию и мысли. Сетка может превратить проектирование в увлекательный процесс. Ограничение вертикальными и горизонтальными линиями создает из среднего дизайна чистый, ясный проект.
Сетки бывают разных форм и размеров, могут быть гибкими и адаптивными к дизайну. Сетки помогают создать более аккуратный, более логичный дизайн.
08. Выбирайте стиль шрифта под вашу аудиторию
Большинство проектов начинаются с краткого брифа, в котором излагается основная информация. Один из вопросов в заданиях определяет аудиторию. Для кого я разрабатываю дизайн, кто является целевой аудиторией? Каждый дизайн создается для людей, которые будут просматривать его и получать ваше сообщение. Поэтому подходите к выбору шрифта осознанно.
09. Избегайте висячих строк с «вдовами» и «сиротами»
Простой способ превратить ваш дизайн из любительского в профессиональный — распознать и устранить «вдов» с «сиротами». «Вдовы» и «сироты» обязательно появятся в любом дизайне с текстом. Иногда строка из одного или нескольких слов оказываются не на том месте. Такие строки называются «висячими». «Висячая» строка та, которая «оторвана» от своего абзаца и «висит» в одиночестве на странице.
«Вдова» — это целое слово в конце абзаца или очень короткая строка в конце текста (см. слева 2). «Сирота» — это висячая строка (см. слева 1), которая попадает на начало новой страницы или колонки. Делайте так, чтобы «вдовы» и «сироты» не портили вам внешний вид верстки.
Есть несколько способов справиться с вдовами и сиротами. Первое, что можно сделать — вручную отредактировать текст. Отрегулируйте длину строки с помощью трекинга. Совет два — увеличьте текстовое поле сверху и сбоку, чтобы устранить проблему.
10. Не злоупотребляйте пробелами
Не злоупотребляйте пробелами. Все, что вам нужно сделать, чтобы начать новую строку — это нажать Shift+Enter. Чтобы начать новый абзац нажмите Enter.
Лишними считаются пробелы, которые следуют непосредственно за пробелами. Между словами всегда должен находиться один пробел. Запомнить просто.
11. Подбирайте подходящий цвет
Цвет — это мощный инструмент для дизайнеров, поэтому имеет смысл, чтобы тщательно подобранная и согласованная палитра была важным шагом во всех дизайнерских начинаниях.
При составлении цветовой палитры обращайте внимание на теорию цвета, культурные особенности и прошлый опыт использования цвета. Теория цвета влияет на потребителя и продажи. Подробнее прочитать про «Кетчупа и горчицы» — в статье «Мы едим нашими глазами и носами».
Цвет — это уникальная возможность визуально воспринимать мир. Чтобы понять важность цвета, посмотрите черно-белую фотографию джунглей с хищником. Только на минуту представьте наш мир без цвета. Вероятность того, что вы не заметите хищника, увеличивается в разы.
12. Подбирайте гармоничные сочетания шрифтов
Сочетание шрифтов в графическом дизайне, вероятно, одна из самых интересных и сложных задач в типографике. Здесь нет определенных правил, и это делает процесс интересным. Конечно, есть рекомендации. Чтобы получить захватывающий вариант, от вас потребуется знание шрифтов, творческая смекалка и терпение. Результат превзойдет ваши ожидания, и время, которое вы потратите, окупится стократ в новых проектах.
Самый простой способ подобрать несколько шрифтов для вашего проекта — взять за основу высоту строчного знака. Если высоты совпадают или очень близки, то такие гарнитуры хорошо сочетаются, так как имеют одинаковый визуальный вес.
Подробнее о шрифтах и типографике читайте в статье ««Типографика в веб-дизайне для начинающих».
13. Не меняйте форму и ширину букв без причины
Это очень простое правило дизайна, его легко понять, легко запомнить и легко выполнить: не растягивайте шрифты без веских на то причин. Ни в коем случае.
Шрифты создаются с большой осторожностью и вниманием к формам и пропорциям каждой буквы, поэтому не искажайте их без необходимости.
14. Выбирайте интерлиньяж, который соответствует шрифту и формату
Хороший баланс между «воздухом» и цветом текста может зависеть от межстрочного расстояния. Можно рассчитывать интерлиньяж с помощью простой формулы «полтора». Для начинающих будет несложно запомнить правило.
Размер текста 10 пт, интерлиньяж — 24 px. 10 / 2 = 5 + 10 = 15. Исключение: это правило хорошо работает в веб-дизайне. Делать верстку книги по этому правилу не самая хорошая идея. Для книги, где стоимость зависит от количества страниц в издании, применяется немного другой расчет.
Сергей Рассказов советует применять правило «минус пяти». Во всех редакторах интерлиньяж стоит 120% (при 10 кеглей будет стоять значение 12). «В большинстве случаев в текстовом наборе кириллицей можно списать 5% и выиграть при наборе 10/11,5. Малое количество выносных элементов в нашей заборной кириллице большего и не требует» — советует автор.
15. Давайте в дизайне больше воздуха
Правильное использование белого пространства делает ваш дизайн особенным. Вы можете поставить акцент на конкретном аспекте вашей композиции, позволить дизайну «дышать», сбалансировать элементы и главное — добавить изысканности вашей работе. Основное правило — не забивайте пустые пространства элементами.
Негативное пространство поможет лучше разобраться в белом пространстве вашего дизайна.
16. Разбивайте текст на короткие абзацы и обозначайте интервал между ними
Абзац — это небольшой текстовый блок, который обычно объединяет несколько связанных по смыслу предложений. Оптимальная структура абзаца:
- 3-4 предложения или 5-6 строк
- Может включать заголовок или подзаголовок (но не обязательно)
Современный читатель предпочитает короткие абзацы длинным «простыням». Разделяйте блоки текста двойным межстрочным интервалом для лучшей читаемости.
17. Не следуйте слепо трендам в дизайне
Дизайн немного похож на моду, где появляются экспериментальные тенденции. Они становятся безумно популярными на какое-то время, а затем постепенно исчезают. После того, как эти тенденции проходят, все наряды и предметы одежды, которые вы носили, внезапно становятся неактуальными.
В дизайне, как и в моде, новые стили и методы обретают популярность на определенный период. Все спешат присоединиться к модному тренду, потому что он новый, захватывающий и легкий в воспроизведении. Но появляются новые тенденции, старые уходят, а созданный логотип, рассчитанный на долгие годы, внезапно устаревает.
18. Кавычки, ёлочки, тире и дефисы
Запомним самое простое правило. Дефис — это небуквенный орфографический знак, никогда не отбивается пробелами и используется внутри составных слов: жар-птица, онлайн-курс.
Длинное тире — знак пунктуации, всегда отбивается пробелами между словами. Длинное тире не найти на клавиатуре, набирается набором клавиш: Mac — option+shift+дефис, Windows — alt+ctrl+дефис. Жмите одновременно.
Кавычки — парный знак препинания. Кавычки нужны для выделения текста: прямая речь, цитаты, названия газет, компаний и др. Основные кавычки в русском тексте обозначаются французскими «елочками». Внутри текста с «елочками» используется закавычивание немецкими „лапками".
Еще правило, которое я всегда забываю, — знаки препинания, например точка или запятая, ставятся после кавычек. Путаю, потому что в англоязычном варианте точки и запятые ставят внутри кавычек.
19. Выбирайте правильные инструменты
Мастер не использует молоток, чтобы вкрутить винт. Дизайнер тоже должен знать, какие инструменты оптимально подходят для работы.
Очень распространенной ошибкой, которую можно легко избежать, являются растрированные логотипы. Для тех из вас, кто не совсем знаком, проведу маленький ликбез. Существует два типа графических файлов — векторный и растровый. Растровая графика состоит из пикселей, а векторная — из множества линий или «кривых».
20. Не используйте эффекты. Никогда
Помнишь радость открытия эффектов в Adobe Photoshop? Весело было добавлять градиенты, тени, фаски и множество других эффектов к дизайну? Что ж, дни такого искусства закончились (к сожалению), так что настало время отправить спецэффекты в старый сундук. (Шутка)
Один из самых применяемых эффектов сегодня — это наложение тени или «drop shadow». Наступила эпоха плоских дизайнов, поэтому обращайтесь с эффектами осторожно.
В заключение могу сказать, что есть только одно последнее правило: никаких правил нет. Яркий пример — легендарный дизайнер Дэвид Карсон, создатель журнала Ray Gun. В 1994 году Карсон дал интервью музыканту Брайану Ферри, которое посчитал очень скучным. В журнале интервью нельзя было прочитать, так как оно было набрано шрифтом Zapf Dingbats (шрифт, состоящий из символов). Нарушение правил иногда является лучшим способом заявить о себе и стать легендой в дизайне.
Основы графического дизайна — это важнейшая часть нашей работы, но знайте: время от времени необходимо бросать себе вызов и тратить время на обучение графическому дизайну. Изучайте правила, чтобы правильно их нарушать.
Спасибо за то, что дочитали до конца. Источник статьи: Canva. Хотите получить шесть бесплатных ознакомительных фрагментов и пройти тест по графическому дизайну?
Еще сомневаетесь? Прочитайте введение к учебнику, оно изменит ваше представление о дизайне!
