Типографика – что это такое

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

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

Что такое типографика

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

Ее инструментами являются шрифты, символы, знаки.

Какие задачи выполняет:

• подбор шрифта, его плотности, начертания;
• подбор соотношения размеров шрифтов;
• проверка межстрочного интервала;
• составление шрифтовых композиций;
• сочетаемость шрифтов;
• самостоятельная разработка шрифтов;
• формирование расположения текстовых блоков;
• распределение текста в макете.

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

• Текст должен быть читабельным для пользователя.
• Нельзя использовать одновременно множество различных шрифтов, эмоджи, анимаций. Это будет говорить об отсутствии стиля.
• Важное должно отличаться от второстепенного.
• Деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3.
• Текстовая информация чаще важнее, чем картинки, а значит, графика должна быть на службе у контента, а не наоборот.
• На сайте все должно быть естественно и гармонично.

Как подбирать шрифты

Чтобы правильно выбрать шрифт, придерживайтесь следующих правил:

1. Определите цель вашего дизайна, какую вы хотите донести информацию. Например, можно выбрать стиль, соответствующий стилю иллюстраций.

   
   

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

   
   

   В этом случае шрифт просто делает акцент на значимой информации, несущей ключевой смысл.

2. Определите целевую аудиторию. Например, шрифт Sassoon Primary больше подходит для детей.
3. Учитесь у других дизайнеров, обращайте внимание, какие шрифты они применяют в своих проектах.

Размеры шрифтов – как подобрать кегль

Кегль – это размер шрифта по вертикали. Единицы измерения: типографские пункты – pt; пиксели – px; относительные единицы – em; условные единицы – dp.

Есть определенные правила подбора шрифта для текстовых и интерактивных страниц на ПК и на мобильном устройстве:

• В текстовых страницах используется более крупный размер шрифта, чтобы человек смог спокойно читать, не напрягая зрение. Минимально он должен быть 16–18px, но в отдельных случаях могут подойти и 20px+.
• В интерактивных страницах размер шрифта может быть меньше, нормой считается 14-16px. Для менее значимой информации могут использоваться мелкие кегли, а для более значимой — кегли побольше. Например, шрифт названий событий устанавливается в 12px, указатели времени в 10px, даты в 48px.
• При создании приложений на мобильных устройствах используется шрифт не менее 16px для основного текста. Для второстепенного, подписей для полей и картинок лучше использовать размер на пару значений меньше: например, 13px или 14px. Обязательно проверяйте дизайн на своих девайсах, т. к. макет, сделанный на компьютере, может выглядеть иначе на мобильном устройстве.

Интерлиньяж

Интерлиньяжем называют расстояние между строками текста по вертикали. Он измеряется по базовой линии (условная линия, с которой соприкасается нижний край большинства букв). От базовой линии одной строки текста до базовой линии следующей.

Сочетания шрифтов

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

Как создать идеальную шрифтовую пару:

• По принципу сходства. Например, применять курсив.
• По принципу контраста. Здесь нужно выбирать шрифты, которые не конфликтуют, а гармонируют друг с другом.

В сети можно найти массу сервисов, предлагающих идеи создания шрифтовых пар, которыми может воспользоваться начинающий дизайнер: Fontjoy, Typotheque, Mixfont и т.д.

Правило близости

Правило близости заключается в том, что любые объекты, которые расположены рядом, воспринимаются единым целым. Поэтому заголовок ставится к тексту, к которому относится.

Объясним на примере трех кружков. Если они расположены на одинаковом расстоянии друг от друга, то воспринимаются по отдельности:

Если мы перемещаем один кружок к другому, они будут восприниматься связанно, а третий отдельно:

Увеличим первый кружок, и он подчинит второй и третий:

При верстке таблиц также можно применять этот принцип, убрав разделители:

Классификация и виды шрифтов

Чтобы правильно подобрать шрифты, нужно разбираться в их классификации:

• Наборные – для больших текстовых массивов. Применяются в книгах, журналистике, статьях. Их главные качества: нейтральность, разборчивость, удобность чтения.

  

• Антиквенные – шрифты с засечками. Антиква является главным шрифтом для наборного текста. В отличии от обыкновенных текстовых они передают и прочую контекстуальную информацию. Применяются при печати деловых журналов, газет, книг, документов, писем и официальных заявлений. Антикву делят на старый стиль (Abobe Garamond Pro), переходную (Times New Roman, Baskerville Georgia), новый стиль (Bodoni, Didot, Walbaum).

  
  

  Пример шрифта Times New Roman.

