Сочетаем шрифты и иконки: руководство

Гармоничное сочетание иконок и шрифта — важное условие для достижения визуальной последовательности. Так все элементы дизайна будут работать вместе, создавая узнаваемый бренд и улучшая опыт взаимодействия.

Отправная точка

Выбирая иконки в пару к шрифту, учитывайте следующие факторы:

• Цель и контекст. Кто ваша аудитория? Какое сообщение вы хотите донести? Каким будет общий тон проекта? И шрифт, и иконки должны соответствовать этим идеям.

• Стиль и эстетика. Оцените визуальный стиль проекта, ищите шрифты и иконки, которые вписываются в эту эстетику.

• Масштабируемость и адаптивность. Оцените масштаб проекта и контекст, к которому должны будут адаптироваться иконки. Вам могут понадобиться значки, выполненные в нескольких стилях или даже в разных начертаниях (имеется в виду разная толщина обводки).

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

Шрифты без засечек

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

С такими шрифтами сочетаются чистые, простые, современные иконки, в основе которых лежат минималистичные разборчивые формы.

Пример: набор иконок Ultimate. Он включает огромное количество нейтральных значков в разных стилях (Light, Regular, Bold, Duotone и Colors) — все они идеально сочетаются с гротесками.

Отличная комбинация — иконки Ultimate и Open Sans, гуманистический гротеск с объемными контрформами, который отличается высокой читабельностью. Альтернативные варианты: Noto, Lato, Gill Sans.

Другой похожий набор иконок — Core. Значки представлены в четырех стилях (Line, Solid, Duo и Flat), они кажутся еще более простыми и универсальными. Благодаря своей впечатляющей адаптивности такие иконки идеально сочетаются со шрифтами без засечек.

Иконки Core отлично смотрятся в комбинации с Work Sans, шрифтом, который был создан на основе ранних гротесков и имеет 10 начертаний, что обеспечивает максимальную гибкость. Если этот шрифт вам не по вкусу, вы также можете присмотреться к Inter, Roboto или Neue Haas Grotesk.

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

В этом случае отличной парой будет более геометричный шрифт с широкими буквами, такой как Montserrat. Альтернативные варианты: Poppins, Raleway или Gotham.

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

Шрифт Kodchasan — удивительно подходящий партнер для Flex. Такое ощущение, будто они были построены на основе одних и тех же принципов. Есть и более нейтральные альтернативы: Rubik, Nunito, Noway Round.

Если же вам нравятся более строгие, «архитектурные» гротески, отличным вариантом будет Sharp. Иконки из этого набора выглядят геометричными и грубоватыми.

Такому брутальному набору иконок нужен брутальный шрифт, например, Space Grotesk — уникальный, но при этом разборчивый гротеск в стиле хай-тек. Другие варианты: DM Sans, Archivo, Neue Machina.

Шрифты с засечками

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

С такими шрифтами сочетаются элегантные иконки с изысканными деталями и умеренным контрастом.

Хорошее решение — уже рассмотренные наборы Ultimate и Core. Они достаточно универсальны и не будут отвлекать слишком много внимания от основного контента.

В случае с Ultimate для создания «традиционного» визуала подойдет антиква старого стиля, например, EB Garamond. Альтернативные варианты: Cormorant, Cardo, Sabon.

Что касается Core, то с ним лучше всего будет смотреться переходная антиква (сочетающая в себе признаки антикв старого и нового стиля), например, Merriweather, с ее более высоким контрастом и симметричными глифами. Такая комбинация, несмотря на свою серьезность, будет выглядеть достаточно современно. Другие возможные варианты — Domine, Spectral или Signifier.

Однако существуют наборы иконок, которые изначально были задуманы для использования в паре с антиквами. Например, Platinum был разработан специально для люксовых брендов. Его отличают тонкие штрихи, вогнутые кривые и острые углы, которые придают ему элегантный и классический вид.

Platinum — более универсальный набор иконок, чем может показаться на первый взгляд. Контрастные шрифты с засечками, такие как Boska, идеально сочетаются с ним благодаря присущей им утонченности. Если вам нравится этот стиль, также обратите внимание на Prata, Marcellus и Domaine.

Набор иконок Guidance — родной брат Platinum, но здесь выпуклые кривые уступают место вогнутым. Они создают сильный контраст с прямыми линиями. Изначально эти значки создавались для вывесок. Вы можете использовать их совершенно бесплатно.

