Типографика – процесс и искусство разработки архитектуры коммуникации; моделирование, графическое оформление материала посредством набора и верстки, на основе определенных правил, специфических для данного языка.
Типографика — это искусство предоставления текстовой информации, преображение текста в графическое оформление, основа графического дизайна.
Термин типографика происходит от греческого τύπος — отпечаток + γράφω — пишу) — искусство оформления печатного текста.
Типографика – это, с одной стороны, набор правил, определяющих использование шрифтов и оформительских средств, с другой стороны – искусство графического дизайна.
Цель типографии – упростить коммуникацию с аудиторией, улучшить восприятие передаваемой информации.
Задачи типографики, наиболее творческого этапа оформления текста, предполагают:
- определение параметров для последующих процессов набора, вёрстки и допечатанной подготовки;
- способствование передаче эмоции, настроения, отношения задуманных автором, вовлечение в чтение и изучение;
- моделирование вида и формы контакта аудитории с объектом авторского и дизайнерского творчества;
- сделать текст наиболее оптимальным, ясным, максимально обеспечивая удобочитаемость текста;
- сделать текст интересным в восприятии читателя, зрелищным, гармоничным в общей структуре коммуникации.
Типографика в маркетинге – инструмент и средство, обеспечивающее лучшую коммуникацию с целевой аудиторией. Типографика определяет общий формат итогового маркетингового материала:
- пропорции, формат полосы набора, раскладку полей;
- параметры шрифта: кегль, интервалы между словами и строками;
- размеры, место расположения и меру зрительной «тяжести» иллюстраций.
Качественная типографика, с точки зрения маркетинга, оказывается всегда продуманной, подчиненной определенному авторскому замыслу.
Типограф – специалист, занятый топографический деятельностью: художественный и технический редактор, оформитель и художник, каллиграф и проектировщик шрифтов, графический дизайнер – все те, кто так или иначе сталкивается с типографикой. Типограф в маркетинге – посредник между владельцем, производителем товара, разработчиком его рекламных коммуникаций и целевой аудиторией.
История типографики начинается с середины XV века, когда формируются первые основы типографики: используется удобочитаемая «Антиква»; вводится принцип равномерности интерлиньяжа и азбучного отступа. В XVI века в типографику вводится понятие «курсив». В XVII веке типографика меняет свои задачи с целью создания книг для широкого круга читателей – уменьшается формат книг, видоизменяются шрифты, особую роль принадлежит Дж. Баскервиллу, отказавшемуся от использования орнамента в пользу именно типографики, исключительно основанной на шрифтовом оформлении.
В XX веке в типографике на первый план выходит удобочитаемость текста, простота шрифтового рисунка. В качестве композиционного каркаса печатного материала стала использоваться модульная сетка. С развитием маркетинга, типографика приобретает деловой характер, активно применяется в качестве инструмента маркетинговой коммуникации с потребителем товаров и услуг.
12 564 просмотра
С тех пор как дизайн стал профессией, типографика является одним из основных предметов в этой области. По сути, определением типографики является искусство доносить смысл до читателя или пользователя посредством визуального оформления наборного текста. Грамотная работа с текстом — база и залог успеха любого дизайнерского решения.
Типографика — это еще и наука, изучению которой специалисты посвящают всю жизнь. Типографика в дизайне развивается и изменяется, вызывает споры и заставляет думать о прекрасном. Шрифт больше не должен быть незаметным — сегодня он может быть любым: забавным, витиеватым, неаккуратным, дерзким, нелогичным, а в лучших образцах — изящным.
Типографика включает сотни терминов и принципов, но сегодня мы разберем ее основы. Чтобы было легче их запомнить, рекомендуем добавить статью в закладки, а также записать самое важное и разместить конспект на видном месте.
Содержание
Анатомия шрифта
Шрифт состоит из букв, и это не просто линии и круги, соединенные в знакомые формы. Каждая буква индивидуальна и формируется из множества элементов со своими названиями. Как и у людей, у букв есть характер, настроение и даже анатомические детали.
Для более ясного понимания, что такое типографика текста в графическом дизайне, мы собрали важные понятия в одной картинке — для наглядности и удобства. Время достать ручку и начать записывать!
Символы — это отдельные буквы, знаки пунктуации, цифры и прочие элементы, которые используются в типографском наборе.
Строчные буквы — это буквы обычной величины, используются для написания во всех случаях, кроме тех, когда по правилам орфографии и пунктуации требуется употребление прописной буквы.
Прописные буквы — это заглавные буквы, отличающиеся от строчных размером, а иногда и начертанием. С прописной буквы пишется первое слово в тексте и цитате.
Линия шрифта — воображаемая линия, проходящая по нижнему краю строчных символов без учета нижних выносных элементов.
Верхняя линия — воображаемая линия, проходящая по верхнему краю строчных символов без учета верхних выносных элементов.
Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).
Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).
Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «sans serif» («без засечек»).
Понятие шрифта и его характеристики
Вы наверняка слышали, что человек воспринимает чуть ли не 90% информации глазами, то есть зрительным путем. Точную цифру привести сложно, но ясно, что визуальный способ зачастую доминирует, если сравнивать его с аудиальным и тактильным восприятием.
Именно поэтому почти вся информация вокруг нас представлена в виде текста. Шрифт — это элемент типографики, который помогает донести ее правильно и быстро. Не обладая достаточными знаниями о нем, дизайнер упускает изящные, а иногда и единственно верные способы решения задач. Пора разобраться с основными правилами типографики в полиграфии: что представляет собой шрифт и какими характеристиками он обладает. Начнем с понятия гарнитуры.
Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.
Шрифт — это комплект строчных и прописных символов, знаков препинания, цифр и спецсимволов одного размера и начертания для отдельной гарнитуры.
Текст этой статьи набран гарнитурой Roboto, шрифтом Roboto Regular. Зачастую дизайнеры без углубленного знания о том, что такое типографика, совмещают понятия гарнитуры и шрифта и считают, что текст этого предложения «набран шрифтом Roboto». С точки зрения терминологии это грубая ошибка, но на качество повседневной коммуникации между дизайнерами она не влияет.
Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).
Типографская система мер
Для верстки текста дизайнеры используют типографские приемы. Это не только правильный подбор гарнитуры и начертания, но и грамотная работа с расстояниями.
Дизайнер может работать с расстояниями между буквами, словами, строками, абзацами. Этот аспект может стать самым сложным для новичка. Напишите в комментариях, если нужен подробный разбор по композиции и расстояниям в типографике.
В типографике есть четыре основных термина: кегль, интерлиньяж, кернинг и трекинг. Важно иметь четкое представление о каждом из них — обратное часто выдает уровень начинающих дизайнеров.
Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.
Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.
Теперь о понятиях в основах типографики, которые постоянно путают: кернинг и трекинг. Кернинг — это изменения расстояния между конкретными символами, а трекинг — между символами и словами. Трекинг позволяет разрядить или уплотнить текст, в то время как кернинг используется для повышения удобочитаемости символов.
Полезные советы и ресурсы по теме
- Прочитайте книгу Александры Корольковой «Живая типографика». Это базовое пособие о типографике для начинающих дизайнеров, которое доступно бесплатно.
- Еще один электронный ресурс, но по платной подписке — учебник «Типографика и верстка» издательства «Бюро Горбунова». Обратите внимание на оформление сайта — это лучшая реклама содержания.
- На начальном этапе полагайтесь на готовые подборки сочетаний гарнитур. Они есть на множестве сайтов: FontPair, Fontjoy, Canva Font Combinations и других.
- Используйте не более 2–3 гарнитур в одном проекте. Это правило универсально для задач любой направленности в типографике. Если вы только начинаете изучать что такое типографика, рекомендуем сперва ограничиться одной гарнитурой.
- Установите расширение WhatFont для Chrome или для Safari, чтобы быстро узнать название понравившегося шрифта.
- Типографика построена на акцентах. Используйте начертания и кегль, чтобы расставлять их и создавать структуру текста. Традиционно заголовок имеет жирное начертание и значительно больший кегль, чем основной текст. Например, он может быть выполнен шрифтом Helvetica Bold 48 pt, а основной текст — Helvetica Regular 14 pt.
Выбираем правильный шрифт
1. Не используйте причудливые шрифты
Если у вас недостаточно опыта и знаний, даже не пытайтесь использовать необычные, затейливые шрифты. Будьте проще.
2. Забудьте о Comic Sans
Представьте, что вы его вообще никогда не видели.
3. Не избегайте стандартных, дефолтных шрифтов
Серьёзно, если кто-то вам говорит, что стандартные шрифты — это скучно, он просто не разбирается в типографике. То, как будет выглядеть шрифт, зависит от того, как он будет набран. Times New Roman может выглядеть по-настоящему здорово. И главное: пусть лучше текст будет скучным, чем уродливым или нечитабельным.
OmegaTransFer /
Смешиваем шрифты
4. Не используйте одновременно больше двух шрифтов
Экспериментировать с большим количеством шрифтов на начальном этапе не стоит. Двух вполне достаточно. Вы же не хотите превратить текст в разномастную ерунду, не так ли?
5. Смешивайте только контрастные шрифты
Гротеск со шрифтом с засечками, рукописный с модерном. Важно сохранить контраст. Два схожих шрифта рядом выглядят неряшливо.
6. Выбирайте шрифты с одинаковой высотой букв
Высота строчных букв без выносных элементов — это расстояние от базовой до верхней линии шрифта, иначе говоря — величина очка строчных. Выбирая шрифты, которые вы хотите использовать при оформлении совместно, нужно следить, чтобы высота их строчных букв была одинакова. Это поможет выдержать одинаковый уровень насыщенности абзаца. Кроме того, такой текст будет легче читаться.
Набираем текст
7. Размер шрифта
Размер текста в вебе не должен быть меньше 13 пикселей. На мой взгляд, лучший выбор — в пределах 14–18 px. Не слишком большой и в то же время удобочитаемый.
8. Выбирайте правильную длину строки
Не верьте разговорам, что правильную длину строки можно получить, умножив размер шрифта на два. Это ерунда. Просто постарайтесь удерживать длину строки в пределах 45–75 символов. ГОСТ для печатных изданий рекомендует длину в 60 символов, но это, конечно, труднодостижимый идеал в условиях веба. И всё же к нему стоит стремиться. Определяйте на глаз, не является ли строка слишком длинной или слишком короткой.
9. Интерлиньяж должен соответствовать размеру шрифта
Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Есть ещё один способ попроще: устанавливаем интерлиньяж, равный 125% размера шрифта.
Абзац
10. Выравнивайте по левой стороне
Если вы не уверены, какую выключку выбрать, выбирайте выключку влево: варианты «Вправо» и «По ширине» в вебе редко себя оправдывают. В неровном крае нет ничего плохого. Выключенный влево текст легче читать, так как глаз видит чёткое визуальное окончание каждой строки. Но по-русски такой текст удобно читать, если строка не слишком длинная. Поэтому, если ваша строка больше 60 символов, попробуйте расключенный набор. Только не забудьте расставить переносы и проверьте, всё ли выглядит хорошо: несколько переносов подряд определённо затруднят чтение.
11. Избегайте большого числа переносов
Вообще, переносов в вебе по возможности следует избегать. Попробуйте перенести слово на новую строку или чуть-чуть измените межбуквенное расстояние. Если знаков переноса слишком много, поменяйте размер шрифта или величину пробелов. А при выключке влево вообще не используйте перенос слов.
12. Без отступа
Не отделяйте отступом первый абзац от заголовка. Если вы отбиваете абзацы пустой строкой, не используйте абзацные отступы. Это избыточно и безвкусно. С другой стороны, текст вообще без отступов и отбивок будет сложнее восприниматься. В общем, выберите один из способов: или красную строку, или отбивку — и используйте его на протяжении всего текста.
13. Узкая колонка
Если вам нужно набрать небольшую колонку текста, попробуйте использовать узкий шрифт. Так текст будет не только смотреться лучше, но и легче читаться, так как в строку поместится больше символов.
14. Висячая пунктуация
За линию набора стоит выносить кавычки, скобки, дефисы, точки, запятые. Это всегда выглядит элегантно и помогает сохранить нужную форму абзаца.
15. «Вдовы» и «сироты»
Речь идёт о висячих строках. «Вдова» — это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. «Сирота» — это висячая строка, которая попадает на начало новой страницы или колонки. Их нужно избегать. Попробуйте уменьшить межбуквенное расстояние, перенести строку или отрегулируйте размер шрифта — в общем, не давайте «вдовам» и «сиротам» пробраться в свой текст.
16. Не злоупотребляйте пробелами
Чтобы начать новую строку, нажимайте Shift+Enter. Для начала нового абзаца нажмите Enter. Вот так всё просто.
Слова
17. Кернинг
Если вы неопытный дизайнер и у вас не намётан глаз на мельчайшие детали, не керните текст вручную.
18. Трекинг
Запомните: когда вы увеличиваете размер шрифта, расстояние между символами тоже увеличивается. Поэтому, если вы устанавливаете в тексте крупный заголовок, советуем пропорционально скорректировать расстояние между символами и словами.
19. Выделения в тексте
Выделить важную мысль или слово, на которое нужно обратить внимание, можно самыми разными способами. Не переусердствуйте с ними. Не стоит выделять целое предложение одними прописными — новичок не всегда может сделать это к месту. Просто используйте полужирное начертание шрифта.
20. Строчные без разрядки
Не стоит увеличивать расстояние между строчными. Причина проста: снижается удобочитаемость.
21. Прописные с разрядкой
Увеличивайте расстояние между прописными. В этом случае читабельность возрастает. Обычно хорошо работает увеличение межбуквенного пространства на 10%.
22. Не пишите всё заглавными
Не злоупотребляйте набором заглавными. Длина такого набора не должна превышать одну строку.
23. Не используйте капитель без надобности
Если в шрифт не включено специальное капительное начертание, не используйте его вообще.
Буквы
24. Не изменяйте ширину букв
Просто не делайте это. Пожалуйста.
Числа
25. Числа прописью
Пишите числа прописью, это выглядит изысканно.
Ежедневно взгляд блуждает по билбордам на улице, сайтам, рекламной полиграфии, постам в соцсетях … И достаточно лишь несколько секунд, чтобы отвести глаза, прокрутить дальше и не воспринимать эту информацию. Возможно, вы скажете, что экономите свое время и фильтруете данные. А мы расскажем, что вам просто не понравился шрифт (и вы об этом даже не догадывались). Потому что наш мир насыщен графическим дизайном! И часто мы воспринимаем его подсознательно. От флаеров, которые раздают у метро, до упаковки любимого сока или меню изысканного ресторана … А если научиться понимать дизайн, сразу станет очевидно, почему некоторые вещи нас привлекают, а некоторые отталкивают.
- Выясните вид шрифта
- Шрифты с засечками
- Шрифты без засечек
- Не забывайте о контексте
Украинское издательство ArtHuss начинает издавать серию книг для творческих профессий. Встречайте «Основы. Графический дизайн 01: Подход и язык» — это первое издание, которое познакомит с миром дизайна и будет понятным не только профессионалам, но тем, кто никогда не имел дело с этой сферой. А пока все ждут готовность издательства напечатать книгу, она уже доступна по предварительному заказу! В одном из разделов авторы подробнее рассказывают о типографике. Поэтому о билбордах, печати полиграфии и постах в соцсетях мы не зря упоминали, ведь правильно подобранный шрифт влияет на восприятие. А типографика в широком смысле и является наукой о шрифтах. Здесь есть множество тонкостей: создание, декорирование букв, компоновки, верстка текста, пропорции букв, интервал между ними … Но пока не будем нырять так далеко в море, а погуляем на берегу, слегка замочив ноги. И выясним, как правильно подбирать шрифты, чтобы взгляд на них задержался дольше.
Выясните вид шрифта
Классификаций есть множество, поэтому в них легко запутаться. Здесь как и в любой другой науке, когда одни утверждения могут противоречить другим. И для удобства сосредоточимся на двух видах, которые отличаются наличием маленьких черточек на кончиках букв. Антиква — это шрифт с засечками. Гротеск — без засечек, в эту группу также можно отнести шрифты, имитирующие почерк, отображаются символами или емодзи и другие.
Шрифты с засечками
Полезные для длинных текстов (таких, как этот). Раньше считали, что засечки мешают восприятию, однако исследования показали, что они наоборот, направляют взгляд читателей. В традиционном верстке книг также используют антиквы. Поэтому возьмите на заметку для оформления своих резюме, писем или инструкций шрифты Georgia или Garamond. Конечно, старый добрый Times New Roman тоже пригодится, но иногда он слишком официальный.
Шрифты без засечек
Гротески, наоборот, используют для коротких текстов. Именно поэтому этот вид шрифтов окружает нас повсюду! На сайтах, в логотипах, брошюрах, рекламе… И не удивительно, потому что с XIX века гротески считают синонимом современности. Итальянский графический дизайнер Эммануэль Абрате сделал эксперимент и решил заменить названия брендов в логотипах на названия шрифтов, которые они используют. И даже к гадалке не нужно ходить, чтобы догадаться, что большинство шрифтов — это гротески.
Не забывайте о контексте
Выше мы упоминали, какие шрифты лучше выглядят в резюме. Что же произойдет, если заменить их на какой-то более веселый, например, Comic Sans? Ничего катастрофического: Земля не остановится и небо не упадет … Но потенциальный работодатель может подумать, что у вас недостаточно серьезные намерения. Шрифт Comic Sans создали для реплик виртуального помощника Microsoft, а вдохновлялись комиксами. Поэтому его следует использовать осторожно. Хотя у этого шрифта есть защитники, которые считают, что шрифт уместен в любой ситуации. Они даже создали блог в Tumblr, который называется Comic Sans Project, и они заменяют все шрифты в логотипах брендов на своего любимца.
Однако как ни крути, контекст использования важен. Было бы странно использовать в меню вареничной шрифты, имитирующие иероглифы. Так же и древнеславянские шрифты уместны на фасаде ресторана, где подают суши.
Удачный шрифт может улучшить дизайн или разрушить впечатление окончательно. Поэтому вдохновляйтесь книгой «Основы. Графический дизайн 01: Подход и язык», в ней также есть интервью с гуру этой профессии. Развивайте свои навыки и наслаждайтесь красотой вокруг и смелыми визуальными решениями. А главное — создавайте их сами!
___________________________
- Примеры готовой продукции — в портфолио типографии.
- Информация из области маркетинга и полиграфии — в блоге типографии Huss.
Оперативно и качественно напечатаем книги и другую рекламную полиграфию. Поможем составить техническое задание, быстро просчитаем стоимость, учтем все пожелания. Свяжитесь с нами.