• Гротески – шрифты без засечек. Используются для набора текста, в заголовках, в навигации. Их отличительные качества: функциональность, универсальность, понятность, разборчивость. Шрифты также имеют разделение на старые гротески (Franklin Gothic и Akzidenz Grotesk), новые гротески (Helvetica), гуманистические гротески (Gill Sans, Frutiger, Tahoma), геометрические гротески (Futura, Avant Garde, Gotham).

  
  

• Акцидентные – декоративные шрифты. Применяются для небольших текстовых объемов, например, для логотипов, названий, заголовков, титулов, обложек. В отличии от обыкновенных текстовых они передают и прочую контекстуальную информацию. Предназначены для привлечения внимания пользователя, но должны гармонировать с основным текстом.

  
  

• Леттеринг – ручное написание символов. Техника похожа на каллиграфическую. Используется в логотипах, плакатах, просто для красивых надписей. Бывают двух видов: формальные и неформальные. Формальный шрифт больше похож на каллиграфию:

  
  

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

Что такое гарнитура

Гарнитурой называют объединение шрифтов, отличающихся по начертанию и кеглю, но одинаковых по характеру рисунка, например, наличие или отсутствие засечек, начертание и баланс букв, интервалы и соотношение высоты прописных и строчных букв.

Примером гарнитуры являются шрифты Courier или Georgia.

Основных групп гарнитур две:

• С засечками. Используются для придания тексту весомого и официального тона. Чаще используется в объявлениях, новостных изданиях. Пример шрифта Antiqua:

  
  

• Без засечек. Они облегчают восприятие текста на разных носителях, помогают передать практичность и современность. Используются на веб-сайтах, в онлайн-сервисах и приложениях. Пример шрифта Calibri.

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

Например, декоративные шрифты Outlaw и Morris:

Цвет текста

Цвет текста является элементом оформления. В типографике главным цветом выступает черный с оттенками серого. Он прекрасно сочетается с любыми яркими цветами, но прежде всего — с красным. Красный цвет может быть противопоставлен большому массиву черного, это позволяет выделять важные мысли и добиваться интересной композиции минимальными средствами.

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

Где брать шрифты

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

Платно

Обратитесь на сайты с библиотеками шрифтов, например:

• Paratype. Крупнейший российский магазин шрифтов. На сайте удобная фильтрация, есть тайп-тестер, где можно проверить, как будет выглядеть ваш текст при наборе различными шрифтами. Есть бесплатные и платные шрифты, цена от 1000 рублей.
• type.today. Здесь собраны шрифты с качественной кириллицей, которые соответствуют современным тенденциям в области типографики. Стоимость 2–10 тысяч рублей.

Бесплатно

• Google Fonts. Здесь размещено более тысячи семейств шрифтов. Удобная система фильтрации поможет вам быстро найти все необходимое.
• Adobe Fonts. Официальные подписчики Creative Cloud могут бесплатно скачивать неограниченное количество представленных шрифтов.
• Агентства и творческие объединения, специализирующиеся на разработке шрифтов. Они занимаются разработкой шрифтов под заказ или для продажи, создают экспериментальные шрифты. Например, «Студия Артемия Лебедева», Klim Type Foundry, TypeType.
• Найти бесплатные шрифты можно через соцсети, в которых отдельные дизайнеры их публикуют.
• Свои шрифты молодые дизайнеры публикуют на Behance, например, разработанные на курсах, во время творческих мастер-классов.
• У коллег-дизайнеров, у которых есть своя коллекция бесплатных шрифтов.

Как создать шрифт

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

Вот несколько правил создания собственного шрифта:

1. Программное обеспечение.

   Важно выбрать подходящее программное обеспечение. Что можно использовать:

   • FontForge. Бесплатный редактор с открытым исходным кодом и удобное приложение для разработки шрифтов.
   • FontStruct. Бесплатная программа, которая позволяет быстро и легко создавать шрифты из геометрических фигур, располагая их внутри сетки, как плитку или кирпичи.
   • FontLab 7. Встроенный редактор, который помогает создавать шрифты. Есть 30-дневная бесплатная пробная версия.
2. Составление брифа.

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

3. Набросок.

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

4. Создайте шрифт.

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

Верстка текста – основные правила

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