Здесь нам нужен шрифт с менее выраженным контрастом и более однородной структурой, что-то современное, но в то же время стильное, как IBM Plex Serif. Отличная альтернатива — брусковый шрифт Arbutus Slab либо более органические Alice или Woodland.

Моноширинные шрифты

Как следует из названия, символы в моноширинных шрифтах имеют одинаковую фиксированную ширину. Такие шрифты часто используют для написания кода и ассоциируют с цифровыми технологиями.

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

Здесь нельзя снова не упомянуть Sharp, ведь этот набор задумывался именно таким. Как и Core, он включает четыре разных стиля (Line, Solid, Duo и Flat), что дает нам большую свободу выбора.

Любой моноширинный шрифт будет отлично работать с Sharp, но Fira Mono с его угловатыми глифами — один из самых удачных вариантов. Альтернативы: Space Mono, Spline Sans Mono.

Если же вы хотите подчеркнуть ретрофутуристический вид таких шрифтов, обратите внимание на Cyber. Это очень специфический набор, в котором используются строго прямые линии и углы 90/45 градусов, что придает иконкам индивидуальность и помогает повысить узнаваемость бренда.

Моноширинный шрифт для Cyber должен быть немного более характерным. Очевидным выбором кажется Kode Mono с его скошенными углами и замысловатыми формами. Если вам нужен более нейтральный вариант, присмотритесь к Azeret Mono, а если что-то в стиле ретро — к Share Tech Mono.

Рукописные шрифты

Рукописные шрифты имитируют надписи, выполненные от руки. Они придают дизайну индивидуальность, поэтому их часто используют в оформлении приглашений и поздравительных открыток.

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

Freehand — теплый, живой набор иконок, нарисованный вручную. Он включает более 10 000 уникальных значков, и все они идеально гармонируют между собой. Это именно то, что нужно, если вы используете в своем проекте рукописный шрифт.

Freehand дает нам свободу выбора — по сути, мы можем взять любой рукописный шрифт, который обладает индивидуальностью. Это может быть, например, Waiting for the Sunrise, Caveat или Indie Flower.

Если сочетание рукописных иконок и такого же шрифта кажется вам избыточным, обратите внимание на Flex. Иконки из этого набора напоминают нарисованные от руки, но это не так сильно бросается в глаза. Значки представлены в четырех стилях (Line, Duo, Solid и Flat), что делает их более универсальными.

В паре с Flex хорошо смотрятся дружелюбные, органические шрифты, такие как Delius Unicase. Если вам нужно, что-то более близкое к классической каллиграфии, обратите внимание на Sacramento, а если что-то менее идеальное и строгое — на Itim.

Более мультяшный и детализированный вариант — Plump. Эти иконки отлично сочетаются с объемными, немного наивными шрифтами. Для большей гибкости они представлены в четырех стилях (Line, Duo, Solid и Flat).

Подходящий шрифт — забавный Hachi Maru Pro. Если вам нравится этот непринужденный причудливый стиль, вас также могут заинтересовать Mali и Klee One.

Декоративные шрифты

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

Выбор иконок зависит от уникальных особенностей каждого конкретного шрифта. Но в целом они должны быть смелыми и выразительными.

Если вы хотите использовать «пухлый» шрифт, например, Caprasimo, лучшим компаньоном станет Plump. Сходство между ними более чем очевидно, и в целом эти буквы и иконки вызывают одни и те же ощущения.

Если вам нужен шрифт в стиле пиксель-арт, например, DotGothic16, к нему подойдет набор иконок Pixel. Это очевидное сочетание позволяет добиться ностальгического облика и подчеркнуть не только визуал, но и ценности бренда.

С другой стороны, если ваш выбор — индустриальный бруталистский шрифт, наподобие Chakra Petch, лучшим решением станет набор иконок Cyber (представлен в двух стилях: Line и Duotone). Чем более характерными будут значки, тем более уникальным получится проект в целом.

Если вы ищете что-то более причудливое и непринужденное, обратите внимание на Stickies. Этот набор иконок отлично сочетается с харизматичными шрифтами, типа Modak. Такая типографика выглядит уникально благодаря объемным формам и тонким контрформам.

Конечно, иконки можно создать самостоятельно на основе шрифта, однако это требует определенных технических знаний и навыков. Успешные примеры такого подхода: иконки, разработанные Даниэлем Утцем для шрифта Netto, а также набор пиктограмм для вывесок аэропорта Кёльн/Бонн.

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