Дизайн для недизайнеров: как работать со шрифтами

В мире более 300 тысяч шрифтов. Некоторые создаются для одной-единственной надписи, другие — становятся суперпопулярными и используются буквально везде. Например, шрифты из лого Vespa и Coca-Cola больше нигде не увидишь, а текст в Helvetica встречается повсюду — хоть в логотипах крупных брендов (например, Nestle и Lufthansa), хоть на новостных сайтах.

Логотипы Vespa, Coca-Cola, Nestle

Время от времени нам всем приходится выбирать шрифты онлайн. Например, когда оформляем статью в блоге, подбираем надписи для слайдов презентации или ставим цитату на картинку для соцсетей. Как правило, в текстовом или графическом редакторе уже установлен набор шрифтов. Осталось только определиться, какой нравится. Подготовленному человеку готовый широкий набор облегчает работу, но недизайнер может растеряться. А если он вдруг отправится искать красивый шрифт на Fonts, Typotheque или GoogleFonts, где предложений тысячи, работа растянется еще на час-два. Чтобы этого не случилось, нужно четко понимать, какие характеристики должен иметь шрифт, который вы ищете.

Скриншот со страницы сайта Fonts.com со шрифтами для веб-страниц Шрифты станут чуть более понятными и работать с ними будет проще, когда вы:

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

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

Типы шрифтов

Каким бы хаотичным не казался мир шрифтов на первый взгляд, в действительности он хорошо структурирован. Каждый шрифт относится к определенному типу — гарнитуре — и отражает ее главные особенности. Фактически гарнитура — это «семья» шрифтов с одинаковыми стилистическими признаками. А шрифт — набор букв и других символов, который обладает своим визуальным характером, но сохраняет особенности гарнитуры, к которой принадлежит. Есть два базовых типа гарнитур: антиквы (с засечками) и гротески (без засечек).

Традиционно антиквы используются для текстов большого объема. Считается, что маленькие черточки на концах букв помогают взгляду быстрее скользить по строчкам, и так восприятие текста упрощается. Именно поэтому при верстке книг, буклетов и лонгридов большей частью используют антикву. Примеры антикв: Times New Roman, Garamond, Georgia, Merriweather Гротески, или рубленные гарнитуры, чаще всего встречаются в интерфейсных фразах, небольших текстах и инструкциях. С большого расстояния или на экранах устройств они читаются лучше и выглядят менее формальными, чем антиквы. Примеры гротесков: Arial, Roboto, Open Sans, Montserrat Остальные типы гарнитур распространены меньше. Они разделяются на рукописные (имитация почерка), моноширинные (печатная машинка), символьные (смайлики) и акцидентные (для обложек, вывесок и лого). Мы их видим довольно часто, но они выполняют скорее декоративную функцию — если нужно побыстрее и без потерь передать смысл текста, его набирают в антикве или гротеске.

Слово Merry в этом шаблоне открытки в VistaCreate написано акцидентным шрифтом, а I wish you a и Christmas — рукописными

Размер и расположение символов

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

Насыщенность — это то, насколько легким кажется шрифт. Все зависит от отношения толщины основных штрихов к высоте основного знака — чем оно меньше, тем легче текст. Начертание может быть и очень тонким (получается нежное написание), и очень жирным (для внушительных надписей). Чаще всего выбирают средний вариант, «обычное» написание.

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

Интерлиньяж — расстояние между строками в тексте. Стандартная пропорция интерлиньяжа колеблется вокруг 120%. Это означает, что если размер шрифта 20 точек, то интерлиньяж должен равняться 24 точкам. Если хотите, чтобы текст выглядел плотнее, сократите расстояние между строками, а если легче — увеличьте:

Текст, набранный насыщенным шрифтом (сверху), шрифт с маленьким трекингом (в центре) и маленьким интерлиньяжем (снизу)

Настраивать шрифты нужно аккуратно, особенно это касается компоновки букв. Если расстояние окажется слишком маленьким, текст существенно потеряет в читабельности, а если большим — буквы или строки «разлетятся», и это плохо скажется на восприятии смысла. В статьях и других объемных текстах с этими параметрами лучше не экспериментировать, но в плакатах и на открытках это вполне допустимо.

Выбор шрифта

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

Детская картинка с легким рукописным шрифтом (слева) и строгим гротеском (справа)

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

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

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

Сочетание антиквы Abril Fatface и гротеска Montserrat

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

Примерно такое:

Пять несочетаемых шрифтов в одной надписи Подытожим.

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

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

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