• Единообразие. Это главный критерий качественной верстки. Автор должен составить определенные нормы верстки для данного проекта и следовать им на протяжении всей работы. Проект должен соответствовать следующим критериям: одинаковая высота полос текста; основной текст должен быть набран одним и тем же шрифтом; оформление таблиц, иллюстраций, цитат, заголовков и всех прочих элементов должно быть одинаковым на протяжении всего издания.
• Недопустимость висячих строк. Так называют первую или последнюю строку абзаца в том случае, когда остальной текст абзаца оказался на другой странице.
• Приводная верстка. При ней должны совпадать строки на обеих сторонах бумаги так, чтобы при печати на тонком листе между строками не был виден текст оборотной страницы, а также строки должны совпадать по высоте в соседних колонках или на соседних страницах.
• Заголовок не должен отрываться от текста раздела или размещаться на двух страницах.
• Отсутствие коридоров. Это совпадающие по горизонтали пробелы в соседних строках, которые отвлекают внимание человека и ухудшают читабельность текста.
• Правильность переноса слов.

Иллюстрирование текста

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

Какие есть виды иллюстраций:

• Фото. Применяется при описании продукта, рассказе о событиях, описании каких-то объектов. Лучше, чтобы фотографии были уникальными, но можно воспользоваться и бесплатными фотостоками: Freerangestock, Firestock, Pinterest.
• Скриншоты. Используются при написании пояснений, инструкций и других последовательных действий. Для создания скринов можно использовать стандартные средства операционной системы или воспользоваться специальными сервисами.
• Рисунки. Рисунки подходят для метафор, когда основную мысль трудно выразить предельно конкретно. В этом случае, хорошим дизайном иллюстраций можно добиться нужного эмоционального воздействия на читателя. Их вы можете нарисовать самостоятельно или заказать у специалиста.

Узнать о типографике больше

Чтобы узнать о типографике больше, обратитесь к книгам, написанным профессионалами:

• «Руководство для современного дизайнера» Я. Чихольда: фундаментальный труд, который создавался как пособие для оформления печатных текстов, но актуален и для веб-дизайна.
• «Великие шрифты» В. Ефимова. Полезный справочник по кириллическим шрифтам.
• «Типографика: шрифт, верстка, дизайн» Д. Феличи. Руководство по типографике в современном графическом и веб-дизайне, в т. ч. по шрифтам и размерам в тексте.
• «О шрифте».Э. Шпикермана. Руководство для тех, кто хочет изучить особенности разных шрифтов, их применение и сочетания.

Сайты и блоги специалистов, разбирающихся в шрифтовом дизайне:

• Блог и сайт Сергея Рассказова.
• Сайт Ярослава Трегубова.
• Сайт дизайнера и эксперта по типографике Александра Васина.
• Блог Игоря Штанга о типографике, тексте и дизайне.
• Журнал «Шрифт».

FAQ

Какие есть способы выражения главных мыслей?

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

Какое оптимальное количество символов должно быть в одной строке?

Профессионалы говорят, что оптимально, когда в строке в районе 60 символов при чтении с компьютера, если читать с мобильного устройства, то не более 30–40 символов.

Можно ли писать текст заглавными буквами для привлечения внимания?

Этого делать не стоит. Тренд выделять главное капсом на дизайне сайтов давно прошел. Сегодня большие буквы воспринимаются читателем больше негативно. Они могут быть уместны лишь в заголовках. Привлекать внимание с помощью капса уж точно не рекомендуется.

Какие в последние годы есть новые направления в типографике сайтов?

• Большие шрифты. Специалисты говорят, что чем больше и жирнее шрифт, тем современней ваша типографика.
• Чаще применяется крупная типографика, привлекающая и удерживающая внимание читателя.
• Активно применяются гифки, анимация, 3D. Они оживляют сайт, привлекают внимание посетителей и выделяют ваш дизайн на фоне других.
• Применение сломанных сеток. Типографика сайта сегодня все больше напоминает издательский дизайн. Разметка на блоки, строгое количество колонок текста, модули - давно уже не придерживаются строгих правил.

Подведем итоги

• Типографика – это все, что касается оформления текстов в дизайне: шрифты, размер, цвет и начертание букв.
• Она улучшает пользовательский опыт, повышает узнаваемость бренда, задает настроение, влияет на принятие решений.
• Потребуется для оформления текстов в работе верстальщикам, веб-дизайнерам, специалистам по графическому дизайну, контент-менеджерам, SEO-специалистам и т. д.
• Главная задача шрифта – быть эстетичным и удобочитаемым.
• Чтобы правильно выбрать стиль шрифта, нужно знать его классификацию.
• Шрифт можно выбрать бесплатно, купить или сделать самостоятельно.